怎么用js做一个倒计时

用JavaScript做一个倒计时的方法

实现倒计时的核心步骤包括：创建HTML结构、编写JavaScript逻辑、更新页面显示。创建一个HTML容器、使用JavaScript的setInterval函数进行定时更新、格式化时间显示是关键步骤。

一、创建HTML容器

首先，我们需要为倒计时创建一个HTML结构，通常包含一个显示倒计时的容器，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Countdown Timer</title>
</head>
<body>
    <div id="countdown"></div>
    <script src="countdown.js"></script>
</body>
</html>

二、使用JavaScript的`setInterval`函数进行定时更新

setInterval函数用于每隔一段时间重复执行一个函数。我们可以利用它来每秒更新一次倒计时。以下是基本的JavaScript代码：

const countdownElement = document.getElementById('countdown');
const targetDate = new Date('Dec 31, 2023 23:59:59').getTime();
const countdown = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetDate - now;
    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);
    countdownElement.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
    if (distance < 0) {
        clearInterval(countdown);
        countdownElement.innerHTML = 'EXPIRED';
    }
}, 1000);

三、格式化时间显示

为了让倒计时显示更友好，我们可以对时间进行格式化处理，如将时间补零等。以下是详细代码：

function padZero(number) {
    return number < 10 ? '0' + number : number;
}
const countdownElement = document.getElementById('countdown');
const targetDate = new Date('Dec 31, 2023 23:59:59').getTime();
const countdown = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetDate - now;
    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);
    countdownElement.innerHTML = `${padZero(days)}d ${padZero(hours)}h ${padZero(minutes)}m ${padZero(seconds)}s`;
    if (distance < 0) {
        clearInterval(countdown);
        countdownElement.innerHTML = 'EXPIRED';
    }
}, 1000);

四、进一步优化和增强功能

1、增加暂停和重置功能

为了使倒计时更加实用，可以添加暂停和重置按钮，以下是实现代码：

<!DOCTYPE html>
<html>
<head>
    <title>Countdown Timer</title>
    <style>
        #countdown { font-size: 2em; }
        button { margin: 5px; }
    </style>
</head>
<body>
    <div id="countdown"></div>
    <button id="pauseButton">Pause</button>
    <button id="resetButton">Reset</button>
    <script>
        let countdown;
        let isPaused = false;
        const countdownElement = document.getElementById('countdown');
        const pauseButton = document.getElementById('pauseButton');
        const resetButton = document.getElementById('resetButton');
        const initialTargetDate = new Date('Dec 31, 2023 23:59:59').getTime();
        let targetDate = initialTargetDate;
        function padZero(number) {
            return number < 10 ? '0' + number : number;
        }
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = targetDate - now;
            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);
            countdownElement.innerHTML = `${padZero(days)}d ${padZero(hours)}h ${padZero(minutes)}m ${padZero(seconds)}s`;
            if (distance < 0) {
                clearInterval(countdown);
                countdownElement.innerHTML = 'EXPIRED';
            }
        }
        function startCountdown() {
            countdown = setInterval(() => {
                if (!isPaused) {
                    updateCountdown();
                }
            }, 1000);
        }
        pauseButton.addEventListener('click', () => {
            isPaused = !isPaused;
            pauseButton.innerText = isPaused ? 'Resume' : 'Pause';
        });
        resetButton.addEventListener('click', () => {
            clearInterval(countdown);
            targetDate = initialTargetDate;
            isPaused = false;
            pauseButton.innerText = 'Pause';
            startCountdown();
        });
        startCountdown();
    </script>
</body>
</html>

2、存储倒计时状态

为了使倒计时在页面刷新后继续，我们可以使用浏览器的本地存储（localStorage）来保存倒计时状态：

const countdownElement = document.getElementById('countdown');
const pauseButton = document.getElementById('pauseButton');
const resetButton = document.getElementById('resetButton');
let countdown;
let isPaused = false;
let targetDate = localStorage.getItem('targetDate') ? parseInt(localStorage.getItem('targetDate')) : new Date('Dec 31, 2023 23:59:59').getTime();
function padZero(number) {
    return number < 10 ? '0' + number : number;
}
function updateCountdown() {
    const now = new Date().getTime();
    const distance = targetDate - now;
    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);
    countdownElement.innerHTML = `${padZero(days)}d ${padZero(hours)}h ${padZero(minutes)}m ${padZero(seconds)}s`;
    if (distance < 0) {
        clearInterval(countdown);
        countdownElement.innerHTML = 'EXPIRED';
    }
}
function startCountdown() {
    countdown = setInterval(() => {
        if (!isPaused) {
            updateCountdown();
        }
    }, 1000);
}
pauseButton.addEventListener('click', () => {
    isPaused = !isPaused;
    pauseButton.innerText = isPaused ? 'Resume' : 'Pause';
});
resetButton.addEventListener('click', () => {
    clearInterval(countdown);
    targetDate = new Date('Dec 31, 2023 23:59:59').getTime();
    localStorage.setItem('targetDate', targetDate);
    isPaused = false;
    pauseButton.innerText = 'Pause';
    startCountdown();
});
window.addEventListener('beforeunload', () => {
    localStorage.setItem('targetDate', targetDate);
});
startCountdown();

五、总结

通过以上步骤，我们实现了一个功能齐全的倒计时，并且使用了JavaScript的setInterval函数来定时更新倒计时显示，利用HTML和CSS来美化界面，还添加了暂停和重置功能，并使用本地存储保存倒计时状态。掌握这些技术可以帮助我们在开发中实现更多互动和实用的功能。