码迷,mamicode.com
首页 > Web开发 > 详细

js倒计时的实现

时间:2016-12-12 02:04:47      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:判断   interval   mat   date   获取   设置   pre   灵活   gettime   

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

  先来看一种使用的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,而显示出来的秒数就是设置的秒数-当前的秒数,。这就是基本的思路  

 

js倒计时的实现

标签:判断   interval   mat   date   获取   设置   pre   灵活   gettime   

原文地址:http://www.cnblogs.com/hopeelephant/p/6161124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!