js实现分钟计时
使用JavaScript实现分钟计时
方法一：使用setInterval实现基础计时器
let minutes = 0;
const timerElement = document.getElementById('timer');
const timer = setInterval(() => {
minutes++;
timerElement.textContent = `${minutes} 分钟`;
}, 60000);停止计时器：
clearInterval(timer);方法二：使用Date对象实现精确计时
let startTime = new Date();
const timerElement = document.getElementById('timer');
function updateTimer() {
const currentTime = new Date();
const elapsedMilliseconds = currentTime - startTime;
const elapsedMinutes = Math.floor(elapsedMilliseconds / 60000);
timerElement.textContent = `${elapsedMinutes} 分钟`;
}
const timer = setInterval(updateTimer, 1000);方法三：使用requestAnimationFrame实现高性能计时
let startTime = performance.now();
const timerElement = document.getElementById('timer');
function updateTimer(timestamp) {
const elapsedMilliseconds = timestamp - startTime;
const elapsedMinutes = Math.floor(elapsedMilliseconds / 60000);
timerElement.textContent = `${elapsedMinutes} 分钟`;
requestAnimationFrame(updateTimer);
}
requestAnimationFrame(updateTimer);方法四：面向对象实现计时器类
class MinuteTimer {
constructor() {
this.minutes = 0;
this.timer = null;
}
start(callback) {
this.timer = setInterval(() => {
this.minutes++;
callback(this.minutes);
}, 60000);
}
stop() {
clearInterval(this.timer);
}
}
// 使用示例
const myTimer = new MinuteTimer();
myTimer.start((minutes) => {
document.getElementById('timer').textContent = `${minutes} 分钟`;
});方法五：使用async/await实现计时器
async function startTimer(durationInMinutes) {
for (let i = 1; i <= durationInMinutes; i++) {
await new Promise(resolve => setTimeout(resolve, 60000));
document.getElementById('timer').textContent = `${i} 分钟`;
}
}
startTimer(60); // 计时60分钟注意事项
- 浏览器标签处于非活动状态时，setInterval和setTimeout可能会被节流
- 长时间运行的计时器应考虑使用Web Worker避免主线程阻塞
- 对于需要暂停/恢复功能的计时器，需要额外记录已过去的时间
