資料結構
網路
關係資料庫管理系統
作業系統
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+ 次瀏覽
廣告