本地计时器

2022-05-02 22:32:13 作者：互联网

<body>

<div>
    <input type="text" class="d1">
    <button class="d2" value="开始"></button>
    <button class="d3" value="结束"></button>
</div>

<script>
        // let startBtn = $('#d2')[0];
        let startBtn = document.getElementById('d2')
        let stopEle = document.getElementById('d3')
        let inputEle = document.getElementById('d1')
        // 4.专门定义一个展示时间的函数
        function showTime(){
            // 2.获取当前时间对象
            let cTimeObj = new Date()
            // 3.添加到input标签value属性中
            inputEle.value = cTimeObj.toLocaleString()
        }

        // 6.定义一个存储定时器对象的全局变量(多个函数都要用)
        let timeObj = null;
        // 1.先给开始按钮绑定一个点击事件
        startBtn.onclick = function () {
            // 8.判断变量是否已经指代了定时器 其实就是判断是否已经有了一个任务 如果有了就不要再新建
            if(!timeObj){
                // 5.循环定时任务
                timeObj = setInterval(showTime, 1000)  // 如果起了多个任务 变量只能指向最后一个
            }
        }

        // 7.给停止按钮绑定一个取消定时器的点击事件
        stopEle.onclick = function () {
            clearInterval(timeObj)  // 移除任务 并不会清空变量的值
            // 清空变量的值
            timeObj = null
        }
</script>
</body>

标签：function,startBtn,timeObj,getElementById,let,本地,计时器,document
来源： https://www.cnblogs.com/051nogato/p/16217176.html