用原生JS实现一个倒计时功能

最新推荐文章于 2023-09-29 21:36:44 发布

小付学代码

最新推荐文章于 2023-09-29 21:36:44 发布

阅读量312

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/ONLYSRY/article/details/125665511

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时功能</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #count {
            width: 800px;
            height: 200px;
            background:#00BFFF;
            margin: 100px auto;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
        }

        #count span {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.2);
            line-height: 60px;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="count">
        倒计时：
        <span class="day">00</span>
        天
        <span class="hour">00</span>
        小时
        <span class="min">00</span>
        分钟
        <span class="sec">00</span>
        秒
    </div>
</body>
<script type="text/javascript">
    //未来时间-现在时间
    var ocount = document.getElementById('count');
    var spans = ocount.getElementsByTagName('span');
    var endTime = new Date('2022/07/15 17:59:00') //未来时间


    var timer = null;
    clearInterval(timer);
    timer = setInterval(coutTime, 1000); //定时器 一秒刷新一次
    function coutTime() {

        var nowTime = new Date(); //现在时间
        var lastTime = parseInt((endTime - nowTime) / 1000);  //1000毫秒转换为秒
        if (lastTime >= 0) {
            var day = parseInt(lastTime / 60 / 60 / 24);
            var hour = parseInt(lastTime / 60 / 60 % 24);
            var min = parseInt(lastTime / 60 % 60);
            var sec = parseInt(lastTime % 60);

            spans[0].innerHTML = day;
            spans[1].innerHTML = hour;
            spans[2].innerHTML = min;
            spans[3].innerHTML = sec;

            console.log(day)
            console.log(hour)
            console.log(min)
            console.log(sec)

        } else {
            clearInterval(timer)
        }


    }
</script>

</html>