第209练最终效果：
实现代码：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>209练-秒表</titl></title><link rel=”stylesheet” href=”index.css”></head><body><div id=”timer”>00:00:00</div><div id=”buttons”><button id=”start”>开始</button><button id=”stop”>停止</button><button id=”reset”>重置</button></div><script src=”index.js”></script></body></html>
CSS:
body {background-color: #f0f0f0;font-family: “Poppins”, sans-serif;display: flex;flex-direction: column;justify-content: center;min-height: 100vh;overflow: hidden;align-items: center;}#timer {font-size: 7rem;font-weight: 700;text-shadow: 2px 2px #f8a5c2;color: #f92672;width: 600px;text-align: center;margin: 40px auto;}#buttons {display: flex;justify-content: center;}button {background-color: #f92672;color: white;border: none;font-size: 2rem;font-weight: bold;padding: 1.5rem 4rem;margin: 1rem;border-radius: 30px;cursor: pointer;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);transition: all 0.2s;}button:hover {background-color: #f44583;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);}button[disabled] {opacity: 0.5;cursor: default;}@media (max-width: 800px) {#timer {font-size: 4rem;width: 350px;}button {font-size: 1.5rem;padding: 1rem 2rem;}}
JS：
const timerEl = document.getElementById(“timer”);const startButtonEl = document.getElementById(“start”);const stopButtonEl = document.getElementById(“stop”);const resetButtonEl = document.getElementById(“reset”);let startTime = 0;let elapsedTime = 0;let timerInterval;function startTimer() {startTime = Date.now() – elapsedTime;timerInterval = setInterval(() => {elapsedTime = Date.now() – startTime;timerEl.textContent = formatTime(elapsedTime);}, 10);startButtonEl.disabled = true;stopButtonEl.disabled = false;}function formatTime(elapsedTime) {const milliseconds = Math.floor((elapsedTime % 1000) / 10);const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));const hours = Math.floor(elapsedTime / (1000 * 60 * 60));return ((hours ? (hours > 9 ? hours : “0” + hours) : “00”) +“:” +(minutes ? (minutes > 9 ? minutes : “0” + minutes) : “00”) +“:” +(seconds ? (seconds > 9 ? seconds : “0” + seconds) : “00”) +“.” +(milliseconds > 9 ? milliseconds : “0” + milliseconds));}function stopTimer() {clearInterval(timerInterval);startButtonEl.disabled = false;stopButtonEl.disabled = true;}function resetTimer() {clearInterval(timerInterval);elapsedTime = 0;timerEl.textContent = “00:00:00”;startButtonEl.disabled = false;stopButtonEl.disabled = true;}startButtonEl.addEventListener(“click”, startTimer);stopButtonEl.addEventListener(“click”, stopTimer);resetButtonEl.addEventListener(“click”, resetTimer);
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
