Rumah >hujung hadapan web >tutorial css >Cara membuat Kaunter pemasa dengan Html, Css dan Javascript.
Cara membuat Kaunter pemasa dengan Html, Css dan Javascript.
- Mary-Kate Olsenasal
- 2024-10-10 11:13:301158semak imbas
Membina kaunter pemasa ialah cara terbaik untuk memahami interaksi antara HTML, CSS dan JavaScript. Siaran ini akan membimbing anda melalui proses mencipta pemasa mudah yang mula mengira apabila pengguna mengklik butang. Pemasa akan memaparkan masa berlalu dalam jam, minit dan saat.
Langkah 1: Struktur HTML
Mulakan dengan mencipta struktur HTML asas. Anda memerlukan div untuk memaparkan pemasa dan butang untuk memulakannya. Berikut ialah contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Timer Counter</h1>
<div id="timer">00:00:00</div>
<button id="startButton">Start Timer</button>
</div>
<script src="script.js"></script>
</body>
</html>
Dalam fail HTML ini:
Div dengan id="timer" digunakan untuk memaparkan pemasa.
Butang dengan id="Start Button" digunakan untuk memulakan pemasa.
Langkah 2: Penggayaan CSS
Seterusnya, gayakan elemen HTML untuk mencipta antara muka yang menarik secara visual. Sila gayakan mengikut citarasa anda.
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#timer {
font-size: 3rem;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
Fail CSS ini:
Memusatkan kandungan secara menegak dan mendatar.
Menggayakan paparan pemasa dengan saiz fon yang besar.
Menambahkan pelapik dan penggayaan pada butang untuk menjadikannya lebih boleh diklik.
Langkah 3: Logik JavaScript
Akhir sekali, tambahkan JavaScript untuk mengendalikan fungsi pemasa. Ini termasuk memulakan pemasa, mengemas kini setiap saat dan memaparkan masa yang berlalu.
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const timerDisplay = document.getElementById("timer");
let timerInterval;
let startTime;
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const currentTime = new Date();
const elapsedTime = new Date(currentTime - startTime);
const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}
startButton.addEventListener("click", startTimer);
});
Fail JavaScript ini:
Menunggu DOM dimuatkan sebelum melaksanakan.
Mentakrifkan fungsi StartTimer untuk memulakan masa mula dan menetapkan
selang waktu untuk mengemas kini pemasa setiap saat.Mentakrifkan fungsi pemasa kemas kini untuk mengira masa berlalu, format
ia dan kemas kini paparan pemasa.
Menambahkan pendengar acara pada butang untuk memulakan pemasa apabila diklik.
Bonus:
Sembunyikan butang mula dan paparkan skrip butang berhenti
// script.js
document.addEventListener("DOMContentLoaded", () => {
const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
const timerDisplay = document.getElementById("timer");
let timerInterval;
let startTime;
function startTimer() {
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
startButton.style.display = "none";
stopButton.style.display = "inline-block";
}
function stopTimer() {
clearInterval(timerInterval);
startButton.style.display = "inline-block";
stopButton.style.display = "none";
}
function updateTimer() {
const currentTime = new Date();
const elapsedTime = new Date(currentTime - startTime);
const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');
timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}
startButton.addEventListener("click", startTimer);
stopButton.addEventListener("click", stopTimer);
});
Atas ialah kandungan terperinci Cara membuat Kaunter pemasa dengan Html, Css dan Javascript.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!