倒计时的js实现

时间：2021-08-22 22:04:25
在有活动的业务中，我们经常会看到，页面中钟，给用户提示活动的开始和进行状态。

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

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

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

距离活动开始还有X天

倒计时的js实现

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

    因为用户机器的时钟相互之间多多少少会有差别。在对时间要求比较严格的应用场景中，推荐在页面打开的时候向服务端发出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秒

倒计时的js实现

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

```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

标签：

相关文章