JavaScript 数字倒计时

数字倒计时是Web开发中常见的一种功能，特别是在活动页面、电商促销页面等需要突出时间限制的场景中。”10秒抢购”,”1小时限时免费领取”等都是数字倒计时典型的应用场景，那么如何使用JavaScript 实现一个数字倒计时呢？这篇文章将会介绍一种使用JavaScript实现数字倒计时的方式，并提供代码示例。

基本思路

数字倒计时所要实现的功能是在一个指定的剩余时间内，每隔一秒更新一次剩余的时间，并将剩余时间更新到页面中。我们可以使用JavaScript中的setTimeout来实现每隔一秒刷新页面上的剩余时间。

function countDown(){
var nowTime = new Date().getTime(); //获取当前时间戳
var endTime = new Date("2020-12-31 23:59:59").getTime(); //获取结束时间戳
var remianTime = endTime - nowTime; //计算剩余时间
var days = Math.floor(remianTime / (1000 * 60 * 60 * 24)); //计算剩余天数
var hours = Math.floor((remianTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); //计算剩余小时数
var minutes = Math.floor((remianTime % (1000 * 60 * 60)) / (1000 * 60)); //计算剩余分钟数
var seconds = Math.floor((remianTime % (1000 * 60)) / 1000); //计算剩余秒数
//将剩余时间更新到页面中
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
//每隔一秒刷新剩余时间
setTimeout("countDown()", 1000);
}

HTML 结构

在页面中需要定义一个与JavaScript中的id相对应的HTML元素，并将剩余时间更新到相应的元素中。

<div id="countdown">
<span id="days"></span> 天
<span id="hours"></span> 小时
<span id="minutes"></span> 分钟
<span id="seconds"></span> 秒
</div>

完整代码

将以上两段代码组合起来，即可得到一个完整的数字倒计时的实现，如下所示：

<div id="countdown">
<span id="days"></span> 天
<span id="hours"></span> 小时
<span id="minutes"></span> 分钟
<span id="seconds"></span> 秒
</div>
<script type="text/javascript">
function countDown(){
var nowTime = new Date().getTime(); //获取当前时间戳
var endTime = new Date("2020-12-31 23:59:59").getTime(); //获取结束时间戳
var remianTime = endTime - nowTime; //计算剩余时间
var days = Math.floor(remianTime / (1000 * 60 * 60 * 24)); //计算剩余天数
var hours = Math.floor((remianTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); //计算剩余小时数
var minutes = Math.floor((remianTime % (1000 * 60 * 60)) / (1000 * 60)); //计算剩余分钟数
var seconds = Math.floor((remianTime % (1000 * 60)) / 1000); //计算剩余秒数
//将剩余时间更新到页面中
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
//每隔一秒刷新剩余时间
setTimeout("countDown()", 1000);
}
countDown(); //页面加载完后启动倒计时
</script>

总结

本文介绍了如何使用JavaScript实现一个数字倒计时的方法，并提供了相应的HTML和JavaScript代码示例。在实现数字倒计时的过程中，需要对剩余时间进行逐秒计算并将计算结果更新到页面中。