Question

我有两张照片。我希望显示一个图像，如果它的一天，另一个图像，如果它的夜晚。这应该使用javascript完成。例如，从8:00到00:00显示一个图像，从00:00到8:00显示另一个图像。可以使用javascript吗？

Answer 1

您可以使用经常运行的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
}

编辑：要修改div的类而不是图像的src，请执行以下操作：

将getElementById()行更改为指向<div>，例如：

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

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

div.className = "someNewClass";

请注意，这将覆盖整个class属性，因此如果您的元素有多个类，我们需要更加谨慎地添加/删除类。

如果你保留测试图像的代码以查看它是否已经有正确的图像，那么你会为div做类似的事情：

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

同样，您不需要进行这些检查。除非绝对必要，否则它只是使元素不修改。

Answer 2

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';
}

Answer 3

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

Answer 4

我对代码中的一些内容感到非常惊讶，J-P

calcSrc没有引号和括号，例如'calcSrc（）'
img保持它的处理放在文件中。

e.g。

<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>

按当前时间更改图像

4 个答案: