资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

倒计时示例

创作时间:

作者:

@小白创作中心

倒计时示例

引用

来源

https://docs.pingcode.com/baike/2601484

在JavaScript开发中，计时器功能是实现各种延时操作和周期性任务的基础。本文将详细介绍如何使用setTimeout、setInterval、Date对象等方法来实现计时器功能，并通过具体代码示例展示其应用场景。

一、SETTIMEOUT 和 SETINTERVAL 方法

1、基本用法

setTimeout和setInterval是JavaScript中最常用的两个计时器函数。setTimeout用于在指定的时间后执行一次函数，而setInterval则用于每隔指定的时间重复执行某个函数。

setTimeout

function sayHello() {
    console.log("Hello, World!");
}
setTimeout(sayHello, 1000); // 1秒后执行sayHello函数

setInterval

function sayHello() {
    console.log("Hello, World!");
}
setInterval(sayHello, 1000); // 每隔1秒执行一次sayHello函数

2、清除计时器

使用clearTimeout和clearInterval可以停止计时器。

clearTimeout

let timer = setTimeout(sayHello, 1000);
clearTimeout(timer); // 在计时器触发前将其清除

clearInterval

let interval = setInterval(sayHello, 1000);
clearInterval(interval); // 停止间隔执行

3、使用场景

setTimeout适用于需要在某个时间点执行一次操作的场景。
setInterval适用于需要周期性执行某些操作的场景。

二、使用 DATE 对象

1、基本用法

Date对象可以用于精确测量时间间隔。通过获取两个时间点的毫秒数差值，可以计算出时间间隔。

let startTime = new Date().getTime();
// 模拟一个耗时操作
setTimeout(() => {
    let endTime = new Date().getTime();
    let timeDiff = endTime - startTime; // 时间差，单位为毫秒
    console.log(`耗时: ${timeDiff} 毫秒`);
}, 2000);

2、实现自定义计时器

通过Date对象和setInterval可以实现一个自定义的计时器。

function customTimer(duration, callback) {
    let start = new Date().getTime();
    let interval = setInterval(() => {
        let now = new Date().getTime();
        let elapsed = now - start;
        if (elapsed >= duration) {
            clearInterval(interval);
            callback();
        }
    }, 100);
}
customTimer(5000, () => {
    console.log("5秒后执行的回调函数");
});

三、使用 PROMISE 和 ASYNC/AWAIT

1、基本用法

通过Promise和async/await可以实现更加现代化和简洁的计时器。

使用 Promise

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
delay(1000).then(() => {
    console.log("1秒后执行的代码");
});

使用 async/await

async function asyncDelay(ms) {
    await delay(ms);
    console.log("1秒后执行的代码");
}
asyncDelay(1000);

2、实现自定义计时器

结合Promise和async/await实现一个更灵活的计时器。

function customDelay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function startCustomTimer(duration) {
    console.log("计时器开始");
    await customDelay(duration);
    console.log("计时器结束");
}
startCustomTimer(5000);

四、结合 DOM 操作实现计时器

1、创建简单的倒计时

通过 DOM 操作和计时器函数，可以实现一个简单的倒计时功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时示例</title>
</head>
<body>
    <div id="timer">10</div>
    <script>
        let countdown = 10;
        let timerElement = document.getElementById('timer');
        function updateTimer() {
            countdown--;
            timerElement.textContent = countdown;
            if (countdown === 0) {
                clearInterval(interval);
                alert("倒计时结束");
            }
        }
        let interval = setInterval(updateTimer, 1000);
    </script>
</body>
</html>

2、创建复杂的计时器

可以结合Date对象和 DOM 操作实现一个更复杂的计时器，例如一个可以暂停和重置的计时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂计时器示例</title>
</head>
<body>
    <div id="display">00:00:00</div>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <button id="reset">重置</button>
    <script>
        let startTime, interval, elapsedTime = 0;
        let displayElement = document.getElementById('display');
        function formatTime(ms) {
            let totalSeconds = Math.floor(ms / 1000);
            let hours = Math.floor(totalSeconds / 3600);
            let minutes = Math.floor((totalSeconds % 3600) / 60);
            let seconds = totalSeconds % 60;
            return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }
        function updateDisplay() {
            let now = new Date().getTime();
            let diff = now - startTime + elapsedTime;
            displayElement.textContent = formatTime(diff);
        }
        document.getElementById('start').addEventListener('click', () => {
            if (!interval) {
                startTime = new Date().getTime();
                interval = setInterval(updateDisplay, 1000);
            }
        });
        document.getElementById('pause').addEventListener('click', () => {
            if (interval) {
                clearInterval(interval);
                interval = null;
                elapsedTime += new Date().getTime() - startTime;
            }
        });
        document.getElementById('reset').addEventListener('click', () => {
            clearInterval(interval);
            interval = null;
            elapsedTime = 0;
            displayElement.textContent = "00:00:00";
        });
    </script>
</body>
</html>