数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML、CSS 和 JavaScript 创建秒表？
要使用 HTML、CSS 和 Javascript 创建秒表，我们需要对 HTML、CSS 和 JavaScript 的工作原理有基本的了解。HTML 和 CSS 将用于制作秒表的 UI，其中 HTML 将创建秒表的结构，CSS 样式化秒表，而 Javascript 将为我们的秒表添加功能。
在本教程中，我们将了解如何使用 HTML、CSS 和 JavaScript 创建具有开始、停止和重置功能的秒表。我们将遵循三个步骤
使用 HTML 创建秒表的结构
- 我们使用了四个 div 元素，其中第一个 div 元素的类名为 align，用于将我们的秒表设置在屏幕中央。第二个 div 元素的类名为 container，包含所有元素。
- 此外，我们在该容器内添加了两个 div，一个包含所有时间元素，如小时、分钟、秒和毫秒，另一个 div 包含三个用于开始、停止和重置功能的按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create StopWatch using HTML CSS and JavaScript
</title>
</head>
<body>
<div class="align">
<div class="container">
<h4>Stopwatch</h4>
<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>
</div>
</body>
</html>
使用 CSS 设计结构
我们已实施以下步骤
- 我们使用 align 类通过 display 属性创建一个灵活的容器，并使用 justify-content 和 align-items 将秒表对齐到中心。
- 我们使用 container 类设置秒表的 高度、宽度 和 背景颜色。
- 我们使用 CSS 属性（如 padding、font-size、margin、border-radius、color、cursor 等）对按钮和悬停时的按钮进行样式设置。
以下是上述步骤的 CSS 实现
body {
font-family: Times New Roman;
}
.align {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: thistle;
height: 350px;
width: 550px;
text-align: center;
}
h4 {
color: purple;
padding: 20px;
font-size: 30px;
font-weight: bold;
}
.digits {
font-size: 70px;
color: white;
}
.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;
}
使用 JavaScript 添加功能
- 我们使用 JavaScript 和 addEventListener() 为所有三个按钮（开始、停止和重置）添加了点击函数。
- startButton 通过将 timer 设置为 true 并调用 stopWatch 函数来启动。类似地，stopButton 停止计时器并将 timer 设置为 false，而 reset 按钮将所有值设置为 0 并将所有值更新为 00。
- 最后，我们编写了一个公共函数，即 stopWatch()，用于开始、停止和重置功能，该函数在被调用时，会根据计时器的状态以及小时、分钟、秒和毫秒的值执行逻辑计算。
- 它包括何时使用 条件语句 更新秒、分和时计数器。它还通过检查每个值 < 10 来维护两位数。
以下是上述步骤的实现
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);
}
}
完整示例代码
以下是使用 HTML、CSS 和 Javascript 创建秒表的完整示例代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create StopWatch using HTML CSS and JavaScript
</title>
<style>
body {
font-family: Times New Roman;
}
.align {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: thistle;
height: 350px;
width: 550px;
text-align: center;
}
h4 {
color: purple;
padding: 20px;
font-size: 30px;
font-weight: bold;
}
.digits {
font-size: 70px;
color: white;
}
.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="align">
<div class="container">
<h4>Stopwatch.</h4>
<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>
</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、CSS 和 Javascript 创建秒表。我们使用 HTML 和 CSS 创建结构并设计秒表的 UI，同时使用 JavaScript 添加按钮的功能，执行开始、停止和重置三个基本功能。
更新于：2024年8月7日
3K+ 次浏览
广告