0

我以前见过这种情况的变体，但我一直遇到导致头痛的障碍。

我想要做的是使用 JavaScript 在我所在地区（太平洋标准）的一天中更改我网页上的横幅图像。我知道我必须为该功能做的主要想法，但我对如何导入图像或将图像添加到以前不存在的网页感到困惑。

    function timeOfDayImage() {
    var now = new Date;
    var timeNow = now.getHours();

       if(timeNow < 8 || timeNow > 10){
            code
       }
       else {
          code
       }

有什么帮助吗？

4

3 回答 3

1

我会给你的身体元素一个类：

function timeOfDayImage() {
    var now = new Date();
    var timeNow = now.getHours();

    if (timeNow < 8 || timeNow > 10) {
        body.classList.add('it-is-time');
    }
}

并使用 CSS 更改元素：

body #banner {
    background-image: url('images/one.png');
}

body.it-is-time #banner {
    background-image: url('images/two.png');
}
于 2013-03-29T01:37:08.550 回答
0

您无需将图像导入网页。将src横幅图像的属性设置为新图像的 URL，浏览器会为您加载

function timeOfDayImage() {
   var now = new Date;
   var timeNow = now.getHours();
   if(timeNow < 8 || timeNow > 10){
      document.getElementById('image').src='http://www.images.com/banner1.jpg';
   }
   else {
      document.getElementById('image').src='http://www.images.com/banner2.jpg';
   }
}
于 2013-03-29T01:40:37.980 回答
0

在横幅图片中使用 ID，如下所示：

<img id="banner" alt="Something appropriate" />

然后使用getElementById从 中选择参考DoM。src使用所选元素的变量引用更改源 ( ) 属性。如果需要，您还可以更改alt属性，以确保更改后的图像对屏幕阅读器具有描述性。

function timeOfDayImage() {
    var now = new Date;
    var timeNow = now.getHours();
    var img = document.getElementById("banner");
    if (timeNow < 8 || timeNow > 10) {
        img.src="someimage.png";
        img.alt="Something equally appropriate";
    } else {
        img.src="someimage.png";
        img.alt="Something appropriate here too";
    }
}

timeOfDayImage();

摆弄一个不存在的图像（概念证明）

于 2013-03-29T01:47:19.780 回答