js:分时显示不同图片,显示不同问候语附代码案例分析教程

根据不同时间,页面显示不同图片,同时显示不同的问候语。
如果上午时间打开页面，显示上午好,显示上午的图片。
如果下午时间打开页面,显示下午好,显示下午的图片。
如果晚上时间打开页面,显示晚上好,显示晚上的图片。
案例分析：
①根据系统不同时间来判断,所以需要用到日期内置对象
②利用多分支语句来设置不同的图片
③需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
④需要一个div元素，显示不同问候语，修改元素内容即可
代码如下：

1. <div id='zidiu'> </div>
   
2.     <script>
   
3.         var date = new Date();
   
4.         var hour = date.getHours();
   
5.         var zidiu = document.querySelector('#zidiu');
   
6.         if (hour < 12) {
   
7.             zidiu.innerHTML = '早上好！';
   
8.         } else if (hour < 18) {
   
9.             zidiu.innerHTML = '下午好';
   
10.         } else {
    
11.             zidiu.innerHTML = '晚上好！';
    
12.         }
    
13.     </script>

复制代码

获取时间参数方法教程请查看下面文章：
JavaScript Date 对象方法用于处理日期和时间