javascript css 更改问题

Question

代码应该相当简单，但我不确定为什么它不起作用，这让我发疯。它应该只获取时钟 ID，然后根据时间动态更改其背景。 我的代码是

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>

Answer 1

只要在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)";
}

演示: http://jsfiddle.net/EnN6s/

还要确保您的图像路径正确。