如何使用 HTML CSS 和 JavaScript 创建秒表?
htmljavascriptcssfront end technology
在本教程中，我们将使用 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>
