简单案例----分时问候案例 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        /* 防止图片不一样大小 */
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 在不同的时间显示不同的图片和问候语 -->
    <!-- 首先有一张图片和一个盒子，里面有问候语 -->
    <img src="./imgs/yy1.jpg" alt="" />
    <div>上午好</div>
    <script>
      // 首先获取标签
      var div = document.querySelector("div");
      var img = document.querySelector("img"); //获取标签
      var date = new Date(); //获取当前的时间
      var h = date.getHours();
      if (h < 12) {
        div.innerHTML = "上午好";
        img.src = "./imgs/yy2.jpg";
      } else if (h < 18) {
        div.innerHTML = "下午好";
        img.src = "./imgs/yy1.jpg";
      } else {
        div.innerHTML = "晚上好";
        img.src = "./imgs/yy3.jpg";
      }
    </script>
  </body>
</html>
posted @ 2022-03-15 18:32  missSherry1014  阅读(77)  评论(0)    收藏  举报