2016-04-20 44 views
1

我曾經見過類似的問題,但他們都沒有幫助我的情況。爲了讓它沸騰下來,我做了一個noobie,試圖將HTML背景顏色更改爲在js腳本中創建的變量,我不知道如何做到這一點。我想要「顏色」用於背景顏色。 h,m,s是幾分鐘和幾秒鐘。我從計算機中拉出這些文件,並且正常打印它。下面是我發現,幾乎等同於我想要做的www.jacopocolo.com/hexclock/如何從html中的js腳本引用變量

JS

if (h<=9) {h = '0'+h}; 
if (m<=9) {m = '0'+m}; 
if (s<=9) {s = '0'+s}; 

var color = '#'+h+m+s; 

$("div.background").css("background-color", color); 

HTML

<style> 
.background { 
width: 100%; 
height: 100%; 
position: absolute; 
vertical-align: middle; 
} 
</style> 

我試圖使一個div的背景(如上圖所示)但它似乎並沒有工作。在結束時,所有我真的設置是這部分內容

if (h<=9) {h = '0'+h}; 
if (m<=9) {m = '0'+m}; 
if (s<=9) {s = '0'+s}; 

var color = '#'+h+m+s; 

有人能告訴我如何正確地做到這一點,甚至只是點我的大方向?任何幫助將不勝感激。

+0

1)什麼是h,m,s?他們是否已經通過任何價值獲得了 2)你確定腳本鏈接的很好! – PacMan

+0

你包含jQuery嗎? – Scraph

+0

調試你的程序並在使用之前檢查_color_是否具有預期值。 –

回答

1

我試過了,它工作正常。

$(document).ready(function(){ 
 
    var h = 0; 
 
    var m = 9; 
 
    var s = 20; 
 

 
    if (h<=9) {h = '0'+h} 
 
    if (m<=9) {m = '0'+m}; 
 
    if (s<=9) {s = '0'+s}; 
 

 
    var color = '#'+h+m+s; 
 

 
    console.log('color' + color); 
 
    console.log("Original Color " + $("div.background").css('background-color')); 
 

 
    $("div.background").css("background-color", color); 
 

 
    console.log("Updated Color " + $("div.background").css('background-color')); 
 
});
<html> 
 
    <title>Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="app.js"></script> 
 
    <style> 
 
     .background { 
 
      width: 100%; 
 
      height: 100%; 
 
      position: absolute; 
 
      vertical-align: middle; 
 
     } 
 
    </style> 
 
    </head> 
 
<body> 
 
    <div class="background">hello world</div> 
 
</body> 
 
</html>

+0

由於小時從0到23,顏色從0到255,我建議加入'h = Math.round(256/24 * h);','m = Math.round(256/60 * m);'和's = Math.round(256/60 * s);' – cdm

0

在你的代碼的問題可能是一個顏色參數前置於以 '#' 必須以十六進制給予座標:

紅= 10,綠色= 20和藍色= 40應該這樣寫:

#0A1428 

所以,你必須先爲十六進制的每個座標這樣的轉換:

var h = h.toString(16); 
var m = m.toString(16); 
var s = s.toString(16); 

然後,執行零左填充,等等。

相關問題