分時顯示不同圖檔，顯示不同的問候語

【案例】 分時顯示不同圖檔，顯示不同的問候語

要求：

根據不同的時間，頁面顯示不同的圖檔，同時顯示不同的問候語。
1：如果是早上時間打開頁面，顯示上午好，顯示上午圖檔；
2：如果是下午時間打開頁面，顯示下午好，顯示 下午圖檔；
3：如果是晚上時間打開頁面，顯示晚上好，顯示晚上圖檔；
           

分析

1：根據系統不同時間來判斷，是以需要用到日期對象
2：利用多分支語句來設定不同的圖檔。
3：需要一個圖檔标簽，并根據時間修改圖檔，就需要用到操作元素src屬性
4：需要一個div元素，顯示不同的問候語，修改元素内容即可。
           

開始

1：先設定圖檔大小

<style>
        img{
            height: 450px;
            width: 250px;
        }
    </style>
           

2：

<div>上午好</div>
     <img src="morning.jpg">

     <script>
         //擷取元素
         var img = document.querySelector("img");
         var div = document.querySelector("div");
        // 得到目前的小時數
         var date = new Date();
         var hour = date.getHours();
         //判斷目前小時數，并改變圖檔和文字資訊
         if(hour>=6&&hour<=12)
         {
             img.src = "morning.jpg";
             div.innerText = "早上好";
         }
         else if(hour>12&& 18>=hour){
            img.src = "morning.png";
             div.innerText = "下午好";
         }
         else{
            img.src = "evening.png";
             div.innerText = "晚上好";
         }
     </script>