按当前时间更改图片

我有两个图像。我想显示一个图像，如果它的一天，另一个图像，如果它晚上。这应该使用JavaScript来完成。例如，从8:00到00:00显示一个图像，从00:00到8:00显示另一个图像。这可能使用JavaScript？按当前时间更改图片

2010-07-08 King Julien

为什么要用Javascript？你可以使用服务器端语言吗？ – 2010-07-08 11:13:48

您可以使用经常运行的setInterval()。您想要的精度取决于您。

在这个例子中，它运行的每一分钟：

HTML

<img id='theImage' src='images/day.jpg' />

的JavaScript

 // setInterval makes the code run every xx milliseconds 
     // if you just want it to run, delete this top line, 
     // and the last line 
setInterval(function() { 

     // Create a new Date object with the current date/time 
    var date = new Date(); 

     // Get a reference to the image in the HTML using its ID attribute 
    var img = document.getElementById('theImage'); 

     // getHours() gets the hour of the day from 0 - 23, 
     // so the way it is set up, if the hour is less 
     // than 8, the first block will run, otherwise 
     // the second block will run 
    if (date.getHours() < 8) { 

       // This simply checks the src attribute of the image to see 
       // if it already contains the word "night". That way we 
       // don't update the src unless we need to. 
       // You could also eliminate this check if you're not going 
       // to use setInterval. 
     if(img.src.indexOf('night') < 0) { 

         // So if the hour is less than 8, and the 
         // src did not contain "night", then we need 
         // to change the src to the "night" image. 
      img.src = 'images/night.jpg' 
     } 
    } else { 
       // Same as above, only it executes if the hour was greater 
       // than 8. 
       // Again, you could eliminate the check for the word 
       // "day" if you're not going to use setInterval. 
     if(img.src.indexOf('day') < 0) { 
      img.src = 'images/day.jpg' 
     } 
    } 
    // Run the setInteval every 60000 milliseconds 
    // Delete this line as well if you're not using setInterval 
},60000);

可以摆脱setInterval()的，如果你不需要它改变时，时钟改变。（只发生一天两次，所以setInterval()可能是矫枉过正。）

如果是这样的话，只需删除第一行和最后一行。然后它会在页面加载时运行。

编辑：从你的评论，如果你要的时间间隔从15:00改为16:00（反之亦然），你只需更改测试小时，这个if()：

if(date.getHours() < 15 || date.getHours() >= 16) { 
     // set one image 
} else { 
     // set the other image 
}

编辑：要修改的不是图像的src一个div的类，这样做：

更改getElementById()行指向你的<div>，如：

var div = document.getElementById('theDiv');

然后更新，而不是src的className属性，如：

div.className = "someNewClass";

请注意，这将覆盖整个阶级属性，所以如果你的元素有几个类，我们需要更加小心添加/删除类。

如果要保持所测试的图像，看它是否已经有了合适的图像，那么你会做的DIV类似代码：

if(div.className.indexOf('someUniqueWord') < 0) {...

同样，你也不需要做这些检查。它只是使得元素是而不是，除非绝对必要。

来源

2010-07-08 11:10:31 user113716

由于我对javascript不熟悉，这段代码对我来说似乎有点复杂......如果间隔时间为15:00至16:00和16:00至15:00，应如何更改此代码。谢谢 – 2010-07-08 11:45:14

@Levani - 对不起，我会添加一些意见澄清。 – user113716 2010-07-08 12:00:39

谢谢。有没有办法改变div类而不是图像？ – 2010-07-08 12:35:49

如果你给图像一个ID，那么你可以根据用户浏览器的时间修改它的src属性。

来源

2010-07-08 11:02:46

var img = document.createElement('img'); 
calcSrc(); 
setInterval(calcSrc, 60000); 

document.body.appendChild(img); // place image 

function calcSrc() { 
    img.src = new Date().getHours() < 8 ? 'night.jpg' : 'day.jpg'; 
}

来源

2010-07-08 11:12:30 James

我是你的代码中，J-P

calcSrc的几件事情，没有引号，括号，例如颇为惊讶'calcSrc（）'
img在放置在文档中后保持其处理。

例如

<html> 
<head> 
<script> 

var img,tid; 
window.onload=function() { 
    img = document.createElement('img'); 
    calcSrc(); 
    tId=setInterval(calcSrc, 60000); 
    document.body.appendChild(img); // place image 
} 

var day = 'day.jpg' 
var night = 'night.jpg' 


function calcSrc() { 
    img.src = (new Date.getHours()<8)?night:day; 
} 
</script> 
</head> 
<body> 
</body> 
</html>

来源

2010-07-08 12:33:41 mplungjan

按当前时间更改图片

回答

相关问题