1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title></title>
    6.     </head>
    7.     <body>
    9.         <img src="img/swu.jpg" width="160px" height="160px">
    10.         <div></div>
    12.         <script>
    13.             /*
    14.              * 分时问候案例：
    15.              * (1)根据系统时间不同来判断，需要日期内置对象
    16.              * (2)根据多分支语句来设置不同的图片
    17.              * (3)需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
    18.              * (4)需要一个div属性，显示不同问候语，修改元素内容即可
    19.              */
    21.             //获取事件源
    22.             var img=document.querySelector("img");
    23.             var div=document.querySelector("div");
    25.             //得到当前的小时数
    26.             var date=new Date();
    27.             var hour=date.getHours();
    29.             //判断
    30.             if(hour<12){
    31.                 img.src="img/swu.jpg";
    32.                 div.innerHTML="亲，上午好，好好敲代码！";
    33.             }
    35.             else if(hour<=14){
    36.                 img.src="img/zwu.jpg";
    37.                 div.innerHTML="亲，中午好，继续敲代码！";
    38.             }
    40.             else if(hour<=18){
    41.                 img.src="img/xwu.jpg";
    42.                 div.innerHTML="亲，下午好，不要敲代码！";
    43.             }
    45.             else{
    46.                 img.src="img/ws.jpg";
    47.                 div.innerHTML="亲，晚上好，睡觉觉！";
    48.             }
    50.         </script>
    51.     </body>
    52. </html>