利用js写一个倒计时器

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

cersei1230

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

阅读量577

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45107630/article/details/100638890

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

下面是利用js写的一个计时器：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #txt {
            width: 200px;
            height: 50px;
            border: 2px solid #dedede;
            background: #999;
            border-radius: 10px;
            color: white;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2 id="txt">01:00:00</h2>
    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>

</body>

</html>

<script>

    var txt = document.querySelector('#txt');
    var start = document.querySelector('#start');
    var stop = document.getElementById('stop');
    var reset = document.getElementById('reset');

    var haosecond = 99
    // console.log(res)
    var second = 59

    var minutes = 00
    var hm;

    var flag = true;

    function remove() {
        if (flag) {
            flag = !flag;
            hm = setInterval(() => {
                --haosecond;
                if (haosecond == 00) {
                    haosecond = 99;
                    // var miao = setInterval(()=>{
                    // })
                    --second;
                    // second+=second;
                    if (second == 00) {
                        second = 59;
                        --minutes;
                        if (minutes <= 0) {

                            minutes = 0;
                            second = 0;
                            haosecond = 0;
                        }
                    }
                }
                if (haosecond == 0 && second == 0 & minutes == 0) {
                    clearInterval(hm);
                }
                console.log(haosecond)
                console.log(second)
                console.log(minutes)

                txt.innerHTML = (minutes < 10 ? '0' + minutes : minutes) + ":" + (second < 10 ? '0' + second : second) + ':' + (haosecond < 10 ? "0" + haosecond : haosecond)
            }, 10)

        }

    }


    start.onclick = remove

    stop.onclick = function () {
        flag = true;
        clearInterval(hm)
    }

    reset.onclick = function () {
        flag = true;
        clearInterval(hm);
        haosecond = 99;
        minutes = 0;
        second = 59;
        txt.innerHTML = '00:60:00';

    }


</script>

我们只需要改一下其中一个初始化数据，将里面毫秒，秒，分的减减，改成加加，就可以实现计数器。

cersei1230

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用js写一个倒计时器

下面是利用js写的一个计时器：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫