秒表计时器

最新推荐文章于 2024-10-01 23:20:42 发布

疯狂的rabbit.

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量338

点赞数 7

分类专栏： Web前端文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/m0_61665967/article/details/138139285

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、案例要求

1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时，
3.点击暂停，面板停止
4.点击重置，计时面板重新为0
提示：采用定时器及定义计数器变量完成，定时器间隔为1s

二、具体代码

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../秒表计时器.css">
<script src="../秒表计时器.js"></script>
<title>秒表计时器</title>

</head>
<body>
 
<div class="container">
    <div id="timerDisplay">00:00:00</div>
    <div class="clock">
        <div class="hand hour-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="hand second-hand"></div>
        <div class="center-dot"></div>
    </div>
    <div class="buttons">
        <button id="startButton" class="button">开始</button>
        <button id="pauseButton" class="button">暂停</button>
        <button id="resetButton" class="button">重置</button>
    </div>
</div>
 
</body>
</html>

JavaScript：

var timer;
var hours = 0;
var minutes = 0;
var seconds = 0;
 
function startTimer() {
    timer = setInterval(updateTimer, 1000);
}
 
function pauseTimer() {
    clearInterval(timer);
}
 
function resetTimer() {
    clearInterval(timer);
    hours = 0;
    minutes = 0;
    seconds = 0;
    updateDisplay();
}
 
function updateTimer() {
    seconds++;
    if (seconds == 60) {
        seconds = 0;
        minutes++;
    }
    if (minutes == 60) {
        minutes = 0;
        hours++;
    }
    updateDisplay();
    updateClock();
}
 
function updateDisplay() {
    var displayHours = (hours < 10) ? "0" + hours : hours;
    var displayMinutes = (minutes < 10) ? "0" + minutes : minutes;
    var displaySeconds = (seconds < 10) ? "0" + seconds : seconds;
    document.getElementById("timerDisplay").innerText = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}
 
function updateClock() {
    var hourHand = document.querySelector(".hour-hand");
    var minuteHand = document.querySelector(".minute-hand");
    var secondHand = document.querySelector(".second-hand");
 
    var hourRotation = (hours % 12) * 30 + minutes * 0.5;
    var minuteRotation = minutes * 6 + seconds * 0.1;
    var secondRotation = seconds * 6;
 
    hourHand.style.transform = `translate(-1px, -100%) rotate(${hourRotation}deg)`;
    minuteHand.style.transform = `translate(-1px, -100%) rotate(${minuteRotation}deg)`;
    secondHand.style.transform = `translate(-1px, -100%) rotate(${secondRotation}deg)`;
}
 
document.getElementById("startButton").addEventListener("click", startTimer);
document.getElementById("pauseButton").addEventListener("click", pauseTimer);
document.getElementById("resetButton").addEventListener("click", resetTimer);

CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    text-align: center;
}
#timerDisplay {
    font-size: 36px;
    margin-bottom: 20px;
}
.clock {
    width: 200px;
    height: 200px;
    border: 8px solid #131313;
    border-radius: 50%;
    position: relative;
    margin-bottom: 20px;
}
.hand {
    width: 2px;
    background-color: #1b1c1c;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
}
.hour-hand {
    height: 50px;
}
.minute-hand {
    height: 70px;
}
.second-hand {
    height: 80px;
    background-color: rgb(71, 239, 20);
}
.center-dot {
    width: 8px;
    height: 8px;
    background-color: #191a1ab2;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.buttons {
    display: flex;
    justify-content: center;
}
.button {
    background-color: #17d583;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 10px;
}