使用 JavaScript 创建一个简单的秒表

在本文中，你将学习如何使用 JavaScript 制作一个简单的秒表。秒表是一个简单的 JavaScript 项目，但对初学者来说足够重要。

这类项目用于计算时间。本设计的重点在于可以计算毫秒，即小时、分钟、秒和毫秒。

观看现场演示，了解其工作原理。我首先设计了网页，然后创建了一个盒子。盒子里有一个显示计数时间的显示屏。它有三个按钮，分别用于开始、停止和重新开始倒计时。如果你了解 JavaScript 基础知识，就能轻松理解。对于初学者，我已经提供了完整的详细解释。

步骤1：秒表的基本结构

我们使用以下 HTML 和 CSS 代码创建了这款秒表的基本结构。首先，我借助 CSS 代码设计了网页。

这里我使用了页面的背景色蓝色。我使用了盒子width 40%，最小宽度为 500 像素。Border-radius: 10px用于将盒子的四个角弄圆。

<div class="container">

</div>

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
  background: #448aff;
}

.container{
    background-color: #ffffff;
    width: 40%;
    min-width: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    padding: 20px 0;
    padding-bottom: 50px;
    border-radius: 10px;
}

步骤 2：创建显示时间的显示屏

我使用以下 HTML 和 CSS 代码在这个盒子里创建了一个显示界面。这个显示界面可以帮助你查看谁在计时。在这里，你可以看到小时、分钟、秒和毫秒的计数。

此显示屏周围添加了阴影，增强了其美感。同时，font-size: 40px此处的阴影也会稍微增大时间的尺寸。

<div class="timerDisplay">
   00 : 00 : 00 : 000
</div>

.timerDisplay{
    position: relative;
    width: 92%;
    background: #ffffff;
    left: 4%;
    padding: 40px 0;
    font-family: 'Roboto mono',monospace;
    color: #0381bb;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

步骤 3：在 JavaScript 秒表中创建 3 个按钮

现在，已使用以下 HTML 和 CSS 代码在秒表中创建三个按钮。

每个按钮的width of 120px高度为 45px。我习惯于font-size: 18px增加按钮中文本的大小。

<div class="buttons">
  <button id="pauseTimer">Pause</button>
  <button id="startTimer">Start</button>
  <button id="resetTimer">Reset</button>
</div>

.buttons{
    width: 90%;
    margin: 60px auto 0 auto;
    display: flex;
    justify-content: space-around;
}
.buttons button{
    width: 120px;
    height: 45px;
    background-color: #205e94;
    color: #ffffff;
    border: none;
    font-family: 'Poppins',sans-serif;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

使用下面的 CSS，我设置了第二个和第三个按钮的背景颜色。上面我们将按钮的背景设置为蓝色，但现在nth-last-child ()我为第二个和第三个按钮设置了不同的颜色。

.buttons button:nth-last-child(2){
  background-color: #d23332;
}
.buttons button:nth-last-child(1){
  background-color: #20b380;
}

步骤 4：使用 JavaScript 激活秒表

现在是时候使用 JavaScript 来激活这个秒表了。上面我们已经完成了使用 HTML 和 CSS 的完整设计工作。如果您了解基本的 JavaScript，那么您可以轻松地理解您自己的 JavaScript 解释。

我使用以下三行代码确定了一些信息的值。首先，我将小时、分钟、秒、毫秒的值设置为零。这意味着当倒计时开始时，这些值将为零。最后，设置一个显示 ID 的常量。

let [milliseconds,seconds,minutes,hours] = [0,0,0,0];
let timerRef = document.querySelector('.timerDisplay');
let int = null;

现在我已经使用下面的 JavaScript 执行了start button。因此，当您点击该按钮时，倒计时将开始。

正常情况下倒计时值为0，点击后倒计时会每毫秒增加一次。

document.getElementById('startTimer').addEventListener('click', ()=>{
    if(int!==null){
        clearInterval(int);
    }
    int = setInterval(displayTimer,10);
});

我已经pause button使用这些代码实现了。点击此按钮后，倒计时将停止。

document.getElementById('pauseTimer').addEventListener('click', ()=>{
    clearInterval(int);
});

我使用以下代码实现了该功能reset button。因此，当您点击重置按钮时，显示屏上的时间将恢复到之前的状态，即零。当您点击此按钮时，小时、分钟、秒、毫秒的值将变为零。

document.getElementById('resetTimer').addEventListener('click', ()=>{
    clearInterval(int);
    [milliseconds,seconds,minutes,hours] = [0,0,0,0];
    timerRef.innerHTML = '00 : 00 : 00 : 000 ';
});

现在，我在这里使用了“if”函数来使秒表工作。我尝试完整地解释它的工作原理。我使用了“if”函数三次，并且在每个函数中都给出了一个特定的条件。首先，我以毫秒为单位设置时间。

➤ 当毫秒值等于 1000 时，我们将在毫秒单元格中看到零，并且秒数将增加一。因为我们都知道1000 milliseconds equals 1 second。

➤ 我给出了条件，当秒的值为 60 时，我们将在秒单元格中看到零，在分钟单元格中看到一个增量。

➤ 我第三次使用 if 函数时，执行了分钟计时。当分钟时间达到 60 时，你会在分钟单元格中看到 0，在小时单元格中看到 1。

这样，您就可以按照相同的规则对更多信息（例如天、月等）进行倒计时。

function displayTimer(){
    milliseconds+=10;

    if(milliseconds == 1000){
        milliseconds = 0;
        seconds++;

        if(seconds == 60){
            seconds = 0;
            minutes++;

            if(minutes == 60){
                minutes = 0;
                hours++;
            }
        }
    }

现在，使用以下四行 JavaScript，我在倒计时次数为 1 的情况下添加了一个零。当倒计时次数小于 10 时，我们添加一个零。

这里我们给出了小时、分钟、秒和毫秒的值到达的条件less than 10 then one zero is added。然后，该时间将以小时、分钟、秒、毫秒为单位传输。您可以观看其现场演示。

如下所示，我在毫秒方面使用了一些额外的代码。这是因为毫秒由四个数字组成，也就是说有 3 个零。

所以在这个例子中，我添加了两次条件。第一次使用条件时，当时间值为时less than 10，会添加两个零。当时间值为时，会添加一个零less than 100。

 let h = hours < 10 ? "0" + hours : hours;
 let m = minutes < 10 ? "0" + minutes : minutes;
 let s = seconds < 10 ? "0" + seconds : seconds;
 let ms = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : milliseconds;

正如您上面所见，我们已经将倒计时的所有时间以 hms ms 为单位存储。

现在您必须使用将所有这些信息排序到显示中innerhtml。innerhtml 有助于组织 HTML 页面中的任何信息。

为了您的方便，我在下面给出了一张图片，它将帮助您了解下面的代码是如何工作的。

timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;

以上代码我已尽力解释清楚。如有任何疑问，可以直接在我的 Instagram ( @foolishdeveloper ) 上提问。

最终的 JavaScript 代码

为了您的方便，我们在下面整理了完整的 JavaScript 代码。

let [milliseconds,seconds,minutes,hours] = [0,0,0,0];
let timerRef = document.querySelector('.timerDisplay');
let int = null;

document.getElementById('startTimer').addEventListener('click', ()=>{
    if(int!==null){
        clearInterval(int);
    }
    int = setInterval(displayTimer,10);
});

document.getElementById('pauseTimer').addEventListener('click', ()=>{
    clearInterval(int);
});

document.getElementById('resetTimer').addEventListener('click', ()=>{
    clearInterval(int);
    [milliseconds,seconds,minutes,hours] = [0,0,0,0];
    timerRef.innerHTML = '00 : 00 : 00 : 000 ';
});

function displayTimer(){
    milliseconds+=10;
    if(milliseconds == 1000){
        milliseconds = 0;
        seconds++;
        if(seconds == 60){
            seconds = 0;
            minutes++;
            if(minutes == 60){
                minutes = 0;
                hours++;
            }
        }
    }

 let h = hours < 10 ? "0" + hours : hours;
 let m = minutes < 10 ? "0" + minutes : minutes;
 let s = seconds < 10 ? "0" + seconds : seconds;
 let ms = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : milliseconds;

 timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;
}

希望您通过本文学会了如何使用 JavaScript 创建这个简单的秒表计时器。请务必评论一下您对这个设计的喜爱程度。

相关文章：

您可以访问我的博客以获取更多类似的教程。😊
https://www.foolishdeveloper.com/

文章来源：https://dev.to/shantanu_jana/create-a-simple-stopwatch-using-javascript-3eoo