使用JavaScript的setInterval函数实现网页倒计时功能
最近我在浏览国外的一些网站的时候，发现了一个使用 JavaScript 自带的 setInterval 函数实现的网页倒计时效果。这里我把相关代码整理翻译给大家。
setInterval 实现倒计时
要实现该功能，我们必须要学会 setInterval 函数的用法，下面简单的来介绍一下 setInterval 函数的用法。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setInterval 语法
setInterval(code,millisec[,”lang”]);
- code:该参数是必需的。要调用的函数或要执行的代码串。
- millisec:该参数是必需的。周期性执行或调用 code 之间的时间间隔，以毫秒计。
另外可以通过调用 Window.clearInterval() 函数取消该定时器。
理解了 setInterval 后，我们就来实现倒计时功能吧。
首先编写倒计时效果的 html 代码。
<div class=”container”>
<div class=”counter” id=”bday”></div>
</div>
再添加一下 CSS 代码，优化倒计时的渲染效果。
body {
background-color: #ffd54f;
font-family: -apple-system,
BlinkMacSystemFont,
“Segoe UI”,
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
“Helvetica Neue”,
sans-serif;
}
.counter {
color: #333;
font-size: 4em;
text-align: center;
}
.counter:before {
content: “my birthday is in”;
display: block;
font-size: 2rem;
}
最后在来看看倒计时功能的 js 核心代码。
let countDown = new Date(‘Sep 30, 2017 00:00:00’).getTime(),let countDown = new Date(‘Sep 30, 2017 00:00:00’).getTime(),x = setInterval(function () { let now = new Date().getTime(), distance = countDown – now, days = Math.floor(distance / (1000 * 60 * 60 * 24)), hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById(‘bday’).innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`; if (distance < 0) { clearInterval(x); document.getElementById(‘bday’).innerHTML = ‘IT\’S MY BIRTHDAY!’; }}, 1000);
最终的运行效果见文章开头的图片。也可以点这里进行代码修改，查看效果。
参考资料：
扫描下方二维码，关注业余草微信公众号，回复“FFmpeg”关键词，获取 FFmpeg 视频教程！
