极客笔记如何使用HTML、CSS和JavaScript创建秒表
在本教程中，我们将使用HTML、CSS和JavaScript创建一个带有开始、停止和重置功能的秒表。
首先，我们将使用HTML和CSS创建秒表的用户界面。然后，使用JavaScript使用户界面具有功能性。
为秒表创建用户界面
- 第一步是创建一个包含所有元素的单个容器。
-
接下来，我们在这个容器中添加两个div，一个用于包含所有时间元素（如小时、分钟、秒和毫秒），另一个div包含三个按钮，分别用于启动、停止和重置功能。
-
现在，我们使用CSS样式属性对秒表进行样式设置和元素对齐。
为用户界面添加功能性
-
我们使用JavaScript添加具有onclick功能的三个按钮和另一个包含所有逻辑代码和小时、分钟、秒、毫秒等值的函数。
-
我们首先包含一个click事件监听器。点击事件监听器基本上是一个在用户点击所附加的元素时被调用的函数。我们希望通过激活开始、停止和重置按钮来激活秒表。当我们点击一个按钮时，我们将使用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>