js中倒计时实现

原创 2018年04月15日 16:25:35

项目中获取验证码需要进行倒计时。
这里使用的是JavaScript Date 对象。
Date 对象用于处理日期和时间。

相关函数的使用说明可以参考在这里

代码实例

当获取验证码的按键按下时进行处理。

$(function(){
    $("#getPhoneNumValidateBtn").click(function(){
        console.log("time display" );
        endTime =  new Date().getTime() + 60 * 1000;
        showCountdownTime();
        return false;
    });
});
function showCountdownTime(){
    var startTime = new Date().getTime();

    var timeDiff =  endTime - startTime;//ms
    var countDownTime =  Math.floor(timeDiff/1000 + 0.5 );
    console.log("" + countDownTime + "秒后重新获取验证码");

    setTimeout("showCountdownTime()",1000);
}

说明

endTime =  new Date().getTime() + 60 * 1000;

getTime()函数是返回 1970 年 1 月 1 日至今的毫秒数。
因为设定的是60s的倒计时。因此又加了(60x1000)ms 的时间。

showCountdownTime用于处理倒计时。

var timeDiff =  endTime - startTime;//ms

这个是获取截止时间与当前时间的时间差。

var countDownTime =  Math.floor(timeDiff/1000 + 0.5 );

countDownTime为倒计时时间(s),使用 Math.floor()进行取整。
这里需要注意的地方是floor()函数处于向下取整,因此需要在计算结果上加上0.5再进行取整运算。

Math.floor(11.9)  结果为 11 
Math.floor(11.2)  结果也为 11 

使用setTimeout进行定时操作。
这里设定1000ms后调用函数showCountdownTime()

setTimeout("showCountdownTime()",1000);
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011676300/article/details/79950339

JS倒计时原理及实现

原理倒计时 = 现在的时间点(new Date())/终点(new Date(/这里填终点时间/)); 最后将差值转换为想要的格式。 使用setInterval(fn, 1000);每一秒执行一次...
  • gladys_1111
  • gladys_1111
  • 2017年11月21日 20:28
  • 289

js 倒计时写法(三种:倒计时发送,倒计时时间,倒计时可用)

html> lang="en"> charset="UTF-8"> 倒计时 class="title_1"> id...
  • Easet
  • Easet
  • 2016年12月13日 16:38
  • 3536

使用js写一个倒计时

一个用js写的倒计时的方法
  • u014639561
  • u014639561
  • 2015年02月26日 15:45
  • 1666

JS-实现商品倒计时

@if (item.Type == 1) { TimeSpan span = i...
  • qq_26101151
  • qq_26101151
  • 2016年11月18日 18:04
  • 724

用原生js实现距离今年年底倒计时效果

// 设置倒计时效果 // var time=new Date(); // 创建当前时间 window.onload=function(){   function djs(){   var ...
  • Merlin2017
  • Merlin2017
  • 2017年04月19日 19:59
  • 539

js实现倒计时60秒的简单代码

<!DOCTYPE html> <html lang="en"> <head> &...
  • qq_36279445
  • qq_36279445
  • 2017年08月24日 13:58
  • 1364

js实现考试时间倒计时

                                             
  • ABCJIECBA
  • ABCJIECBA
  • 2011年03月21日 13:30
  • 4254

JS实现倒计时动画效果

js通过Date对象实现倒计时效果
  • Qimingweikun
  • Qimingweikun
  • 2017年10月27日 00:02
  • 228

js中利用setInterval实现简单的倒计时

以下代码实现在中插入一个10秒倒计时           var num=10;                                                        ...
  • bear06
  • bear06
  • 2016年11月17日 14:09
  • 1356

JS实现倒计时(天数,时,分,秒)

JS实现倒计时(天数,时,分,秒) function leftTimer(year,month,day,hour,minute,second){ var leftTime = (new ...
  • csdn9_14
  • csdn9_14
  • 2016年11月07日 13:57
  • 1875
收藏助手
不良信息举报
您举报文章:js中倒计时实现
举报原因:
原因补充:

(最多只允许输入30个字)