分时显示不同图片，显示不同的问候语

【案例】 分时显示不同图片，显示不同的问候语
要求：

根据不同的时间，页面显示不同的图片，同时显示不同的问候语。
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>