首页 > 代码库 > 倒计时的js实现

倒计时的js实现

2024-08-07 02:58:52   220人阅读

在有活动的业务中，我们经常会看到，页面中钟，给用户提示活动的开始和进行状态。

有数字显示的，有模拟石英钟的。莫衷一是，背后的逻辑是一致的，只是前台展示方式的区别。

下面就让我们实现一个数字显示的电子时钟。

分为显示天数和时分秒两种情况；我们在这里声明页面中用来显示时间的dom元素id为J_count, var domCount = document.getElementById(‘J_count‘);

距离活动开始还有X天

days

  • 获取进入页面时的时间点。即计时起点。

    因为用户机器的时钟相互之间多多少少会有差别。在对时间要求比较严格的应用场景中，推荐在页面打开的时候向服务端发出ajax或jsonp请求获取服务器端的时钟。这样不管用户终端机器的时间再怎么有差别，可以保证每个用户请求到和服务器的时钟是同步的(我们声明获得的服务器返回时间戳是serverNow,单位毫秒)。

    var now = new Date(Number(serverNow)) || new Date(), //Date object    nowTime = now.getTime(); //毫秒数

  • 计算初始天数差值(我们声明结束日期是endTime,单位毫秒)

    var deltaTime = endTime - nowTime,    deltaSenconds = deltaTime/1000,    deltaDays = Math.ceil(deltaSenconds/(60*60*24)); //天数，不足一天算一天domCount.innerHTML = ‘距离活动开始还有‘+ deltaDays +‘天‘; //重绘dom内容

  • 原子钟走表，并执行终点时刻的回调

    ver interval = setInterval(function(){ //以1秒为单位重复    deltaSeconds--; //嘀哒嘀    deltaDays = Math.ceil(deltaSenconds/(60*60*24));    domCount.innerHTML = ‘距离活动开始还有‘+ deltaDays +‘天‘; //重绘dom内容    if(!deltaDays){        clearInterval(interval);        location.reload(); //假设到点后我们的回调是刷新一下页面    }}, 1000);

完整的页面（HTML&JS）代码为：

```javascript<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>js实现倒计时</title></head><body><div class="J_count">距离活动开始还有0天</div><script>var count = function(serverNow){    var now = new Date(Number(serverNow)) || new Date(), //Date object        nowTime = now.getTime(), //毫秒数        domCount = document.getElementById(‘J_count‘),        deltaTime = endTime - nowTime,        deltaSenconds = deltaTime/1000,        deltaDays = 0;    ver interval = setInterval(function(){ //以1秒为单位重复        deltaSeconds--; //嘀哒嘀        deltaDays = Math.ceil(deltaSenconds/(60*60*24));        domCount.innerHTML = ‘距离活动开始还有‘+ deltaDays +‘天‘; //重绘dom内容        if(!deltaSenconds){            clearInterval(interval);            location.reload(); //假设到点后我们的回调是刷新一下页面        }    }, 1000);};$.ajax({    url: ‘‘,    dataTyoe: ‘jsonp‘,    .    .    .    success: function(r){        count(r.serverNow);    },    error: function(){        count();    }});</script></body></html>```

距离活动结束还有X时-X分-X秒

seconds

算法思路同上，唯一的区别就在于要计算的是时分秒三个变量

```javascriptvar interval = setInterval(function(){    var hours = Math.floor(deltaSenconds/(60*60)), //时        minutes = Math.floor((deltaSenconds - hours*60*60)/60), //分        seconds = deltaSenconds - hours*60*60 - minutes*60; //秒    deltaSenconds--;    if(hours < 10){        hours = ‘0‘ + hours;    }    if(minutes < 10){        minutes = ‘0‘ + minutes;    }    if(seconds < 10){        seconds = ‘0‘ + seconds;    }    $domCount.innerHTML = ‘距离活动结束还有‘+ hours +‘时-‘+ minutes +‘分-‘+ seconds +‘秒‘;    if(!deltaSenconds){        clearInterval(interval);        location.reload(); //假设到点后我们的回调是刷新一下页面    }},1000);```

完整的页面（HTML&JS）代码为：

```javascript<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>js实现倒计时</title></head><body><div class="J_count">距离活动开始还有0天</div><script>var count = function(serverNow){    var now = new Date(Number(serverNow)) || new Date(), //Date object        nowTime = now.getTime(), //毫秒数        domCount = document.getElementById(‘J_count‘),        deltaTime = endTime - nowTime,        deltaSenconds = deltaTime/1000;    var interval = setInterval(function(){        var hours = Math.floor(deltaSenconds/(60*60)), //时            minutes = Math.floor((deltaSenconds - hours*60*60)/60), //分            seconds = deltaSenconds - hours*60*60 - minutes*60; //秒        deltaSenconds--;        if(hours < 10){            hours = ‘0‘ + hours;        }        if(minutes < 10){            minutes = ‘0‘ + minutes;        }        if(seconds < 10){            seconds = ‘0‘ + seconds;        }        $domCount.innerHTML = ‘距离活动结束还有‘+ hours +‘时-‘+ minutes +‘分-‘+ seconds +‘秒‘;        if(!deltaSenconds){            clearInterval(interval);            location.reload(); //假设到点后我们的回调是刷新一下页面        }    },    1000);};$.ajax({    url: ‘‘,    dataTyoe: ‘jsonp‘,    .    .    .    success: function(r){        count(r.serverNow);    },    error: function(){        count();    }});</script></body></html>```

end

倒计时的js实现


联系
我们