Stopwatch Program

CSS

body{
display: flex;
flex-direction: column;
align-items: center;
background-color: hsl(0, 0%, 90%);
} 
 
#myH1{
font-size: 4rem;
font-family: "Arial", "sans-serif";
color: hsl(0, 0%, 25%);
}
 
#container{
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
border: 5px solid;
border-radius: 50px;
background-color: #fff;
}
 
#display{
font-size: 5rem;
font-family: monospace;
font-weight: bold;
color: hsl(0, 0%, 30%);
text-shadow: 2px 2px 2px #000;
margin-bottom: 25px;
}
 
#controls button{
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
margin: 5px;
min-width: 125px;
border-radius: 10px;
cursor: pointer;
color: #fff;
transition: all 0.5s ease;
}
 
#startBtn{
background-color: hsl(115, 100%, 40%);
}
#startBtn:hover{
background-color: hsl(115, 100%, 30%);
} 
 
#stopBtn{
background-color: hsl(10, 90%, 30%);
}
#stopBtn:hover{
background-color: hsl(10, 90%, 50%);
}
 
#resetBtn{
background-color: hsl(205, 90%, 40%);
}
#resetBtn:hover{
background-color: hsl(205, 90%, 30%);
}

HTML

<h1 id="myH1">StopWatch</h1>
	<div id="container">
	<div id="display">00:00:00:00</div>
	<div id="controls">
		<button id="startBtn" onclick="start()">Start</button>
		<button id="stopBtn" onclick="stop()">stop</button>
		<button id="resetBtn" onclick="reset()">reset</button>
	</div>
</div>

Js

// ======================== 元素 & 变量初始化 ========================
// 获取 HTML 中显示时间的元素，例如：<div id="display"></div>
const display = document.getElementById("display");
// 保存定时器 ID（用于 clearInterval）
let timer = null;
// 保存开始时间（单位：毫秒）
let startTime = 0;
// 保存已经经过的时间（单位：毫秒）
// 用于暂停后继续计时
let elapsedTime = 0;
// 记录秒表是否正在运行
let isRunning = false;
 
// ======================== 启动计时 ========================
function start() {
  // 只有当计时器当前未运行时才可以启动
  if (!isRunning) {
    // 记录启动的时间点
    // 若之前暂停过，就从暂停时间继续（减去 elapsedTime）
    startTime = Date.now() - elapsedTime;
    // 每隔 10 毫秒更新一次显示（即 1/100 秒精度）
    timer = setInterval(update, 10);
    // 标记当前状态为“正在运行”
    isRunning = true;
  }
}
 
// ======================== 暂停计时 ========================
function stop() {
  // 只有在运行状态下才能暂停
  if (isRunning) {
    // 清除定时器（停止调用 update()）
    clearInterval(timer);
    // 记录当前已用时间（用于恢复继续计时）
    elapsedTime = Date.now() - startTime;
    // 修改状态为“停止”
    isRunning = false;
  }
}
 
// ======================== 重置计时 ========================
function reset() {
  // 停止定时器，防止仍在运行
  clearInterval(timer);
  // 重置所有计时相关变量
  startTime = 0;
  elapsedTime = 0;
  isRunning = false;
  // 恢复显示为初始值
  display.textContent = "00:00:00:00";
}
 
// ======================== 更新时间显示 ========================
function update() {
  // 当前系统时间（毫秒）
  const currentTime = Date.now();
  // 计算从开始到现在经过的总时间（单位：毫秒）
  elapsedTime = currentTime - startTime;
  // 计算时、分、秒、毫秒（四个部分）
  let hours = Math.floor(elapsedTime / (1000 * 60 * 60));    
  let minutes = Math.floor((elapsedTime / (1000 * 60)) % 60);      
  let seconds = Math.floor((elapsedTime / 1000) % 60);             
  let milliseconds = Math.floor((elapsedTime % 1000) / 10);     
  // padStart(2, "0") 保证个位数前补“0”
  hours = String(hours).padStart(2, "0");
  minutes = String(minutes).padStart(2, "0");
  seconds = String(seconds).padStart(2, "0");
  milliseconds = String(milliseconds).padStart(2, "0");
  // 更新页面显示
  display.textContent = `${hours}:${minutes}:${seconds}:${milliseconds}`;
}