js怎么做秒表

使用JavaScript实现秒表

JavaScript实现秒表的方法有多种，包括使用setInterval、Date对象、performance.now()等。推荐使用setInterval方法、处理时间格式显示、增加暂停和重置功能。

实现秒表的核心步骤是：1）初始化计时器，2）设置计时显示，3）处理开始、暂停和重置功能，4）优化时间显示格式。

一、初始化计时器

在初始化计时器时，我们需要定义一些全局变量来保存计时状态、开始时间、累计时间等。使用setInterval来更新计时器显示。

let startTime;

let updatedTime;
let difference;
let tInterval;
let running = false;
let paused = false;
let savedTime = 0;
function startTimer() {
  if (!running) {
    startTime = new Date().getTime();
    tInterval = setInterval(getShowTime, 1);
    paused = false;
    running = true;
  }
}
function pauseTimer() {
  if (!paused) {
    clearInterval(tInterval);
    savedTime += difference;
    paused = true;
    running = false;
  }
}
function resetTimer() {
  clearInterval(tInterval);
  savedTime = 0;
  running = false;
  paused = false;
  document.getElementById('display').innerHTML = '00:00:00.000';
}

二、设置计时显示

使用setInterval来定期更新计时显示，计算当前时间与开始时间的差值，并将其格式化为用户友好的显示格式。

function getShowTime() {

  updatedTime = new Date().getTime();
  difference = (updatedTime - startTime) + savedTime;
  let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((difference % (1000 * 60)) / 1000);
  let milliseconds = Math.floor((difference % 1000));
  hours = (hours < 10) ? '0' + hours : hours;
  minutes = (minutes < 10) ? '0' + minutes : minutes;
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  milliseconds = (milliseconds < 100) ? '0' + milliseconds : milliseconds;
  milliseconds = (milliseconds < 10) ? '0' + milliseconds : milliseconds;
  document.getElementById('display').innerHTML = hours + ':' + minutes + ':' + seconds + '.' + milliseconds;
}

三、处理开始、暂停和重置功能

为按钮设置事件监听器，使用户可以通过点击按钮来控制秒表的开始、暂停和重置功能。

<button id="start">Start</button>

<button id="pause">Pause</button>
<button id="reset">Reset</button>
<div id="display">00:00:00.000</div>

document.getElementById('start').addEventListener('click', startTimer);

document.getElementById('pause').addEventListener('click', pauseTimer);
document.getElementById('reset').addEventListener('click', resetTimer);

四、优化时间显示格式

为了提升用户体验，可以优化时间显示格式，确保时间以统一的格式显示，例如确保毫秒数始终为三位数。

function formatTime(unit) {

  return unit < 10 ? '0' + unit : unit;
}
function getShowTime() {
  updatedTime = new Date().getTime();
  difference = (updatedTime - startTime) + savedTime;
  let hours = formatTime(Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
  let minutes = formatTime(Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)));
  let seconds = formatTime(Math.floor((difference % (1000 * 60)) / 1000));
  let milliseconds = formatTime(Math.floor((difference % 1000)));
  document.getElementById('display').innerHTML = `${hours}:${minutes}:${seconds}.${milliseconds}`;
}

通过上述步骤，我们可以使用JavaScript实现一个简单但功能齐全的秒表。核心功能包括初始化计时器、设置计时显示、处理开始、暂停和重置功能，并通过优化时间显示格式来提升用户体验。

相关问答FAQs：

1. 如何使用JavaScript实现一个秒表？

JavaScript可以通过使用计时器函数来实现一个简单的秒表。你可以使用setInterval函数来创建一个定时器，然后在每个时间间隔内更新显示的秒数。以下是一个简单的实现示例：

// HTML
<span id="timer">00:00:00</span>

// JavaScript
var seconds = 0;
var minutes = 0;
var hours = 0;

function startTimer() {
    setInterval(function() {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }
        document.getElementById('timer').textContent = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
    }, 1000);
}

function pad(value) {
    return value < 10 ? '0' + value : value;
}

startTimer();

2. 如何在JavaScript秒表中添加暂停和重置功能？

要在JavaScript秒表中添加暂停和重置功能，你可以使用clearInterval函数来停止定时器，并将秒数、分钟数和小时数重置为零。以下是一个示例：

// HTML
<span id="timer">00:00:00</span>
<button onclick="startTimer()">Start</button>
<button onclick="pauseTimer()">Pause</button>
<button onclick="resetTimer()">Reset</button>

// JavaScript
var timerInterval;
var seconds = 0;
var minutes = 0;
var hours = 0;

function startTimer() {
    timerInterval = setInterval(function() {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }
        document.getElementById('timer').textContent = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
    }, 1000);
}

function pauseTimer() {
    clearInterval(timerInterval);
}

function resetTimer() {
    clearInterval(timerInterval);
    seconds = 0;
    minutes = 0;
    hours = 0;
    document.getElementById('timer').textContent = '00:00:00';
}

function pad(value) {
    return value < 10 ? '0' + value : value;
}

3. 如何在JavaScript秒表中添加计次功能？

要在JavaScript秒表中添加计次功能，你可以使用一个数组来存储计次时间，并在每次点击计次按钮时将当前的小时、分钟和秒数添加到数组中。以下是一个示例：

// HTML
<span id="timer">00:00:00</span>
<button onclick="startTimer()">Start</button>
<button onclick="pauseTimer()">Pause</button>
<button onclick="resetTimer()">Reset</button>
<button onclick="recordTime()">Record Time</button>
<ul id="recordList"></ul>

// JavaScript
var timerInterval;
var seconds = 0;
var minutes = 0;
var hours = 0;
var recordTimes = [];

function startTimer() {
    timerInterval = setInterval(function() {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }
        document.getElementById('timer').textContent = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
    }, 1000);
}

function pauseTimer() {
    clearInterval(timerInterval);
}

function resetTimer() {
    clearInterval(timerInterval);
    seconds = 0;
    minutes = 0;
    hours = 0;
    document.getElementById('timer').textContent = '00:00:00';
    recordTimes = [];
    document.getElementById('recordList').innerHTML = '';
}

function recordTime() {
    var currentTime = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
    recordTimes.push(currentTime);
    var listItem = document.createElement('li');
    listItem.textContent = currentTime;
    document.getElementById('recordList').appendChild(listItem);
}

function pad(value) {
    return value < 10 ? '0' + value : value;
}