使用JavaScript的setInterval函数实现网页倒计时功能

分类: HTML5 发布时间: 2017-07-12 15:22

最近我在浏览国外的一些网站的时候,发现了一个使用 JavaScript 自带的 setInterval 函数实现的网页倒计时效果。这里我把相关代码整理翻译给大家。

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);

最终的运行效果见文章开头的图片。也可以点这里进行代码修改,查看效果。

参考资料:


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!