HTML制作一个时钟走动效果

最新推荐文章于 2024-08-01 16:15:33 发布

德乐懿

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量859

点赞数 11

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

本文链接：https://blog.csdn.net/qq_33851668/article/details/140132833

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

大家好，今天制作一个时钟走动效果！

先看具体效果：
在这里插入图片描述

一、以下是一个简单的时钟走动效果的实现，使用了HTML、JavaScript和CSS技术。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时时钟</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
    }
    .clock {
        width: 200px;
        height: 200px;
        border: 8px solid #333;
        border-radius: 50%;
        position: relative;
        padding: 20px;
        box-sizing: border-box;
    }
    .clock .number {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        color: #333;
        font-size: 18px;
        font-family: Arial, sans-serif;
    }
    .clock .hand {
        position: absolute;
        width: 50%;
        height: 6px;
        background: black;
        top: 50%;
        transform-origin: 100%;
        transform: rotate(90deg);
        transition: all 0.05s;
        transition-timing-function: cubic-bezier(0.4, 2.3, 0.3, 1);
    }
</style>
</head>
<body>
<div class="clock">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
</div>

<script>
    function setClock() {
        const currentDate = new Date();
        const secondsRatio = currentDate.getSeconds() / 60;
        const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
        const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;

        setRotation(document.querySelector('.second-hand'), secondsRatio);
        setRotation(document.querySelector('.min-hand'), minutesRatio);
        setRotation(document.querySelector('.hour-hand'), hoursRatio);
    }

    function setRotation(element, rotationRatio) {
        element.style.transform = `rotate(${rotationRatio * 360}deg)`;
    }

    setInterval(setClock, 1000);
    setClock(); // initial call to set the clock when the page loads
</script>
</body>
</html>

代码解释：

HTML：定义了一个时钟容器 .clock，里面包含了三个子元素，分别表示时针、分针和秒针。
CSS：定义了时钟的样式，包括大小、边框、位置等。.hand 类用于定义时钟指针的样式。
JavaScript：通过 setClock 函数获取当前时间，并计算秒针、分针和时针的旋转角度。setRotation 函数用于设置每个指针的旋转角度。使用 setInterval 每秒调用 setClock 更新时钟。

效果一般般后面又修改了一下：
当然可以，我们可以增加一些额外的功能来使时钟的走动效果更加复杂和有趣。例如，我们可以添加时针、分针和秒针的阴影效果，使它们看起来更加立体。我们还可以添加一个数字时钟显示，以及一个动态的日期显示。

二、下面是一个更加复杂的时钟走动效果的实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复杂实时时钟</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    .clock {
        position: relative;
        width: 300px;
        height: 300px;
        border: 10px solid #333;
        border-radius: 50%;
        box-shadow: 0 0 20px 0 rgba(0,0,0,0.4);
    }
    .clock .hand {
        position: absolute;
        width: 50%;
        height: 6px;
        background: black;
        top: 50%;
        transform-origin: 100%;
        border-radius: 6px;
        box-shadow: 0 0 10px 2px rgba(0,0,0,0.6);
    }
    .clock .second-hand {
        background-color: red;
    }
    .clock .number {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        color: #333;
        font-size: 24px;
        line-height: 300px;
    }
    .clock-info {
        text-align: center;
        margin-top: 20px;
        font-size: 20px;
    }
</style>
</head>
<body>
<div class="clock">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
    <div class="number">12</div>
</div>
<div class="clock-info">
    <span id="digital-clock"></span>
    <div id="date"></div>
</div>

<script>
    function updateClock() {
        const currentDate = new Date();
        const secondsRatio = currentDate.getSeconds() / 60;
        const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
        const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;

        setRotation(document.querySelector('.second-hand'), secondsRatio);
        setRotation(document.querySelector('.min-hand'), minutesRatio);
        setRotation(document.querySelector('.hour-hand'), hoursRatio);

        updateDigitalClock(currentDate);
        updateDate(currentDate);
    }

    function setRotation(element, rotationRatio) {
        element.style.transform = `rotate(${rotationRatio * 360}deg)`;
    }

    function updateDigitalClock(date) {
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        document.getElementById('digital-clock').textContent = `${hours}:${minutes}:${seconds}`;
    }

    function updateDate(date) {
        const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        const day = days[date.getDay()];
        const month = months[date.getMonth()];
        const year = date.getFullYear();
        document.getElementById('date').textContent = `${day}, ${month} ${date.getDate()}, ${year}`;
    }

    setInterval(updateClock, 1000);
    updateClock(); // initial call to set the clock when the page loads
</script>
</body>
</html>

代码解释：

HTML：添加了一个数字时钟显示 (<span id="digital-clock"></span>) 和一个日期显示 (<div id="date"></div>)。
CSS：增加了 .clock-info 类来样式化数字时钟和日期显示。
JavaScript：
- updateClock 函数现在同时更新指针、数字时钟和日期。
- updateDigitalClock 函数用于更新数字时钟显示。
- updateDate 函数用于更新日期显示。