原生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--;
        var h = Math.floor(all / 60 / 60 % 24);
        var m = Math.floor(all / 60 % 60);
        var 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>

 

posted @ 2018-01-30 11:40  松歌  阅读(180)  评论(0)    收藏  举报