javascript css更改問題

代碼應該相當簡單，但我不知道爲什麼它不起作用使我瘋了。它應該只是獲得時鐘ID，然後根據時間動態改變它的背景。的代碼，我是javascript css更改問題

init(); 
function init(){ 
var clock = document.getElementById('clock'); 
var currentdate = new Date(); 
var datetime = currentdate.getHours(); 
if(datetime==1||datetime==13){ 
clock.style.backgroundImage="url(clock/clock1.png)"; 
} 
else if(datetime==2||datetime==14){ 
clock.style.backgroundImage="url(clock/clock2.png)"; 
} 
else if(datetime==3||datetime==15){ 
clock.style.backgroundImage="url(clock/clock3.png)"; 
} 
else if(datetime==4||datetime==16){ 
clock.style.backgroundImage="url(clock/clock4.png)"; 
} 
else if(datetime==5||datetime==17){ 
clock.style.backgroundImage="url(clock/clock5.png)"; 
} 
else if(datetime==6||datetime==18){ 
clock.style.backgroundImage="url(clock/clock6.png)"; 
} 
else if(datetime==7||datetime==19){ 
clock.style.backgroundImage="url(clock/clock7.png)"; 
} 
else if(datetime==8||datetime==20){ 
clock.style.backgroundImage="url(clock/clock8.png)"; 
} 
else if(datetime==9||datetime==21){ 
clock.style.backgroundImage="url(clock/clock9.png)"; 
} 
else if(datetime==10||datetime==22){ 
clock.style.backgroundImage="url(clock/clock10.png)"; 
} 
else if(datetime==11||datetime==23){ 
clock.style.backgroundImage="url(clock/clock11.png)"; 
} 
else if(datetime==0||datetime==12){ 
clock.style.backgroundImage="url(clock/clock12.png)"; 
} 
}

和HTML是

<div id="clock"><img src="clock/pill.png" alt="pill image" id="pillpic"/></div>

來源

2013-12-12 Ben

發生了什麼事是不正確的？有什麼症狀？使用開發控制檯或其他東西來檢查div的背景。背景圖像值是否改變？沒有找到圖像？ – matt

不太熟悉使用javascript設置css，但你可以嘗試用jQuery設置'css'。 '$（clock）.css（'background-image'，'url（clock/clock1.png）'）'你所有的if語句都被執行了嗎？ – Trevor

您的代碼將正常工作，只要它的運行後clock元素已加載。一定要將腳本放在該元素下面，或者使用在DOM加載後運行的事件處理程序。

這是您的代碼清理版本。

init(); 

function init() { 
    var clock = document.getElementById('clock'); 
    var t = (new Date().getHours() % 12) || 12; 

    clock.style.backgroundImage = "url(clock/clock" + t + ".png)"; 
}

DEMO：http://jsfiddle.net/EnN6s/

另外，還要確保你的圖像路徑是正確的。

來源

2013-12-12 22:50:28

完美，它現在與您的代碼，也可能是我的工程，你的只是很多整潔！我只是調用init（）;在錯誤的地方。歡呼聲 – Ben

@ user2232418：啊，是的，它會做到！真高興你做到了。 –

function init(){ 
var clock = document.getElementById('clock'); 
var currentdate = new Date(); 
var datetime = currentdate.getHours(); 
    datetime = datetime >= 12 ? datetime-12 : datetime; 
    clock.style.backgroundImage="url(clock/clock"+datetime+".png)"; 
} 
init();

來源

2013-12-12 22:58:36 yMed

javascript css更改問題

回答

相關問題