htmltime

HTML本身并不直接支持秒表计时器的功能，但我们可以通过JavaScript和HTML的结合来实现这个功能，以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript创建一个秒表计时器。

（图片来源网络，侵删）

1、我们需要创建HTML结构，在这个例子中，我们将使用一个<div>元素来显示计时器的结果，以及四个<button>元素来控制秒表的开始、暂停、重置和清零功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>秒表计时器</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <div id="timer">00:00:00</div>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <button id="reset">重置</button>
    <button id="clear">清零</button>
    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

2、接下来，我们需要添加一些CSS样式来美化我们的秒表计时器，在这个例子中，我们将设置计时器的背景颜色、字体颜色和大小，以及按钮的样式。

body {
    display: flex;
    justifycontent: center;
    alignitems: center;
    height: 100vh;
    backgroundcolor: #f0f0f0;
}
#timer {
    fontsize: 48px;
    color: #333;
    backgroundcolor: #fff;
    padding: 20px;
    borderradius: 5px;
}
button {
    display: block;
    margin: 10px;
    padding: 10px 20px;
    fontsize: 18px;
    color: #fff;
    backgroundcolor: #007bff;
    border: none;
    borderradius: 5px;
    cursor: pointer;
}
button:hover {
    backgroundcolor: #0056b3;
}

3、现在，我们需要添加JavaScript代码来实现秒表计时器的功能，在这个例子中，我们将使用setInterval函数来每秒更新计时器的显示，以及clearInterval函数来停止计时器，我们还将添加事件监听器来处理按钮的点击事件。


let timer = document.getElementById('timer');
let startButton = document.getElementById('start');
let pauseButton = document.getElementById('pause');
let resetButton = document.getElementById('reset');
let clearButton = document.getElementById('clear');
let intervalId;
let seconds = 0;
let minutes = 0;
let hours = 0;
let isRunning = false;
let isPaused = false;
function updateTimer() {
    if (!isPaused) {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }
    } else {
        seconds;
        if (seconds < 0) {
            seconds = 59;
            minutes;
            if (minutes < 0) {
                minutes = 59;
                hours;
            }
        }
    }
    timer.textContent = ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')};
}
startButton.addEventListener('click', () => {
    if (!isRunning && !isPaused) {
        intervalId = setInterval(updateTimer, 1000);
        isRunning = true;
        startButton.textContent = '暂停';
    } else if (isRunning && isPaused) {
        isPaused = false;
        startButton.textContent = '暂停';
    } else {
        startButton.textContent = '开始';
        isRunning = true;
    }
});
pauseButton.addEventListener('click', () => {
    if (isRunning && !isPaused) {
        isPaused = true;
        pauseButton.textContent = '继续';
        clearInterval(intervalId);
    } else if (isRunning && isPaused) {
        isPaused = false;
        pauseButton.textContent = '暂停';
        intervalId = setInterval(updateTimer, 1000);
    } else {
        pauseButton.textContent = '暂停';
    }
});
resetButton.addEventListener('click', () => {
    if (isRunning || isPaused) {
        clearInterval(intervalId);
        isRunning = false;
        isPaused = false;
        seconds = 0; minutes = 0; hours = 0;
        timer.textContent = '00:00:00';
        startButton.textContent = '开始'; pauseButton.textContent = '暂停'; resetButton.textContent = '重置'; clearButton.textContent = '清零';
    } else {
        alert('计时器没有运行或已暂停，无法重置！');
    }
});

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/363895.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。