首頁 > 文章 > web前端 > 如何使用 Html、Css 和 Javascript 建立計時器計數器。

如何使用 Html、Css 和 Javascript 建立計時器計數器。

Mary-Kate Olsen原創: 2024-10-10 11:13:30987瀏覽

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

建立計時器計數器是理解 HTML、CSS 和 JavaScript 之間互動的好方法。這篇文章將引導您完成建立簡單計時器的過程，該計時器在使用者點擊按鈕時開始計數。計時器將以小時、分鐘和秒顯示經過的時間。

第 1 步：HTML 結構

先建立基本的 HTML 結構。您需要一個 div 來顯示計時器和一個按鈕來啟動計時器。這是一個例子：

<!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>

在此 HTML 檔案中：

id=「timer」的div用來顯示計時器。
id=「start Button」的按鈕用於啟動計時器。

第 2 步：CSS 樣式

接下來，設定 HTML 元素的樣式以建立具有視覺吸引力的介面。隨意設計您喜歡的風格。

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

此 CSS 檔案：

將內容垂直和水平居中。
使用大字體設定計時器顯示樣式。
為按鈕添加填充和樣式，使其更易於點擊。

第 3 步：JavaScript 邏輯

最後，加入 JavaScript 來處理計時器功能。這包括啟動計時器、每秒更新一次以及顯示經過的時間。

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

這個 JavaScript 檔案：

等待 DOM 載入後再執行。
定義startTimer函數來初始化開始時間並設定
每秒更新計時器的時間間隔。
定義updateTimer函數，用於計算經過的時間，格式
它，並更新計時器顯示。
為按鈕新增事件監聽器，以便在點擊時啟動計時器。

獎勵：

隱藏開始按鈕並顯示停止按鈕腳本

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

以上是如何使用 Html、Css 和 Javascript 建立計時器計數器。的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用 Tailwind CSS 建立響應式網格佈局下一篇：暫無

看更多