原生js倒计时

Posted 2020-10-22 松哥1204

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js倒计时相关的知识，希望对你有一定的参考价值。

直接上代码

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div>
        <span id="h">00</span>
        <span>:</span>
        <span id="m">00</span>
        <span>:</span>
        <span id="s">10</span>
    </div>
    <script type="text/javascript">
    function setId(id) {
        return document.getElementById(id);
    }
    var hText = setId(‘h‘);
    var mText = setId(‘m‘);
    var sText = setId(‘s‘);
    var timer;
    var hour =parseInt(hText.innerHTML);
    var min = parseInt(mText.innerHTML);
    var sec = parseInt(sText.innerHTML);
    var all = hour * 60 * 60 + min * 60 + sec;

    function time() {

        all--;
        h = Math.floor(all / 60 / 60 % 24);
        m = Math.floor(all / 60 % 60);
        s = Math.floor(all % 60);
        if (all > 0) {
            hText.innerHTML = isZero(h);
            mText.innerHTML = isZero(m);
            sText.innerHTML = isZero(s);

        } else {
            hText.innerHTML = ‘00‘;
            mText.innerHTML = ‘00‘;
            sText.innerHTML = ‘00‘;
            clearInterval(timer);

        }

    }

    function isZero(num) {
        return num < 10 ? ‘0‘ + num : num
    }

    timer = setInterval(time, 1000);
    </script>
</body>

</html>

以上是关于原生js倒计时的主要内容，如果未能解决你的问题，请参考以下文章