js倒计时

最新推荐文章于 2024-10-01 20:12:28 发布

whisperE

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量82

点赞数

文章标签： javascript 开发语言 ecmascript 前端 html

本文链接：https://blog.csdn.net/whisperE/article/details/121046911

版权

这里说一下，下面写的倒计时其实并不一定要创建一个日期格式对象，这里用到这个是因为最近学了Date的一些函数，其实创建一个字符串就可以了，就像倒计时App中那样填写时分秒即可。

<!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>
    倒计时
    <span>0</span>
    <span>0</span>:
    <span>0</span>
    <span>0</span>:
    <span>0</span>
    <span>0</span>
</body>

</html>
<script>
    var oSpan = document.getElementsByTagName("span");
    //创建指定日期对象,其实这里也可写一个字符串,获取字符串中的每两位赋值给下面的_h/_m/_s即可
    var date = new Date("2021-10-28,0:1:2");
    //调用倒计时函数countdown(date)
    date = countdown(date);
    
    function countdown(date) {
        //获取时分秒的数值并调用toTwo(value)函数,
        //判断时分秒是否为两位数,如果是个位数就要在前面加一个字符串"0",
        //是为了符合时间的格式
        var _h = toTwo(date.getHours());
        var _m = toTwo(date.getMinutes());
        var _s = toTwo(date.getSeconds());
        //将时分秒的数值组成一个字符串,便于后续使用
        var str = _h + _m + _s;
        return str;
    }
    //判断是否为两位数
    function toTwo(value) {
        return value >= 10 ? value+"" : "0" + value;
    }
    //创建date1的原始值为空
    var date1 = "";
    //1秒循环一次的循环定时器setInterval,命名为time,
    //为能够关闭定时器而命名,也就是关闭定时器的钥匙
    var time = setInterval(function () {
        //如果data1有值,就将data1的值赋给data
        //这里是为了第一次循环时,不改变data值,能够直接使用data值
        if(date1!=""){
            date = date1;
        }
        //给每一个span中赋data每一位的值,也就是将data的值打印在浏览器页面中
        //如date = "191212",倒计时就是从19小时12分钟12秒开始,并显示在页面上
        for (var i = 0; i < date.length; i++) {
            oSpan[i].innerHTML = date[i];
        }
        //将date中的数值拆分分别赋值给时分秒
        var s = date[4]+date[5];
        var m = date[2]+date[3];
        var h = date[0]+date[1];
        //这里开始对静态数据做倒计时
        //如果秒数在1-59之间,就每一秒-1
        if(s>0&&s<60){
            s = s/1;
            s--;
        }else{  //秒数为0,或者秒数已经减为0时,开始判断分钟数
            //如果分钟数在1-59之间,就每60秒-1(每当秒数减为0时,m-1,也就是每分钟-1啦)
            if(m>0&&m<60){
                m = m/1;
                m--;
                //这时时钟的秒数已经为0啦,这里就要给秒再赋一个59的值,用来在下一分钟继续s--
                s=59;
            }else{  //如果小时数大于1,就要每60分钟减一
                if(h>1){
                    h = h/1;
                    h--;
                    //这时时钟的秒数和分钟数都已经为0啦,这里就要给秒和分钟再赋一个59的值,
                    //用来在下一分钟继续s--,在下一小时继续m--
                    m=59;
                    s=59;
                }else if(h=0){  //如果h=0,就说明倒计时已经在一个小时以内了,只剩下分钟和秒数还没有走完
                    if(m!=0&&s!=0){ //如果倒计时本身设置的时间就在一个小时以内,那么分钟数和秒数就用给定的数值即可
                        m = m;
                        s = s;
                    }else{//如果倒计时是从一个小时以上的时间由h--减到h = 0,那么分钟数和秒数就要从59开始减减啦
                        m=59;
                        s=59;
                    }
                }else{ //h<0时,分钟数和秒数也一定都小于0了,这是就关闭定时器,倒计时结束啦！
                    clearInterval(time);
                }
            }
        }
        //将数值转为数字类型
        s = s/1;
        m = m/1;
        h = h/1;
        //再次调用toTwo()函数,判断是否需要+"0"
        date1 = toTwo(h)+toTwo(m)+toTwo(s);
        // console.log(date);
    }, 1000)  
</script>

看到其他人的方法，是用一个未来的时间减掉new Date()获得一个时间戳，由于new Date()的数值是一直增加的，时间戳就会一直减小，用循环定时器来自动获取新的new Date()，直到new Date()达到了一开始创建的那个未来的时间，倒计时即结束。但我觉得这种方法更像是闹钟一点，跟倒计时的理念有一点偏差(srds 呈现的结果是一样的，那个方法代码量是真的少)。

今天不开心。

而且早上发现feiq里的群不见了，离谱得很。

希望下次看到这里我已经不记得自己为什么不开心了。

就这样吧。