首页 > setTimeout > 写出两种设置计时器的方法

写出两种设置计时器的方法

2026-02-21 18:21:37 setTimeout setInterval 8737次阅读
1. 简单版：setTimeout 对，就是这个问题。之前遇到过。你给函数和延时（毫秒）。 javascript setTimeout(function() { console.log('计时结束！'); }, 5000);
2. 高级版：setInterval 这是重复执行。就像定时闹钟。用函数和间隔时间（毫秒）。 javascript setInterval(function() { console.log('每5秒执行一次！'); }, 5000);
79 赞
第一种方法：使用HTML和JavaScript的setTimeout函数。
首先，我们需要一个HTML元素来显示计时器的当前时间。比如一个
标签：
00:00:00

然后，用JavaScript编写一个函数来更新这个元素的内容。这个函数会使用setTimeout来每隔一秒更新时间：
javascript function startTimer() { var now = new Date(); var seconds = ("0" + (now.getSeconds())).slice(-2); var minutes = ("0" + (now.getMinutes())).slice(-2); var hours = ("0" + (now.getHours())).slice(-2); document.getElementById("timer").textContent = hours + ":" + minutes + ":" + seconds; setTimeout(startTimer, 1000); }
startTimer();
第二种方法：使用HTML5的元素和JavaScript的setInterval函数。
HTML部分，我们创建一个进度条：

JavaScript部分，我们设置一个函数来更新进度条，这里我们用setInterval代替setTimeout，因为setInterval可以持续执行，直到被明确停止：
javascript function startTimerProgress() { var progress = document.getElementById("timerProgress"); var currentTime = 0; var interval = setInterval(function() { currentTime++; progress.value = currentTime; if (currentTime >= 3600) { clearInterval(interval); } }, 1000); }
startTimerProgress();
这两种方法都可以创建一个简单的计时器，第一种是基于时间的显示，第二种是基于进度条的显示。
146 赞

相关推荐

稠密

2026-02-21 18:21:50 推荐

荃

2026-02-21 18:21:45 推荐

local

2026-02-21 18:21:12 推荐