js实现计时功能
使用 setInterval 实现计时功能
通过 setInterval 可以创建一个周期性执行的计时器，适合需要持续更新的计时场景。
let seconds = 0;
const timerElement = document.getElementById('timer');
const timer = setInterval(() => {
seconds++;
timerElement.textContent = `已运行: ${seconds} 秒`;
}, 1000);
// 停止计时
// clearInterval(timer);使用 setTimeout 递归实现计时功能
递归调用 setTimeout 可以避免 setInterval 的潜在误差累积问题。
let seconds = 0;
const timerElement = document.getElementById('timer');
function updateTimer() {
seconds++;
timerElement.textContent = `已运行: ${seconds} 秒`;
setTimeout(updateTimer, 1000);
}
updateTimer();使用 Date 对象实现高精度计时
通过 Date 对象记录开始时间，计算时间差实现高精度计时。
const startTime = new Date();
const timerElement = document.getElementById('timer');
setInterval(() => {
const elapsed = Math.floor((new Date() - startTime) / 1000);
timerElement.textContent = `已运行: ${elapsed} 秒`;
}, 1000);实现暂停/继续功能
扩展基础计时器，添加暂停和继续功能。
let seconds = 0;
let isPaused = false;
let timer;
const timerElement = document.getElementById('timer');
function startTimer() {
timer = setInterval(() => {
if (!isPaused) {
seconds++;
timerElement.textContent = `已运行: ${seconds} 秒`;
}
}, 1000);
}
function togglePause() {
isPaused = !isPaused;
}
startTimer();格式化时间显示
将秒数格式化为更易读的 HH:MM:SS 形式。
function formatTime(seconds) {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
}
// 使用示例
timerElement.textContent = formatTime(seconds);使用 Web Worker 实现后台计时
避免主线程阻塞，使用 Web Worker 实现精确的后台计时。
// worker.js
let seconds = 0;
setInterval(() => {
seconds++;
postMessage(seconds);
}, 1000);
// 主线程
const worker = new Worker('worker.js');
worker.onmessage = (e) => {
document.getElementById('timer').textContent = `已运行: ${e.data} 秒`;
};使用 requestAnimationFrame 实现动画计时
适合需要与屏幕刷新率同步的动画计时场景。
let startTime;
const timerElement = document.getElementById('timer');
function updateTimer(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = Math.floor((timestamp - startTime) / 1000);
timerElement.textContent = `已运行: ${elapsed} 秒`;
requestAnimationFrame(updateTimer);
}
requestAnimationFrame(updateTimer);使用 performance.now() 实现高精度计时
比 Date 对象精度更高，适合需要微秒级精度的场景。
const startTime = performance.now();
const timerElement = document.getElementById('timer');
setInterval(() => {
const elapsed = Math.floor((performance.now() - startTime) / 1000);
timerElement.textContent = `已运行: ${elapsed} 秒`;
}, 1000);实现倒计时功能
修改计时逻辑实现倒计时功能。
let countdown = 60; // 60秒倒计时
const timerElement = document.getElementById('timer');
const timer = setInterval(() => {
countdown--;
timerElement.textContent = `剩余时间: ${countdown} 秒`;
if (countdown <= 0) clearInterval(timer);
}, 1000);
