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

<!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 @   missSherry1014  阅读(63)  评论(0)  编辑  收藏  举报
相关博文：
· 倒计时countDown案例【重点案例】
· 案例----百度换肤效果
· 根据时间段的不同，显示不同的图片和问候语
· 分时问候案例
· “早安，戴夫”——使用 Node 为您的用户创建一个简单的基于时间的问候语
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示