如何使用 HTML CSS 和 JavaScript 创建秒表?

在本教程中，我们将使用 HTML、CSS 和 JavaScript 创建具有开始、停止和重置功能的 秒表。

我们将首先使用 HTML 和 CSS 创建秒表的用户界面。然后，我们将使用 JavaScript 使用户界面正常运行。

为秒表创建用户界面

• 第一步是创建一个包含所有元素的容器。

• 此外，我们继续在此容器内添加两个 div，一个包含所有时间元素，例如小时、分钟、秒和毫秒，另一个 div 包含三个按钮，用于开始、停止和重置功能。<​​/p>

• 现在，我们设置秒表的样式，并使用 CSS 样式属性对齐元素。

向用户界面添加功能

• 我们为所有三个按钮添加带有 onclick 函数的 JavaScript，并添加另一个带有所有逻辑代码和小时、分钟、秒、毫秒等值的函数。

• 我们首先添加一个点击事件监听器。点击事件监听器基本上是一个函数，每当用户点击它所附加到的元素时，它都会被调用。我们希望通过激活"开始"、"停止"和"重置"按钮来激活秒表。当我们点击一​​个按钮时，我们将使用addEventListener来调用该函数，其中包含计时器的状态以及小时、分钟、秒和毫秒的适当值。我们可以将按钮元素存储在变量中，以避免将来多次调用document.getElementById。

• 最后，我们为启动、停止和重置功能编写一个通用函数，该函数在被调用时根据计时器的状态以及小时、分钟、秒和毫秒的值执行逻辑计算。此函数仅负责秒表的正常运行。

示例

让我们实现上述方法并创建一个功能齐全的秒表。

<!DOCTYPE html>
<html lang= "en">
<head>
    <meta charset= "UTF-8">
    <meta http-equiv= "X-UA-Compatible" 
          content= "IE=edge">
    <meta name= "viewport" 
          content= "width=device-width, initial-scale=1.0">
    <title> How to Create StopWatch using HTML CSS and JavaScript ? </title>
    <style>
        body {
            background-color: papayawhip;
            margin: 50px;
            font-family: Times New Roman;
        }
        .container {
            background-color: thistle;
            height: 350px;
            width: 550px;
            text-align: center;
        }
        p {
            color: purple;
            padding: 20px;
            font-size: 30px;
            font-weight: bold;
        }
        .digits {
            font-size: 70px;
            color: papayawhip;
        }
        .text {
            font-size: 20px;
            color: hotpink;
            font-weight: bold;
        }
        #buttons {
            margin-top: 35px;
        }
        .btn1, .btn2, .btn3 {
            width: 90px;
            height: 50px;
            padding: 8px 5px 8px 2px;
            margin: 10px 25px 20px 10px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 20px;
            transition: 0.7s;
            color: white;
            font-weight: 550;
            border: 0;
            font-family: Times new Roman;
        }
        .btn1:hover, .btn2:hover, .btn3:hover{
            color: indigo;
        }
        #start {
            background-color: indigo;
        }
        #stop {
            background-color: mediumpurple;
        }
        #reset {
            background-color: plum;
        }
        #start:hover, #stop:hover, #reset:hover  {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class= "container">
        <p> Functional stopwatch. Try it </p>
        <div id= "time">
            <span class= "digits" id= "hour">
              00</span>
            <span class= "text" > Hr </span>
            <span class= "digits" id= "minute">
              00</span>
            <span class= "text"> Min </span>
            <span class= "digits" id= "second">
              00</span>
            <span class= "text"> Sec </span>
            <span class= "digits" id= "count">
              00</span>
        </div>
        <div id= "buttons">
            <button class= "btn1" id= "start">
              Start </button>
            <button class= "btn2" id= "stop">
              Stop </button>
            <button class= "btn3" id= "reset">
              Reset </button>
        </div>
    </div>
    <script>
        let startButton = document.getElementById('start');
        let stopButton = document.getElementById('stop');
        let resetButton = document.getElementById('reset');
          
        let hour = 00;
        let minute = 00;
        let second = 00;
        let count = 00;
          
        startButton.addEventListener('click', function () {
            timer = true;
            stopWatch();
        });
        stopButton.addEventListener('click', function () {
            timer = false;
        }); 
        resetButton.addEventListener('click', function () {
            timer = false;
            hour = 0;
            minute = 0;
            second = 0;
            count = 0;
            document.getElementById('hour').innerHTML = "00";
            document.getElementById('minute').innerHTML = "00";
            document.getElementById('second').innerHTML = "00";
            document.getElementById('count').innerHTML = "00";
        });
        function stopWatch() {
            if (timer) {
                count++;
                if (count == 100) {
                    second++;
                    count = 0;
                }
                if (second == 60) {
                    minute++;
                    second = 0;
                }
                if (minute == 60) {
                    hour++;
                    minute = 0;
                    second = 0;
                }
                let hourString = hour;
                let minuteString = minute;
                let secondString = second;
                let countString = count;
                if (hour < 10) {
                    hourString = "0" + hourString;
                }
                if (minute < 10) {
                    minuteString = "0" + minuteString;
                }
                if (second < 10) {
                    secondString = "0" + secondString;
                }
          
                if (count < 10) {
                    countString = "0" + countString;
                }
                document.getElementById('hour').innerHTML = hourString;
                document.getElementById('minute').innerHTML = minuteString;
                document.getElementById('second').innerHTML = secondString;
                document.getElementById('count').innerHTML = countString;
                setTimeout(stopWatch, 10);
            }
        }
    </script>
</body>
</html>

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/