js 倒计时10秒代码|极客笔记

js 倒计时10秒代码

在前端开发中，倒计时是一种常见的功能，特别在一些需要展示倒计时的应用场景下，如秒杀活动、限时抢购等。本文将介绍如何使用JavaScript实现一个简单的10秒倒计时。

实现思路

实现倒计时功能的关键点是每隔一秒更新剩余时间的显示，直到倒计时结束。我们可以通过setInterval定时器来实现每秒更新一次剩余时间，并在到达指定的时间后清除定时器。

代码实现

// 获取显示倒计时的元素
const countdownElement = document.getElementById('countdown');

// 设置初始倒计时时间为10秒
let timeLeft = 10;

// 更新倒计时显示的函数
function updateCountdown() {
    countdownElement.innerText = `倒计时：${timeLeft}秒`;
    timeLeft--;

    // 倒计时结束
    if (timeLeft < 0) {
        clearInterval(timer);
        countdownElement.innerText = "倒计时结束";
    }
}

// 每隔一秒更新倒计时
updateCountdown();
const timer = setInterval(updateCountdown, 1000);

在以上代码中，我们首先获取了一个用于显示倒计时的元素，并设置了初始倒计时时间为10秒。然后定义了一个updateCountdown函数，该函数在每次被调用时更新倒计时的显示并递减剩余时间，当时间到达0后清除定时器并显示倒计时结束的信息。最后使用setInterval定时器每隔一秒调用updateCountdown函数。