简单的倒计时开始/暂停/重置/进度条

最新推荐文章于 2024-03-01 16:15:09 发布

不吃包菜的

最新推荐文章于 2024-03-01 16:15:09 发布

阅读量767

点赞数

分类专栏：小工具文章标签： html 倒计时 js

本文链接：https://blog.csdn.net/weixin_41580949/article/details/107202577

版权

小工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个简单的倒计时页面,展示如下.可以直接下载使用
下载地址: https://download.csdn.net/download/weixin_41580949/12588196
但是由于CSDN限定了下载必须使用积分
可以考虑把下面的代码复制到文本后更改后缀名为HTML
虽然简单, 觉得好用记得给我点个赞
在这里插入图片描述

在这里插入图片描述

源码如下: 可以复制到txt文本后改后缀名为html即可

<html>
    <head>
        <meta charset="UTF-8">
        <title>倒计时</title>
    </head>
    <body>
        <div id="box" style="height: 100%;width: 100%;text-align: center;padding-top: 20%">
            <input id="day" type="text" value="0"/>天
            <input id="hour" type="text" value="0"/>时
            <input id="minute" type="text" value="0"/>分
            <input id="second" type="text" value="0"/>秒
            <div style="border: solid 1px black; width: 90%;margin: 20px 0;">
                <div id="progressBar" style="background-color: black;width: 0;height: 10px;"></div>
                <div id="progressTxt">0%</div>
            </div>
            <input type="submit" value="开始" onclick="start()"/>
            <input type="submit" value="暂停" onclick="pause()"/>
            <input type="submit" value="清理" onclick="clearAll()"/>
            <H1 id="show"></H1>
        </div>

        <style>
            input {
                width: 50px;
            }
        </style>
        <script>
            var timer = 0; //当前活跃的计时器ID
            var isPause = false; //是否暂停
            var rawTime = 0; //开始计算总时长

            function pause() {
                isPause =true;
                clearInterval(timer);
                timer = 0;
            };
            function start(){
                if (timer >= 1){
                    return;
                }
                var dayBox = document.getElementById('day');
                var hourBox = document.getElementById('hour');
                var minuteBox = document.getElementById('minute');
                var secondBox = document.getElementById('second');
                var progressBarBox = document.getElementById('progressBar');
                var progressTxtBox = document.getElementById('progressTxt');
                var showBox = document.getElementById('show');

                var time = 0;
                time += parseInt(dayBox.value*86400);
                time += parseInt(hourBox.value*3600);
                time += parseInt(minuteBox.value*60);
                time += parseInt(secondBox.value);
                if (!isPause){
                    rawTime = time;
                }
                isPause = false;
                timer = setInterval(function(){
                    if (isPause){
                        clearInterval(timer);
                        timer = 0;
                    }
                    if (--time < 0){
                        time = 0;
                    }
                    dayBox.value = parseInt(time/86400);
                    hourBox.value = parseInt(time/3600%24);
                    minuteBox.value = parseInt(time/60%60);
                    secondBox.value = parseInt(time%60);
                    progressBarBox.style.width = parseInt((1-time/rawTime)*100)+'%';
                    progressTxtBox.innerHTML = parseInt((1-time/rawTime)*100)+'%';
                    showBox.innerHTML = dayBox.value+'天'+hourBox.value+'时'+minuteBox.value+'分'+secondBox.value+'秒';

                    if(time <= 0){
                        document.getElementById('box').style.background = '#995257';
                        clearInterval(timer);
                        timer = 0;
                    }
                },1000);
            };


            function clearAll(){
                isPause = false;
                clearInterval(timer);
                timer = 0;
                document.getElementById('progressBar').style.width = '0%';
                document.getElementById('box').style.background = '#ffffff';
                document.getElementById('day').value = 0;
                document.getElementById('hour').value = 0;
                document.getElementById('minute').value = 0;
                document.getElementById('second').value = 0;
                document.getElementById('progressTxt').innerHTML = '0%';
                document.getElementById('show').innerHTML = '';
            };
        </script>
    </body>
</html>