前端秒表计时器

最新推荐文章于 2024-10-15 13:45:00 发布

咦唔喻iuv

最新推荐文章于 2024-10-15 13:45:00 发布

阅读量836

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/weixin_72632154/article/details/138014167

版权

一、JS代码解释

<script>
    let timer = 0;  
let intervalId;  
const timerElement = document.getElementById('timer');  
const startButton = document.getElementById('startBtn');  
const pauseButton = document.getElementById('pauseBtn');  
const resetButton = document.getElementById('resetBtn');  
  
function formatTime(milliseconds) {  
  const seconds = Math.floor((milliseconds / 1000) % 60);  
  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);  
  const hours = Math.floor(milliseconds / (1000 * 60 * 60));  
    
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${(milliseconds % 1000).toString().padStart(3, '0')}`;  
}  
  
function startTimer() {  
  intervalId = setInterval(() => {  
    timer += 10; // 更新10毫秒，以提高精度  
    timerElement.textContent = formatTime(timer);  
  }, 10); // 间隔10毫秒，以提高精度  
    
  startButton.disabled = true;  
  pauseButton.disabled = false;  
}  
  
function pauseTimer() {  
  clearInterval(intervalId);  
    
  startButton.disabled = false;  
  pauseButton.disabled = true;  
}  
  
function resetTimer() {  
  clearInterval(intervalId);  
  timer = 0;  
  timerElement.textContent = formatTime(timer);  
    
  startButton.disabled = false;  
  pauseButton.disabled = true;  
}  
  
startButton.addEventListener('click', startTimer);  
pauseButton.addEventListener('click', pauseTimer);  
resetButton.addEventListener('click', resetTimer);
</script>

1.定义变量

timer: 用来存储计时器当前的时间（以毫秒为单位）。
intervalId: 存储setInterval的返回值，用于稍后清除定时器。
timerElement: 获取HTML中ID为timer的元素，用于显示计时器的时间。
startButton, pauseButton, resetButton: 分别获取开始、暂停和重置按钮的DOM元素。

2.`formatTime`函数

输入：毫秒数。
输出：格式化的时间字符串，格式为HH:MM:SS.sss，其中HH是小时，MM是分钟，SS是秒，sss是毫秒。
该函数首先计算出小时、分钟和秒数，然后使用padStart方法确保它们总是以两位数字显示。对于毫秒，它只取余数部分并格式化为三位数字。

3.`startTimer`函数

使用setInterval每10毫秒更新timer的值（增加10毫秒），从而模拟更精确的时间更新。
更新timerElement的文本内容为格式化后的时间。
禁用开始按钮并启用暂停按钮。

4.`pauseTimer`函数

使用clearInterval停止定时器。
启用开始按钮并禁用暂停按钮。

5.`resetTimer`函数

使用clearInterval停止任何正在运行的定时器。
将timer重置为0，并更新timerElement的文本内容为格式化后的时间（即00:00:00.000）。
启用开始按钮并禁用暂停按钮。

6.事件监视器

为开始按钮添加点击事件监听器，当点击时调用startTimer函数。
为暂停按钮添加点击事件监听器，当点击时调用pauseTimer函数。
为重置按钮添加点击事件监听器，当点击时调用resetTimer函数。

二、源代码

1.HTML

<!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 class="stopwatch">  
  <h1 id="timer">00:00:00</h1>  
  <button id="startBtn">开始</button>  
  <button id="pauseBtn" disabled>暂停</button>  
  <button id="resetBtn">重置</button>  
</div>  
<script src="script.js"></script>  
</body>  
</html>

2.CSS

<style>
    body {  
  font-family: Arial, sans-serif;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
  margin: 0;  
  background-color: #f0f0f0;  
}  
  
.stopwatch {  
  text-align: center;  
}  
  
button {  
  padding: 10px 20px;  
  margin: 10px;  
  font-size: 16px;  
  cursor: pointer;  
}  
  
button:disabled {  
  opacity: 0.5;  
  cursor: not-allowed;  
}
</style>

3.JS

<script>
    let timer = 0;  
let intervalId;  
const timerElement = document.getElementById('timer');  
const startButton = document.getElementById('startBtn');  
const pauseButton = document.getElementById('pauseBtn');  
const resetButton = document.getElementById('resetBtn');  
  
function formatTime(milliseconds) {  
  const seconds = Math.floor((milliseconds / 1000) % 60);  
  const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);  
  const hours = Math.floor(milliseconds / (1000 * 60 * 60));  
    
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${(milliseconds % 1000).toString().padStart(3, '0')}`;  
}  
  
function startTimer() {  
  intervalId = setInterval(() => {  
    timer += 10; // 更新10毫秒，以提高精度  
    timerElement.textContent = formatTime(timer);  
  }, 10); // 间隔10毫秒，以提高精度  
    
  startButton.disabled = true;  
  pauseButton.disabled = false;  
}  
  
function pauseTimer() {  
  clearInterval(intervalId);  
    
  startButton.disabled = false;  
  pauseButton.disabled = true;  
}  
  
function resetTimer() {  
  clearInterval(intervalId);  
  timer = 0;  
  timerElement.textContent = formatTime(timer);  
    
  startButton.disabled = false;  
  pauseButton.disabled = true;  
}  
  
startButton.addEventListener('click', startTimer);  
pauseButton.addEventListener('click', pauseTimer);  
resetButton.addEventListener('click', resetTimer);
</script>