js秒表计时器代码
这是一个基本的JavaScript秒表计时器代码。它包括开始，停止，重置和显示时间的功能。
javascript复制代码class Stopwatch { constructor() { this.seconds = 0; this.milliseconds = 0; this.interval = null; this.isRunning = false; this.element = document.querySelector('#stopwatch'); } start() { if (!this.isRunning) { this.isRunning = true; this.interval = setInterval(() => { this.milliseconds++; if (this.milliseconds / 1000 >= 1) { this.seconds++; this.milliseconds = 0; } this.displayTime(); }, 10); } } stop() { if (this.isRunning) { this.isRunning = false; clearInterval(this.interval); } } reset() { this.stop(); this.seconds = 0; this.milliseconds = 0; this.displayTime(); } displayTime() { const minutes = Math.floor(this.seconds / 60); const secs = this.seconds % 60; const ms = this.milliseconds < 10 ? '0' + this.milliseconds : this.milliseconds; this.element.textContent = `${minutes}:${secs.toString().padStart(2, '0')}:${ms}`; } } // 使用方法 const stopwatch = new Stopwatch(); document.querySelector('#start').addEventListener('click', () => stopwatch.start()); document.querySelector('#stop').addEventListener('click', () => stopwatch.stop()); document.querySelector('#reset').addEventListener('click', () => stopwatch.reset());
在这个代码中，我们创建了一个名为Stopwatch的类，该类具有开始、停止、重置和显示时间的方法。我们创建了一个Stopwatch的实例，并为开始、停止和重置按钮添加了事件监听器，以便在点击这些按钮时调用相应的方法。
注意，此代码假设你已经在HTML中创建了具有相应id的元素（例如，<div id="stopwatch"></div>，<button id="start">Start</button>，<button id="stop">Stop</button>和<button id="reset">Reset</button>）。这些元素将用于显示时间以及开始、停止和重置秒表。
此外，此代码每秒更新10次时间（即每100毫秒更新一次），因此显示的毫秒数将精确到10毫秒。如果你需要更高的精度，你可以调整setInterval的调用间隔。
如果你希望将秒表功能集成到网页中，并且希望它具有更好的用户体验和交互性，你可以添加一些额外的功能，比如显示时间的格式化、添加启动/停止状态的视觉指示，以及可能的自动启动和停止逻辑。
以下是一个改进后的秒表计时器代码示例，它包含了上述的一些功能：
html复制代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stopwatch</title> <style> #stopwatch { font-size: 2em; margin-bottom: 1em; } button { padding: 10px 20px; } .running { background-color: green; color: white; } </style> </head> <body> <div id="stopwatch">00:00:00</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> <script> class Stopwatch { constructor(elementId) { this.seconds = 0; this.milliseconds = 0; this.isRunning = false; this.interval = null; this.element = document.getElementById(elementId); this.startButton = document.getElementById('start'); this.stopButton = document.getElementById('stop'); this.resetButton = document.getElementById('reset'); this.startButton.addEventListener('click', this.start.bind(this)); this.stopButton.addEventListener('click', this.stop.bind(this)); this.resetButton.addEventListener('click', this.reset.bind(this)); this.updateDisplay(); } start() { if (!this.isRunning) { this.isRunning = true; this.startButton.classList.add('running'); this.stopButton.classList.remove('running'); this.interval = setInterval(() => { this.milliseconds++; if (this.milliseconds >= 1000) { this.seconds++; this.milliseconds = 0; } this.updateDisplay(); }, 100); } } stop() { if (this.isRunning) { this.isRunning = false; clearInterval(this.interval); this.startButton.classList.remove('running'); this.stopButton.classList.add('running'); } } reset() { this.stop(); this.seconds = 0; this.milliseconds = 0; this.updateDisplay(); } updateDisplay() { const minutes = Math.floor(this.seconds / 60); const secs = this.seconds % 60; const ms = this.milliseconds < 10 ? '0' + this.milliseconds : this.milliseconds; this.element.textContent = `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`; } } // 使用方法 const stopwatch = new Stopwatch('stopwatch'); </script> </body> </html>
在这个示例中，我们添加了一些CSS来改变开始和停止按钮的样式，以反映秒表的当前状态（正在运行或已停止）。我们还改进了updateDisplay方法，以便更好地格式化时间的显示，包括毫秒数。此外，我们直接在构造函数中设置了事件监听器，使代码更加简洁。
你可以将上述代码保存为一个HTML文件，并在浏览器中打开它，以查看秒表计时器的运行效果。当然，这只是一个基本的示例，你可以根据自己的需求进一步扩展和优化它。
