JavaScript 实现数字倒计时的方法

在网页开发中，数字倒计时功能十分常见，比如限时抢购、活动倒计时等场景。而 JavaScript 作为强大的脚本语言，提供了多种实现数字倒计时的有效方法。

最常用的方法之一是使用 setInterval() 函数。该函数可以按照指定的时间间隔重复执行代码块。需要获取当前时间，并确定倒计时结束的目标时间。例如：

const endTime = new Date('2024-12-31T23:59:59').getTime();
function countdown() {
    const now = new Date().getTime();
    const distance = endTime - now;
    if (distance > 0) {
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        document.getElementById('countdown').innerHTML = days + '天 ' + hours + '小时 ' + minutes + '分钟 ' + seconds + '秒';
    } else {
        document.getElementById('countdown').innerHTML = '倒计时结束';
    }
}
setInterval(countdown, 1000);

上述代码先定义了目标时间 endTime，然后在 countdown 函数中，不断计算当前时间与目标时间的差值。如果差值大于 0，则将其换算成天、小时、分钟和秒，并显示在页面上；若差值小于等于 0，则显示“倒计时结束”。setInterval(countdown, 1000) 使得 countdown 函数每秒执行一次，实现了实时更新倒计时。

另一种方法是使用 requestAnimationFrame()。它是 HTML5 新增的方法，用于在下次重绘之前执行回调函数。与 setInterval() 不同，requestAnimationFrame() 会根据浏览器的刷新频率来调整执行时机，更加节能和流畅。示例代码如下：

const endTime = new Date('2024-12-31T23:59:59').getTime();
function countdown(timestamp) {
    const now = new Date().getTime();
    const distance = endTime - now;
    if (distance > 0) {
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        document.getElementById('countdown').innerHTML = days + '天 ' + hours + '小时 ' + minutes + '分钟 ' + seconds + '秒';
        requestAnimationFrame(countdown);
    } else {
        document.getElementById('countdown').innerHTML = '倒计时结束';
    }
}
requestAnimationFrame(countdown);

在这个示例中，requestAnimationFrame(countdown) 会递归调用 countdown 函数，实现倒计时效果。这种方式适用于对性能要求较高、需要流畅动画效果的倒计时场景。

通过 setInterval() 和 requestAnimationFrame() 这两种方法，开发者可以轻松地在 JavaScript 中实现数字倒计时功能，为网页增添更多交互性和吸引力。在实际应用中，可根据具体需求选择合适的方法。