实现倒计时

最新推荐文章于 2022-08-04 21:55:04 发布

huxiy1995

最新推荐文章于 2022-08-04 21:55:04 发布

阅读量376

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/huxiy1995/article/details/79730518

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.设置剩余时间（时、分、秒）

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <style>
        #main {
            width: 40%;
            min-width: 250px;
            margin: 0 auto;
            height: 80px;
            background-color: #000;
            color: #FFF;
            font-size: 2em;
            line-height: 80px;
            text-align: center
        }

        div#form {
            width: 400px;
            margin: 0 auto;
            margin-bottom: 30px
        }

        input[type="text"] {
            width: 50px
        }
    </style>
</head>

<body>
    <div id="form">
        <input type="text" id="hour">时
        <input type="text" id="min">分
        <input type="text" id="s">秒
        <button id="start">开始计时</button>
    </div>
    <div id="main">

        <span id="time"></span>
    </div>
    <script>
        document.getElementById("start").onclick = function() {
            var hour = document.getElementById('hour').value;
            var min = document.getElementById('min').value;
            var s = document.getElementById('s').value;
            // var ms = document.getElementById('ms').value;
            countdown(hour, min, s);

        };
        // countdown("1", "1", "10");

        function countdown(hour, min, s) {
            if (s > 0) {
                s = String(Number(s) - 1);
            } else {
                //s==0
                if (min > 0) {
                    min = String(Number(min) - 1);
                    s = 59;
                } else {
                    // min==0
                    if (hour == 0) {
                        timeout = null;
                        alert("到点啦");
                    } else {
                        hour = String(Number(hour) - 1);
                        min = 59;
                        s = 59;
                    }
                }

            }
            var str = format(hour) + ":" + format(min) + ":" + format(s);
            console.log(str);
            document.getElementById("time").innerText = str;
            var timeout = setTimeout(function() {
                countdown(hour, min, s);
            }, 1000);
        }

        //格式化时间
        function format(str) {
            if (String(str).length == 1) {
                return "0" + str;
            } else if (String(str).length == 2) {
                return str;
            }
        }
    </script>
</body>

</html>

这里写图片描述

2.设置截止时间（天、时、分、秒）

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <style>
        div#form {
            width: 420px;
            margin: 0 auto;
            margin-bottom: 30px
        }

        input[type="text"] {
            width: 50px
        }

        #main {
            width: 60%;
            min-width: 250px;
            margin: 0 auto;
            height: 80px;
            background-color: #000;
            color: #FFF;
            font-size: 2em;
            line-height: 80px;
            text-align: center
        }
    </style>
</head>

<body>
    <div id="form">
        <label>截止时间：</label><br>
        <input type="text" id="year">&nbsp;年
        <input type="text" id="mon">&nbsp;月
        <input type="text" id="day">&nbsp;日
        <br>
        <input type="text" id="hour">&nbsp;时
        <input type="text" id="min">&nbsp;分
        <input type="text" id="s">&nbsp;秒
        <button id="start">开始倒计时</button>
    </div>
    <div id="main">
        <span id="time"></span>
    </div>
    <script>
        document.getElementById("start").onclick = function() {
            var year = document.getElementById('year').value;
            var mon = document.getElementById('mon').value;
            var day = document.getElementById('day').value;
            var hour = document.getElementById('hour').value;
            var min = document.getElementById('min').value;
            var s = document.getElementById('s').value;
            countdown(year, mon, day, hour, min, s);

        };

        function countdown(year, mon, day, hour, min, s) {
            var nowDate = new Date();
            var endDate = new Date(year, mon - 1, day, hour, min, s);
            // 转换成和nowTime的格式相同(！注意：获取月是从0开始，因此写月份要减1)
            var t = Math.round((endDate - nowDate) / 1000);
            // console.log(t);
            var DAY = Math.round(t / (60 * 60 * 24));
            var HOUR = Math.round((t % (60 * 60 * 24)) / 3600);
            var MIN = Math.round((t % (60 * 60)) / 60);
            var SCD = Math.round(t % 60);
            if (t == 0) {
                alert("到点啦")
            } else {
                var str = format(DAY) + "天" + format(HOUR) + "时" + format(MIN) + "分" + format(SCD) + "秒";
                document.getElementById("time").innerText = str;
                setTimeout(function() {
                    countdown(year, mon, day, hour, min, s);
                }, 1000);
            }
        }
        //格式化时间
        function format(str) {
            if (String(str).length == 1) {
                return "0" + str;
            } else if (String(str).length == 2) {
                return str;
            }
        }
    </script>
</body>

</html>

这里写图片描述

huxiy1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现倒计时

1.设置剩余时间（时、分、秒）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;test&lt;/title&gt; &lt;style&gt; #main { width: 40%; min-width: 250px; ...
复制链接

扫一扫

专栏目录