首页 > 文章 > web前端 > 如何使用 Html、Css 和 Javascript 创建计时器计数器。

如何使用 Html、Css 和 Javascript 创建计时器计数器。

Mary-Kate Olsen原创: 2024-10-10 11:13:30992浏览

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

上一篇：Building a Responsive Grid Layout with Tailwind CSS下一篇：暂无

查看更多