js倒计时的实现

Posted 2020-08-22 hopeelephant

　　下面简单介绍三种不同的倒计时方法。

　　先来看一种使用的getTime()方法，。这个时间指的是从1970年午夜到现在的时间，。好了知道了这个，就好办了，。

　　来看看代码

<script>
        function fresh(){
            var over = "2016/12/11,20:00:00";
            var endtime = new Date(over);
            var nowtime = new Date();
            var leftsecond = parseInt((endtime.getTime()-nowtime.getTime())/1000);
            var day = parseInt(leftsecond/3600/24);
            var h =parseInt((leftsecond/3600)%24);
            console.log(h);
            var m =parseInt((leftsecond/60)%60);
            var s =parseInt(leftsecond%60);
            var hour = day*24+h;
            $("p").text(hour+":"+m+":"+s);
            if(leftsecond<=0){
                td="00";
                m="00";
                s="00";
                clearInterval(t);
            }
        }
        fresh();
        var t =setInterval(fresh,1000);
    </script>

　　首先设置一个函数，最后调用，调用之后再设一个定时器，为什么要调用，是因为你不调用的话就是一秒钟之后再执行，另外函数里面应该写什么呢，我们一一来看，首先我们得设一个结束时间，。var d = "2016/12/11,20:00:00";，接着我们将这个结束函数放在var endtime = new Date(d);

接着我们再来设置一个当前时间var nowtime = new Date();用结束时间减去当前时间，就是倒计时的时间，

var leftsecond = parseInt((endtime.getTime()-nowtime.getTime())/1000);从1970年午夜到我设置的时间-当前的时间得到的毫秒数，除以1000，最后的

结果就是剩余的秒数，。

var day = parseInt(leftsecond/3600/24);   获取天数；
var h =parseInt((leftsecond/3600)%24);　获取小时数，　
var m =parseInt((leftsecond/60)%60);    获取分钟数，
var s =parseInt(leftsecond%60);　　获取秒数

　　这里灵活的运用了%取莫的方法，简单的来说，如果你除出来的结果是天数的话，那么取莫的结果就是小时数，如果你除出来的结果是小时的话，那么取莫的结果就是分钟数，如果你除出来的结果是分钟的话，那么取莫的结果就是秒数。

var hour = day*24+h; 这是最后的小时数，用得到的天数*24在加上剩余的小时数，就是总小时数，

$("p").text(hour+":"+m+":"+s);最后将得到的结果放到P元素里面。

if(leftsecond<=0){
td="00";
m="00";
s="00";
clearInterval(t);
}

我们再来做一下判断，。

最后调用函数和定时。

fresh();
var t =setInterval(fresh,1000);

 

再来看看第二种方法

<script>
        function fresh(){
        var date = new Date();    
        var endH = 23;
        var endM = 27;
        var endS = 26;
        var h =date.getHours();
        var m =date.getMinutes();
        var s =date.getSeconds();
        var left = (23*3600+27*60+30)-(h*3600+m*60+s);
        var hh = Math.floor(left/3600);
        var mm = Math.floor(left%3600/60);
        var ss =left%3600%60;
        $("p").text(hh+":"+mm+":"+ss);
        if(left<=0){
            hh="0"+"0";
            mm="0"+"0";
            ss="0"+"0";
            clearInterval(t);
            $("span").text("我爱你")
        }
    }
    fresh()
    var t =setInterval(fresh,1000);
    </script>

　　这个的基本思路就是先获得我们最后结束的时间，算出总秒数，减去当前时间得总秒数，最后求出剩余倒计时的总秒数，。最后也还是用取莫的方法得到结果，

　思路和上面是差不多的。

 

 

再来看看第三种方法

<script>
        var hour=14;
        var minute=36;
        var second =50;
        var showHour,showMinute,showSecond;
        function fresh(){
            var date = new Date();
            var nowHour = date.getHours();
            var nowMinute = date.getMinutes();
            var nowSecond = date.getSeconds();
            showHour = hour-nowHour;
            if(minute<nowMinute){
                showHour-=1;
                showMinute=minute+60-showMinute;
            }else{
                showMinute=minute-nowMinute;
            }
            if(second<nowSecond){
                showMinute-=1;
                showSecond +=second+60-showMinute;
            }else{
                showSecond=second-nowSecond;
            }
            if(showHour<10){
                showHour = "0"+showHour;
            }
            if(showMinute<10){
                showMinute = "0"+showMinute;
            }
            if(showSecond<10){
                showSecond = "0"+showSecond;
            }
            $("input").val(showHour+":"+showMinute+":"+showSecond);
            if(showHour==0 && showMinute==0 && showSecond==0)
                clearInterval(t);
        }
        fresh();
        var t =setInterval(fresh,1000);
    </script>

　　这种思路需要注意是，我们先来做一个判断，

　　

　　　　　　if(minute<nowMinute){
                showHour-=1;
                showMinute=minute+60-nowMinute;
            }else{
                showMinute=minute-nowMinute;
            }
            if(second<nowSecond){
                showMinute-=1;
                showSecond +=second+60-showSecond;
            }else{
                showSecond=second-nowSecond;
            }

　思路就是当设置的分钟数小于当前的分钟数的时候,显示的小时数减1,显示的分钟数就是设置的分钟数加上60-当前的分钟数，。如果设置的秒数小于当前的秒数的话,那么显示的分钟数就
自减1，而显示出来的秒数就是设置的秒数-当前的秒数，。这就是基本的思路