js简单的倒计时器~~⏰

1.效果图

2.html部分

3.逻辑部分

3.1获取当前时间,时间差
       //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var str = "2023/9/14 12:28:34";
        var endDate = new Date(str);
        var end = endDate.getTime();

        //时间差
        var leftTime = end - now;
3.2 d,h,m,s保存倒计时的时间
      //定义变量 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);
        } else {
            d = 0;
            h = 0;
            m = 0;
            s = 0
        }
3.3 小于0的时候补0
     // 定义 小于0补0 的方法zero
        function zero(num) {
            if (num < 10) {
                return "0" + num
            }
            return num
        }
3.4 赋值给div 渲染
        // 赋值到div中
        document.getElementById("_d").innerHTML = zero(d) + "天";
        document.getElementById("_h").innerHTML = zero(h) + "时";
        document.getElementById("_m").innerHTML = zero(m) + "分";
        document.getElementById("_s").innerHTML = zero(s) + "秒";
3.5 递归的方法调用countTime方法,显示顶替时间
   //递归每秒调用countTime方法,显示动态时间效果
        setTimeout(countTime, 1000);
3.6 完整代码
<html>
<head>
    <meta charset="UTF-8">
    <title>js简单时分秒倒计时</title>
</head>
<style>
    .box {
background: #17deb9;
        width: 350px;
        height: 60px;
        text-align: center;
        border-radius: 30px;
    }
</style>

<body onload="countTime()">
<div class="box">
    <!--    <button onclick="countTime()">点击</button>-->
    <br>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
</div>
</body>
<script type="text/javascript">
    function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var str = "2023/9/14 12:28:34";
        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);
        } else {
            d = 0;
            h = 0;
            m = 0;
            s = 0
        }
        //将倒计时赋值到div中(普通的写法)--1
        // document.getElementById("_d").innerHTML = d+"天";
        // document.getElementById("_h").innerHTML = h+"时";
        // document.getElementById("_m").innerHTML = m+"分";
        // document.getElementById("_s").innerHTML = s+"秒";
        // -------------------------
        //将倒计时赋值到div中(小于0,补0)--2
        // 定义 小于0补0 的方法zero
        function zero(num) {
            if (num < 10) {
                return "0" + num
            }
            return num
        }

        var setTimer = setInterval(function (){
            // 赋值到div中
            document.getElementById("_d").innerHTML = zero(d) + "天";
            document.getElementById("_h").innerHTML = zero(h) + "时";
            document.getElementById("_m").innerHTML = zero(m) + "分";
            document.getElementById("_s").innerHTML = zero(s) + "秒";
            // -------------------------------
            let box = document.querySelector('.box') //获取元素

            if (leftTime<=0) {
                box.style.background = 'red';
                // alert('事件到啦~秒杀!!!');
                console.log('0')
                clearInterval(setTimer)  //终止定时器

            }
        },1000)
        //递归每秒调用countTime方法,显示动态时间效果
        // setTimeout(countTime, 1000);
        // 倒计时 事件到了 弹出提醒


    }
</script>
</html>

3.7 最推荐的方法~~

var nowTime = +new Date();  //获取当前总毫秒数

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

times = (inputTime - nowTime) / 1000;  //剩余的总秒数

~~最后步骤是:将总剩余秒数转换成天时分秒

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        font-size: 22px;
        text-align: center;
    }
</style>

<body>
<p></p>
</body>
<script>
    //倒计时  主要得到用户输入的时间减掉当前总毫秒数
    //将times剩下总时间设置全局变量  方便倒计时函数可以调用
    var times = null;

    function countDown(time) {
        var nowTime = +new Date(); //获取当前总毫秒数
        var inputTime = +new Date(time); //用户输入的总毫秒数
        times = (inputTime - nowTime) ; //剩余的总秒数
        var d, h, m, s;
        if (times>0){
            //转换为天
            d = Math.floor(times / 1000 / 60 / 60 / 24);
            h = Math.floor(times / 1000 / 60 / 60 % 24);
            m = Math.floor(times / 1000 / 60 % 60);
            s = Math.floor(times / 1000 % 60);
            //设置成时钟格式 00:00:00 利用三元运算符
            h = h < 10 ? "0" + h : h
            //转换为分
            m = m < 10 ? "0" + m : m
            //转换成秒
            s = s < 10 ? "0" + s : s
            return d + "天 " + h + ":" + m + ":" + s;
        }else {
            return  "0天 " + '00' + ":" +'00' + ":" + '00';
        }
    }
    var p = document.querySelector("p"); //获取元素
    var timer = setInterval(function() {
        p.innerHTML = countDown('2023-09-14 16:22:50');  //用户输入
        if (times < 0) {
            console.log('00')
            clearInterval(timer)  //终止定时器
        }
    }, 1000);
</script>
</html>

 

posted @ 2023-09-14 12:40  Mahmud(مەھمۇد)  阅读(42)  评论(0编辑  收藏  举报