js中计时器怎么做要有记录

在JavaScript中实现计时器并记录时间的方法包括使用setInterval、setTimeout、Date对象及相关技术。这可以通过多种方式实现，主要方法有：使用setInterval进行循环计时、使用setTimeout进行递归计时、使用Date对象记录时间戳。以下将详细介绍如何实现这些方法，并提供代码示例。

实现计时器的基本步骤包括：初始化计时器、开始计时、暂停计时、重置计时。下面将详细介绍这四个步骤，并提供代码示例和可能遇到的实际问题的解决方法。

一、初始化计时器

在初始化计时器时，我们需要定义计时器的状态变量和记录时间的变量。最常见的状态变量包括：计时器是否正在运行、累计时间。

let timerId;
let startTime;
let elapsedTime = 0;
let running = false;

在这个例子中，timerId用于存储setInterval返回的计时器ID，startTime记录计时开始的时间戳，elapsedTime记录累计时间，running标识计时器是否正在运行。

二、开始计时

开始计时时，我们需要记录当前时间，并使用setInterval或setTimeout来定期更新计时器。

function startTimer() {
    if (!running) {
        running = true;
        startTime = Date.now() - elapsedTime;
        timerId = setInterval(() => {
            elapsedTime = Date.now() - startTime;
            updateDisplay();
        }, 1000); // 每秒更新一次
    }
}

这里，我们使用Date.now()获取当前时间戳，并通过减去已有的累计时间来确保计时器能够继续从暂停的位置开始。setInterval每秒更新一次计时器，并调用updateDisplay函数来更新页面上的显示。

三、暂停计时

暂停计时时，我们需要清除setInterval计时器，并记录当前累计时间。

function pauseTimer() {
    if (running) {
        running = false;
        clearInterval(timerId);
        elapsedTime = Date.now() - startTime;
    }
}

通过clearInterval清除计时器，并使用Date.now()减去startTime来记录当前累计时间。

四、重置计时器

重置计时器时，我们需要清除setInterval计时器，并重置所有状态变量。

function resetTimer() {
    running = false;
    clearInterval(timerId);
    elapsedTime = 0;
    updateDisplay();
}

重置所有状态变量，并调用updateDisplay函数来更新页面上的显示。

更新显示

updateDisplay函数用于更新页面上的计时器显示。我们可以将累计时间转换为小时、分钟和秒，并更新页面上的元素。

function updateDisplay() {
    const totalSeconds = Math.floor(elapsedTime / 1000);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;
    document.getElementById('timer').textContent = 
        `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

updateDisplay函数将累计时间转换为小时、分钟和秒，并将其格式化为字符串，更新页面上的计时器元素。

记录时间

我们还需要实现记录时间的功能，可以通过将累计时间保存到数组中，并在页面上显示记录的时间。

let records = [];
function recordTime() {
    if (running) {
        const record = elapsedTime;
        records.push(record);
        updateRecordsDisplay();
    }
}
function updateRecordsDisplay() {
    const recordsList = document.getElementById('records');
    recordsList.innerHTML = '';
    records.forEach((record, index) => {
        const totalSeconds = Math.floor(record / 1000);
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;
        const recordItem = document.createElement('li');
        recordItem.textContent = 
            `Record ${index + 1}: ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        recordsList.appendChild(recordItem);
    });
}

recordTime函数将当前累计时间保存到records数组中，并调用updateRecordsDisplay函数来更新页面上的记录列表。

完整示例代码

下面是一个完整的示例代码，展示如何实现一个带有记录功能的计时器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器示例</title>
    <style>
        #timer {
            font-size: 2em;
            margin-bottom: 20px;
        }
        #controls, #records {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="timer">00:00:00</div>
    <div id="controls">
        <button onclick="startTimer()">开始</button>
        <button onclick="pauseTimer()">暂停</button>
        <button onclick="resetTimer()">重置</button>
        <button onclick="recordTime()">记录时间</button>
    </div>
    <ul id="records"></ul>
    <script>
        let timerId;
        let startTime;
        let elapsedTime = 0;
        let running = false;
        let records = [];
        function startTimer() {
            if (!running) {
                running = true;
                startTime = Date.now() - elapsedTime;
                timerId = setInterval(() => {
                    elapsedTime = Date.now() - startTime;
                    updateDisplay();
                }, 1000);
            }
        }
        function pauseTimer() {
            if (running) {
                running = false;
                clearInterval(timerId);
                elapsedTime = Date.now() - startTime;
            }
        }
        function resetTimer() {
            running = false;
            clearInterval(timerId);
            elapsedTime = 0;
            updateDisplay();
        }
        function recordTime() {
            if (running) {
                const record = elapsedTime;
                records.push(record);
                updateRecordsDisplay();
            }
        }
        function updateDisplay() {
            const totalSeconds = Math.floor(elapsedTime / 1000);
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;
            document.getElementById('timer').textContent = 
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        function updateRecordsDisplay() {
            const recordsList = document.getElementById('records');
            recordsList.innerHTML = '';
            records.forEach((record, index) => {
                const totalSeconds = Math.floor(record / 1000);
                const hours = Math.floor(totalSeconds / 3600);
                const minutes = Math.floor((totalSeconds % 3600) / 60);
                const seconds = totalSeconds % 60;
                const recordItem = document.createElement('li');
                recordItem.textContent = 
                    `Record ${index + 1}: ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                recordsList.appendChild(recordItem);
            });
        }
    </script>
</body>
</html>

这个示例代码展示了如何使用JavaScript实现一个带有记录功能的计时器。通过点击按钮，可以开始、暂停、重置计时器，并记录当前时间。页面上的计时器和记录列表会实时更新。