Rumah > Artikel > hujung hadapan web > 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:301101semak imbas

How to create timer Counter with Html, Css, and Javascript.

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!

JavaScript css html for format Interface finally Event function dom this display padding

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Membina Reka Letak Grid Responsif dengan CSS TailwindArtikel seterusnya：Membina Reka Letak Grid Responsif dengan CSS Tailwind

Artikel berkaitan

Lihat lagi