JS---案例：美女时钟

案例：美女时钟

 

思路：

打开页面就有图片按每秒1张的顺序轮换，用到了日期对象，获取小时和秒。

封装到一个命名函数后，为了使页面打卡就有图片的轮换，先调用下f1，再设置setInterval

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>

<body>
  <img src="" alt="" id="im" />
  <script src="common.js"></script>
  <script>

    function f1() {
      //获取当前时间
      var dt = new Date();
      //获取小时
      var hour = dt.getHours();
      //获取秒
      var second = dt.getSeconds();

      hour = hour < 10 ? "0" + hour : hour;
      second = second < 10 ? "0" + second : second;

      my$("im").src = "meimei/" + hour + "_" + second + ".jpg";
    }
    //打开页面先调用f1，这样打开来就有图片，不用等待
    f1();
    //页面加载哇麻痹后，过了1，秒才执行函数的代码
    setInterval(f1, 1000);

  </script>

</body>

</html>
posted @ 2019-12-12 10:47  jane_panyiyun  阅读(422)  评论(0)  编辑  收藏  举报