正文

如何用JavaScript暂停秒表计时

/0 浏览量
0711

在JavaScript中，创建一个秒表并实现暂停功能是一个常见的需求。以下是一个简单的指南，展示如何使用JavaScript和HTML来创建一个可以暂停的秒表。

基础HTML结构

首先，我们需要一个HTML文件来展示秒表和暂停按钮。以下是一个基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>秒表计时器</title>
</head>
<body>
    <div id="clock">00:00:00</div>
    <button onclick="startClock()">开始</button>
    <button onclick="pauseClock()">暂停</button>
    <script src="stopwatch.js"></script>
</body>
</html>

在这个HTML文件中，我们有一个div元素来显示秒表的时间，以及两个按钮来控制计时器的开始和暂停。

JavaScript实现

接下来，我们需要编写JavaScript代码来实现秒表计时和暂停的功能。以下是一个名为stopwatch.js的JavaScript文件的内容：

let startTime = 0;
let elapsedTime = 0;
let timerRunning = false;
let intervalId = null;

function startClock() {
    if (!timerRunning) {
        startTime = new Date().getTime() - elapsedTime;
        timerRunning = true;
        intervalId = setInterval(updateClock, 1000);
    }
}

function pauseClock() {
    if (timerRunning) {
        elapsedTime = new Date().getTime() - startTime;
        clearInterval(intervalId);
        timerRunning = false;
    }
}

function updateClock() {
    if (timerRunning) {
        let currentTime = new Date().getTime();
        elapsedTime = currentTime - startTime;
        let seconds = Math.floor((elapsedTime / 1000) % 60);
        let minutes = Math.floor((elapsedTime / 1000 / 60) % 60);
        let hours = Math.floor((elapsedTime / (1000 * 60 * 60)) % 24);

        seconds = seconds < 10 ? '0' + seconds : seconds;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        hours = hours < 10 ? '0' + hours : hours;

        document.getElementById('clock').innerText = hours + ':' + minutes + ':' + seconds;
    }
}

// 初始化秒表
updateClock();

代码解释

  1. 变量定义：startTime和elapsedTime用于存储开始时间和经过的时间。timerRunning用于标识计时器是否正在运行。intervalId用于存储计时器的ID。

  2. startClock函数：当调用此函数时，如果计时器未在运行，则计算当前时间与startTime的差值，设置timerRunning为true，并启动一个每秒执行一次的计时器。

  3. pauseClock函数：当调用此函数时，如果计时器正在运行，则计算经过的时间，清除计时器，并设置timerRunning为false。

  4. updateClock函数：此函数计算当前经过的时间，并将其格式化为小时、分钟和秒，然后更新clock元素的文本内容。

  5. 初始化：页面加载时调用updateClock函数来初始化秒表。

通过以上步骤，你就可以创建一个简单的秒表计时器，并且能够通过按钮来控制其开始和暂停。

-- 展开阅读全文 --