倒计时的js实现

浏览数：40 / 时间：2015年06月09日

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

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

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

分为显示天数和时分秒两种情况；我们在这里声明页面中用来显示时间的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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

倒计时的js实现