【js计时器】

最新推荐文章于 2024-11-07 13:38:59 发布

柒一’

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量129

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_67969470/article/details/128154550

版权

效果图

在这里插入图片描述

 <style>
        .dahe {
            width: 300px;
            height: 400px;
            margin: auto;
            background-color: pink;
        }

        .shijian {
            color: white;
            font-size: 40px;
            text-align: center;
            line-height: 80px;
        }

        .anniu {
            width: 250px;
            margin: auto;
        }

        button {
            width: 250px;
            font-size: 30px;
            margin-top: 20px;
        }
    </style>

<body>
    <div class="dahe">
        <div class="shijian">
            <span id="shi">00</span>
            <span id="fen">00</span>
            <span id="miao">00</span>
        </div>
        <div class="anniu">
            <button id="kai">开始</button>
            <button id="zan">暂停</button>
            <button id="jie">结束</button>
        </div>
    </div>
</body>

<script>
    function $(id) {
        return document.getElementById(id)
    }
    var shi = $('shi'),
        fen = $('fen'),
        miao = $('miao'),
        kai = $('kai'),
        zan = $('zan'),
        jie = $('jie')
    var i = 0;
    var time;
    kai.onclick = function () {
        kai.disabled = true
        zan.disabled = false
        jie.disabled = false
        time = setInterval(shijian, 100)
    }
    zan.onclick = function () {
        kai.disabled = false
        zan.disabled = true
        jie.disabled = false
        clearInterval(time)
    }
    jie.onclick = function () {
        kai.disabled = false
        jie.disabled = true
        clearInterval(time)
        i=0
        moveTime()
    }
    function shijian() {
        i++;
        moveTime()
    }
    function moveTime() {
        miao.innerText = formTime(i%60)
        fen.innerText = formTime(parseInt(i/60)%60)
        shi.innerText = formTime(parseInt(i/60/60)%60)
    }
    function formTime(j) {
        return j < 10 ? "0" + j : j
    }
</script>