javascript css更改问题

javascript css change issue

本文关键字：问题 css javascript      更新时间：2023-09-26

代码应该相当简单，但我不确定为什么它不起作用——这让我发疯了。它应该只获取时钟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>

只要在加载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/

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

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();
相关文章：