提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript案例：倒计时

JavaScript案例 倒计时
2023-06-13 09:14:04 时间

案例分析

  1. 核心算法：输入的时间减去现在的时间就是剩余时间，即倒计时，但是不能拿时分秒去减，比如05分减去25分，结果是负数。
  2. 用时间戳来实现，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
  3. 把剩余时间的毫秒数转换为时分秒标准格式。

转换公式

d = parselnt(总秒数/60/60/24);//计算天数
h = parselnt(总秒数/60/60%24); //计算小时
m = parselnt(总秒数/60%60); //计算分数
s = parselnt(总秒数%60); //计算当前秒数

代码实现

    function countDown(time) {
        var nowTime = +new Date(); //返回的是当前时间总的毫秒数

        var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数

        var times = (inputTime - nowTime) / 1000; //time是剩余时间总的秒数
        var d = parseInt(times / 60 / 60 / 24); //计算天数
        var h = parseInt(times / 60 / 60 % 24); //计算小时
        var m = parseInt(times / 60 % 60); //计算分数
        var s = parseInt(times % 60); //计算当前秒数
        return d + '天' + h + '时' + m + '分' + s + '秒';
    }
    document.write(countDown('2022-4-10 24:00:00'));

固定时间倒计时

<!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>Document</title>
</head>

<body>
    <div id="timer" style="color:red"></div>
</body>
<script type="text/javascript">
    var oBox = document.getElementById('timer');
    var maxtime = 10 * 60;//这里修改剩余多少时间 10*60 意思为10分钟
    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "距离结束还有" + minutes + "分" + seconds + "秒";
            oBox.innerHTML = msg;
            if (maxtime == 5 * 60) alert("还剩5分钟");
            --maxtime;
        } else {
            clearInterval(timer);
            alert("时间到，结束!");
        }
    }
    timer = setInterval("CountDown()", 1000);
</script>

</html>

距离未来时间倒计时

<!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>Document</title>
    <script type="text/javascript">
        function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截⽌时间
            var str = "2022/6/1 00:00:00";
            var endDate = new Date(str);
            var end = endDate.getTime();
            //时间差
            var leftTime = end - now;
            //定义变量 d,h,m,s保存倒计时的时间
            var d, h, m, s;
            if (leftTime >= 0) {
                d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                m = Math.floor(leftTime / 1000 / 60 % 60);
                s = Math.floor(leftTime / 1000 % 60);
            }
            //将倒计时赋值到div中
            document.getElementById("_d").innerHTML = d + "天";
            document.getElementById("_h").innerHTML = h + "时";
            document.getElementById("_m").innerHTML = m + "分";
            document.getElementById("_s").innerHTML = s + "秒";
            //递归每秒调⽤countTime⽅法，显⽰动态时间效果
            setTimeout(countTime, 1000);
        }
    </script>
</head>

<body onload="countTime()">
    <div>
        <span id="_d">00</span>
        <span id="_h">00</span>
        <span id="_m">00</span>
        <span id="_s">00</span>
    </div>
</body>

</html>

jQuery倒计时组件

jquery.downCount.js组件

<!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>Document</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.staticfile.org/jquery.downCount/1.0.0/jquery.downCount.min.js"></script>
</head>

<body>
    <div class="time2">
        <span class="days">00</span>:<span class="hours">00</span>:<span class="minutes">00</span>:<span
            class="seconds">00</span>
    </div>
    <script class="source" type="text/javascript">
        $('.time2').downCount({
            date: '12/24/2022 12:00:00',
            offset: 8//时区东8区
        }, function () {
            alert('倒计时结束!');
        });
    </script>
</body>

</html>

利用定时器的倒计时

<!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>Document</title>
    <script type="text/javascript">
        function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截⽌时间
            var str = "2022/10/1 00:00:00";
            var endDate = new Date(str);
            var end = endDate.getTime();
            //时间差
            var leftTime = end - now;
            //定义变量 d,h,m,s保存倒计时的时间
            var d, h, m, s;
            if (leftTime >= 0) {
                d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                m = Math.floor(leftTime / 1000 / 60 % 60);
                s = Math.floor(leftTime / 1000 % 60);
            }
            //将倒计时赋值到div中
            document.getElementById("_d").innerHTML = d + "天";
            document.getElementById("_h").innerHTML = h + "时";
            document.getElementById("_m").innerHTML = m + "分";
            document.getElementById("_s").innerHTML = s + "秒";
            //递归每秒调⽤countTime⽅法，显⽰动态时间效果
            setTimeout(countTime, 1000);
        }
    </script>
</head>

<body onload="countTime()">
    <div>
        <span id="_d">00</span>
        <span id="_h">00</span>
        <span id="_m">00</span>
        <span id="_s">00</span>
    </div>
</body>

</html>

相关文章