如何使用JavaScript在一天中的某個時間段更改網頁上的圖像

Question

我以前見過這種變化，但我一直遇到阻礙，導致頭痛。

我想要做的是通過使用JavaScript在我的地區（太平洋標準）每天的時間在我的網頁上更改標題圖像。我得到了我必須爲這個功能所做的主要想法，但我很困惑我如何導入圖像或在網頁上沒有圖像時添加圖像。

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

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

任何幫助？

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

Answer 2

你並不需要將圖像導入網頁。橫幅圖像的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'; 
    } 
} 

Answer 3

在您的橫幅圖像時使用的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(); 

Fiddle with a non-existent image(proof of concept)