zoukankan      html  css  js  c++  java
  • js倒计时的实现

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

      先来看一种使用的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,而显示出来的秒数就是设置的秒数-当前的秒数,。这就是基本的思路  
  • 相关阅读:
    11 2
    10 29
    10 22
    dp的本质
    笛卡尔树小结
    Gitlab 备份迁移恢复报错gtar: .: Cannot mkdir: No such file or directory
    升级Jenkins版本
    当linux中的所有指令突然不能使用的时候
    合并范围
    每股收益列报计算
  • 原文地址:https://www.cnblogs.com/hopeelephant/p/6161124.html
Copyright © 2011-2022 走看看