Cara membuat Kaunter pemasa dengan Html, Css dan Javascript.-tutorial css-php.cn

Cara membuat Kaunter pemasa dengan Html, Css dan Javascript.

Mary-Kate Olsen

Lepaskan： 2024-10-10 11:13:30

asal

1121 orang telah melayarinya

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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);
});

Salin selepas log masuk

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);
});

Salin selepas log masuk

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!