倒计时实现

html:

    <div id="daojishi">
        <ul >
            <li></li>
            <li></li>:
            <li></li>
            <li></li>:
            <li></li>
            <li></li>
        </ul>
    </div>

js:

<script>
        //设置时间,以秒计算
        var totalSec = 3600;
        // 获取元素节点
        var timeLists = document.getElementById('daojishi').getElementsByTagName('li');
        console.log(timeLists.length)
        var interId = setInterval(function () {
            totalSec--;
            var hour = Math.floor(totalSec / 3600)
            var minute = Math.floor(totalSec % 3600 / 60)
            var second = totalSec % 60
            if (totalSec < 0) {
                //跳出计时
                clearInterval(interId)
                console.log('倒计时结束')
                return;
            }
            console.log(hour + '|' + minute + '|' + second)
            //小时十位
            timeLists[0].innerHTML = (Math.floor(hour / 10))
            //小时个位
            timeLists[1].innerHTML = (hour % 10)
            //分钟十位
            timeLists[2].innerHTML = (Math.floor(minute / 10))
            //小时个位
            timeLists[3].innerHTML = (minute % 10)
            //秒十位
            timeLists[4].innerHTML = (Math.floor(second / 10))
            //秒个位
            timeLists[5].innerHTML = (second % 10)
        }, 1000)
 </script>

猜你喜欢

转载自blog.csdn.net/horizon_06/article/details/82658941