一聚教程网:一个值得你收藏的教程网站

热门教程

js要实现倒计时有哪些关键代码

时间:2022-06-29 01:36:01 编辑:袖梨 来源:一聚教程网

我们经常会在一些电商网站上看到秒杀倒计时,双11倒计时.其实倒计时的效果实现起来也是很简单的,并不复杂.

首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了几个步骤:

1.获取当前的时间,并且定义结束的时间

2.用求未来时间和当前时间的时间差,并且求出时分秒

3.设置定时器,让时间每秒递减

 代码如下复制代码

vardiv = document.getElementsByTagName("div")[0];

      vartimer = setInterval(timers, 1000);

  

      functiontimers() {

        //获取现在的时间

        varnow =newDate();

        //获取你想要的未来时间

        varfuture =newDate("2017/05/10");

        vartime = future.getTime() - now.getTime();

        //获取距离的天数

        varday = parseInt(time / 24 / 60 / 60 / 1000);

        //获取距离的小时

        varhour = parseInt(time / 1000 / 60 / 60 % 24);

        //获取分

        varminute = parseInt(time / 1000 / 60 % 60);

        //获取秒

        varsec = parseInt(time / 1000 % 60);

        if(time < 0) {

          div.innerHTML ="距离苹果发布会还有00天00小时00分00秒000毫秒";

          clearInterval(timer);

          return;

        }

        //注意点:当时间小于10的时候,要在前面补0

        div.innerHTML ="距离结束时间还有"+ (day < 10 ? ("0"+ day) : day) +"天"+ (hour < 10 ? ("0"+ hour) : hour) +"小时"+ (minute < 10 ? ("0"+ minute) : minute) +"分"+ (sec < 10 ? ("0"+ sec) : sec) +"秒";

      }

以上就是本文的全部内容,希望对大家的学习有所帮助。

热门栏目