【JS】倒计时（数字倒数）--与日期无关

最新推荐文章于 2023-03-23 21:06:49 发布

蘑菇栗子

最新推荐文章于 2023-03-23 21:06:49 发布

阅读量367

点赞数

分类专栏： js小实例/小功能文章标签： HTML CSS JavaScript 倒计时事件监听

本文链接：https://blog.csdn.net/xxxxxwxx/article/details/126437198

版权

js小实例/小功能专栏收录该内容

60 篇文章 0 订阅

订阅专栏

HTML部分

从100到0，停止，点击按钮还原倒计时，到0，再停-----------------------点击，再还原，可通过修改div里的值修改从几开始倒数

<div id="box">100</div>
    <input type="button" name="btn" id="btn" value="开始" />
    <input type="button" name="btn" id="btn2" value="停止" />

CSS部分

#box {
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 40px;
            margin: 30px auto;
            border: solid 4px black;
            text-align: center;
        }

        input {
            display: block;
            margin: 0 auto;
        }

JS部分

    <script>
        var boxObj = document.querySelector('#box');
        var startObj = document.querySelector('#btn');
        var stopObj = document.querySelector('#btn2');
        var times = '';
        var num = boxObj.innerHTML;
        startObj.onclick = function () {
            clearInterval(times);
            times = setInterval(function () {
                var num1 = boxObj.innerHTML;
                num1--;
                if (num1 < 0) {
                    clearInterval(times);
                    num1 = num;
                }
                boxObj.innerHTML = num1;
            }, 100)
        }

        stopObj.onclick = function () {
            clearInterval(times);
        }
    </script>