Html、Css、JavaScriptでタイマーカウンターを作成する方法。-CSSチュートリアル-php.cn

Html、Css、JavaScriptでタイマーカウンターを作成する方法。

Mary-Kate Olsen

リリース： 2024-10-10 11:13:30

オリジナル

1157 人が閲覧しました

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="開始ボタン" のボタンはタイマーを開始するために使用されます。

ステップ 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 中国語 Web サイトの他の関連記事を参照してください。