JS 计时器案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            color: red;
        }
    </style>

    <script>
        function show() {
            // 查找input标签
            var dom = document.querySelector("#i1")
            console.log(dom) // dom对象

            // 将当前时间字符串赋值给dom的value属性
            var now = new Date().toLocaleString()
            dom.value = now
    }

    var ID // 全局ID变量

    function start() {
        if (ID === undefined) { // ID等于undefined执行部分
            show()
            // 开启了一个每一秒钟执行一次show函数的定时器
            ID = setInterval(function () { // 启用计时器
                show()
            }, 1000) // 间隔(1000毫秒=1秒)执行一次
        }
    }

    function end() {
        clearInterval(ID) // 停用计时器
        ID = undefined // 初始化 可重复启用
    }

    </script>
</head>
<body>

<input id="i1" type="text">
<input type="button" value="start" onclick="start()">
<input type="button" value="end" onclick="end()">

</body>
</html>

 

posted @ 2022-06-06 15:42  呼长喜  阅读(46)  评论(0)  编辑  收藏  举报