原来时钟是这样实现的，js真奇妙

最新推荐文章于 2024-07-03 09:41:07 发布

weixin_44389107

最新推荐文章于 2024-07-03 09:41:07 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/weixin_44389107/article/details/86413298

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: pink;
            color: cyan;
            text-align: center;
        }
        div{
            width: 700px;
            line-height: 100px;
            margin: 50px auto;
            font-size: 50px;
            /*border: 1px solid;*/
        }
        button{
            width: 70px;
            height: 70px;
            border: none;
            border-radius: 50%;
            font-size: 24px;
            outline: none;
        }
    </style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
<button id="btn1">停止</button>
<button id="btn2">继续</button>
<script src="common.js"></script>
<script>
  //定义时间的函数
    function clock() {
        //获取当前的时间对象
        var dt = new Date();
        var year = dt.getFullYear();
        var month = dt.getMonth()+1;
        var day = dt.getDate();
        var week = dt.getDay();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        var weekArr=["日","一","二","三","四","五","六"]
        //封装补位的函数
       // s < 10 ? "0"+ s : s;
        function bu(i){
            i=i < 10 ? "0"+ i : i;
            return i;
        }
        my$("dv1").innerHTML = year+"年"+month+"月"+bu(day)+"日  星期"+weekArr[week];
        my$("dv2").innerHTML =bu(h)+":"+bu(m)+":"+bu(s);
    }
    clock();
    //添加定时器
    var t = setInterval(clock,1000);
   //点击继续
    my$("btn1").οnclick=function () {
        clearInterval(t);
    }
    //点击清除
     my$("btn2").οnclick=function () {
      clearInterval(t);
      t = setInterval(clock,1000);
  }
</script>
</body>
</html>