JS使用setInterval实现倒计时功能
2021-12-01 本文已影响0人
微语博客
setInterval()是JS的一个全局函数，可以按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由于setInterval的循环特性，所以用于计算时间特别合适。
JS实现思路也特别简单：获取目标时间和当前时间 => 计算时间差 => 重复计算并渲染到页面
- 首先获取两个时间点：
var date = new Date('2022/1/1 00:00:00').getTime();//获取目标时间的时间戳
var now = new Date().getTmie();//当前时间戳
- 上面代码获取了两个时间点，下面计算一下时间差：
var second = Math.floor((date - now) / 1000);//时间差秒数
var day = Math.floor(second / 86400);//时间差天数
second = second % 86400;//除去天数剩下的秒数
var hour = Math.floor(second / 3600);//剩下秒数的小时数
second %= 3600;//除去小时数剩下的秒数
var minute = Math.floor(second / 60);//剩下秒数的分钟数
second %= 60;//除去分钟数剩下的秒数
- 上面计算完成后我们获取到了时间差的天数、小时、分钟和秒数，如果要年数可以自行计算，但是觉得没有太大必要。然后将上面封装成函数并重复1秒调用即可，先简单打印验证一下是否实现效果。
function getDate(){
var date = new Date('2022/1/1 00:00:00').getTime();//获取目标时间的时间戳
var now = new Date().getTmie();//当前时间戳
var second = Math.floor((date - now) / 1000);//时间差秒数
var day = Math.floor(second / 86400);//时间差天数
second = second % 86400;//除去天数剩下的秒数
var hour = Math.floor(second / 3600);//剩下秒数的小时数
second %= 3600;//除去小时数剩下的秒数
var minute = Math.floor(second / 60);//剩下秒数的分钟数
second %= 60;//除去分钟数剩下的秒数
console.log("还剩 "+day+" 天 "+hour+" 小时 "+minute+" 分钟 "+second+" 秒 ");
}
setInterval(getDate, 1000);//每秒调用上面的函数，控制台每秒输出
后面渲染的操作只需替换输出控制台的操作即可，这里也简单的实现一下，实现的方法也不止一种。
- 完整示例HTML代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>setInterval实现倒计时</title>
<style>
*{padding: 0;margin: 0;}
.container {
font-size: 60px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#datetime {
color: red;
}
.time {
color: black;
}
</style>
</head>
<body>
<div class="container">
<div>距离2022年还有</div>
<div id="datetime"></div>
</div>
<script>
var datetime = document.getElementById('datetime');
function fresh(n) {
return n >= 0 && n < 10 ? '0' + n : '' + n;
}
function getDate(){
var date = new Date('2022/1/1 00:00:00').getTime();//获取目标时间的时间戳
var now = new Date().getTime();//当前时间戳
var second = Math.floor((date - now) / 1000);//时间差秒数
var day = Math.floor(second / 86400);//时间差天数
second = second % 86400;//除去天数剩下的秒数
var hour = Math.floor(second / 3600);//剩下秒数的小时数
second %= 3600;//除去小时数剩下的秒数
var minute = Math.floor(second / 60);//剩下秒数的分钟数
second %= 60;//除去分钟数剩下的秒数
var str = fresh(day) + '<span class="time">天</span>' +
fresh(hour) + '<span class="time">小时</span>' +
fresh(minute) + '<span class="time">分钟</span>' +
fresh(second) + '<span class="time">秒</span>';
datetime.innerHTML = str;
}
setInterval(getDate, 1000);//每秒调用上面的函数
</script>
</body>
</html>
效果预览图：
2022倒计时
白驹过隙，转眼间已近岁末。时间在悄然流逝，年华在匆匆而过；时光无限荏苒，光阴不再重复，记忆永远成了昨天。
