在有活动的业务中，我们经常会看到，页面中钟，给用户提示活动的开始和进行状态。
有数字显示的，有模拟石英钟的。莫衷一是，背后的逻辑是一致的，只是前台展示方式的区别。
下面就让我们实现一个数字显示的电子时钟。
分为显示天数和时分秒两种情况；我们在这里声明页面中用来显示时间的dom元素id为J_count, var domCount = document.getElementById(‘J_count‘);
距离活动开始还有X天
- 获取进入页面时的时间点。即计时起点。
因为用户机器的时钟相互之间多多少少会有差别。在对时间要求比较严格的应用场景中，推荐在页面打开的时候向服务端发出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秒
算法思路同上，唯一的区别就在于要计算的是时分秒三个变量
```javascript
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);
```
完整的页面（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
时间： 2024-10-11 17:08:00