【JavaScript练习】利用定时器做倒计时效果

最新推荐文章于 2021-07-20 22:44:00 发布

HsiehChia

最新推荐文章于 2021-07-20 22:44:00 发布

阅读量572

点赞数 1

分类专栏： JavaScript练习文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43303646/article/details/113699417

版权

JavaScript练习专栏收录该内容

40 篇文章 2 订阅

订阅专栏

【JavaScript练习】利用定时器做倒计时效果

运行结果
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            margin: 50px 100px;
        }
        
        span {
            background-color: rgba(0, 0, 0, 0.426);
            color: #fff;
            padding: 10px;
            font-weight: 700;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div>
        <span class="time">距离</span>
        <span class="day"></span>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        var time = document.querySelector('.time');
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        var t = '2021-5-1 18:00';
        time.innerHTML += t;

        var inputTime = +new Date(t); //用户输入时间总毫秒数

        countDown();
        setInterval(countDown, 1000); //页面刚开始有一秒钟空白，所以要先调用一次返回时间函数

        function countDown() {
            var nowTime = +new Date(); //当前时间总毫秒数
            // var inputTime = +new Date(time); //用户输入时间总毫秒数
            var times = (inputTime - nowTime) / 1000; //剩余时间总秒数
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d + '天';

            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h + '时';

            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m + '分';

            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s + '秒';

            // return d + ':' + h + ':' + m + ':' + s + ':';
        }

        countDown
    </script>
</body>

</html>

HsiehChia

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript练习】利用定时器做倒计时效果

【JavaScript练习】利用定时器做倒计时效果运行结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
复制链接

扫一扫