• 使用JavaScript及HTML、CSS完成秒表计时器

    案例要求

    1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
    2.点击开始，面板开始计时，
    3.点击暂停，面板停止
    4.点击重置，计时面板重新为0

    案例源码

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <title>秒表计时器title>
    7. <style>
    8.     body {
    9.         font-family: Arial, sans-serif;
    10.         background-color: #f4f4f4;
    11.         margin: 0;
    12.         padding: 0;
    13.         display: flex;
    14.         justify-content: center;
    15.         align-items: center;
    16.         height: 100vh;
    17.     }
    18.     .container {
    19.         text-align: center;
    20.     }
    21.     #timerDisplay {
    22.         font-size: 36px;
    23.         margin-bottom: 20px;
    24.     }
    25.     .clock {
    26.         width: 200px;
    27.         height: 200px;
    28.         border: 8px solid #007bff;
    29.         border-radius: 50%;
    30.         position: relative;
    31.         margin-bottom: 20px;
    32.     }
    33.     .hand {
    34.         width: 2px;
    35.         background-color: #007bff;
    36.         position: absolute;
    37.         top: 50%;
    38.         left: 50%;
    39.         transform-origin: bottom center;
    40.     }
    41.     .hour-hand {
    42.         height: 50px;
    43.     }
    44.     .minute-hand {
    45.         height: 70px;
    46.     }
    47.     .second-hand {
    48.         height: 80px;
    49.         background-color: red;
    50.     }
    51.     .center-dot {
    52.         width: 8px;
    53.         height: 8px;
    54.         background-color: #007bff;
    55.         border-radius: 50%;
    56.         position: absolute;
    57.         top: 50%;
    58.         left: 50%;
    59.         transform: translate(-50%, -50%);
    60.     }
    61.     .buttons {
    62.         display: flex;
    63.         justify-content: center;
    64.     }
    65.     .button {
    66.         background-color: #007bff;
    67.         color: #fff;
    68.         border: none;
    69.         padding: 10px 20px;
    70.         cursor: pointer;
    71.         margin-right: 10px;
    72.     }
    73. style>
    74. head>
    75. <body>
    76.  
    77. <div class="container">
    78.     <div id="timerDisplay">00:00:00div>
    79.     <div class="clock">
    80.         <div class="hand hour-hand">div>
    81.         <div class="hand minute-hand">div>
    82.         <div class="hand second-hand">div>
    83.         <div class="center-dot">div>
    84.     div>
    85.     <div class="buttons">
    86.         <button id="startButton" class="button">开始button>
    87.         <button id="pauseButton" class="button">暂停button>
    88.         <button id="resetButton" class="button">重置button>
    89.     div>
    90. div>
    91.  
    92. <script>
    93. var timer;
    94. var hours = 0;
    95. var minutes = 0;
    96. var seconds = 0;
    97.  
    98. function startTimer() {
    99.     timer = setInterval(updateTimer, 1000);
    100. }
    101.  
    102. function pauseTimer() {
    103.     clearInterval(timer);
    104. }
    105.  
    106. function resetTimer() {
    107.     clearInterval(timer);
    108.     hours = 0;
    109.     minutes = 0;
    110.     seconds = 0;
    111.     updateDisplay();
    112. }
    113.  
    114. function updateTimer() {
    115.     seconds++;
    116.     if (seconds == 60) {
    117.         seconds = 0;
    118.         minutes++;
    119.     }
    120.     if (minutes == 60) {
    121.         minutes = 0;
    122.         hours++;
    123.     }
    124.     updateDisplay();
    125.     updateClock();
    126. }
    127.  
    128. function updateDisplay() {
    129.     var displayHours = (hours < 10) ? "0" + hours : hours;
    130.     var displayMinutes = (minutes < 10) ? "0" + minutes : minutes;
    131.     var displaySeconds = (seconds < 10) ? "0" + seconds : seconds;
    132.     document.getElementById("timerDisplay").innerText = displayHours + ":" + displayMinutes + ":" + displaySeconds;
    133. }
    134.  
    135. function updateClock() {
    136.     var hourHand = document.querySelector(".hour-hand");
    137.     var minuteHand = document.querySelector(".minute-hand");
    138.     var secondHand = document.querySelector(".second-hand");
    139.  
    140.     var hourRotation = (hours % 12) * 30 + minutes * 0.5;
    141.     var minuteRotation = minutes * 6 + seconds * 0.1;
    142.     var secondRotation = seconds * 6;
    143.  
    144.     hourHand.style.transform = `translate(-1px, -100%) rotate(${hourRotation}deg)`;
    145.     minuteHand.style.transform = `translate(-1px, -100%) rotate(${minuteRotation}deg)`;
    146.     secondHand.style.transform = `translate(-1px, -100%) rotate(${secondRotation}deg)`;
    147. }
    148.  
    149. document.getElementById("startButton").addEventListener("click", startTimer);
    150. document.getElementById("pauseButton").addEventListener("click", pauseTimer);
    151. document.getElementById("resetButton").addEventListener("click", resetTimer);
    152. script>
    153.  
    154. body>
    155. html>

    案例效果图

  • 相关阅读:
    vscode微博发布案例
    跨境电商测评方式有哪些？
    Android修行手册 - 模板匹配函数matchTemplate详解，从N张图片中找到是否包含五星
    《Cloud Native Data Center Networking》（云原生数据中心网络设计）读书笔记 -- 02 Clos拓扑
    ScanNet数据集和YFCC100m数据集下载
    二蛋赠书五期：《Python数据挖掘：入门、进阶与实用案例分析》
    （Java高级教程）第一章Java多线程基础-第一节5：wait和notify
    Es中索引的创建
    人均瑞数系列，瑞数 6 代 JS 逆向分析
    macOS下更改默认的Python版本
  • 原文地址：https://blog.csdn.net/m0_65992344/article/details/138096820