动态时钟实现

一、实现思路概述

 1. 通过HTML搭建基本时钟的页面结构(这里将时钟图片资源作为背景图)
 2. 将时钟背景和时/分/秒图片进行CSS位置居中放置
 3. 通过JS按以下步骤实现动态刷新时钟页面
 	- 获取时钟、时、分、秒标签
 	- 获取当前日期,并初始化时分秒变量
 	- 定义时钟的时、分、秒进位逻辑函数
 	- 初始化闹钟(设置时分秒指针旋转角度),显示闹钟
 	- 设置定时器间隔1秒刷新一次时、分、秒指针角度

二、源代码(包含HTML、CSS、JS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字时钟</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #clock{
            width: 600px;
            height: 600px;
            margin: 50px auto;
            background-image: url("./images/clock.jpg");
            position: relative;
            display: none;
        }
        #hour, #minute, #second{
            width: 30px;
            height: 600px;
            position: absolute;
            left: 50%;
            margin-left: -15px;
        }
        #hour{
             background-image: url("./images/hour.png");
        }
        #minute{
            background-image: url("./images/minute.png");
        }
        #second{
            background-image: url("./images/second.png");

        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script>
        var clock = document.getElementById('clock');
        var secondPointer = document.getElementById('second');
        var minutePointer = document.getElementById('minute');
        var hourPointer = document.getElementById('hour');
        var now = new Date();
        var second = now.getSeconds(), minute = now.getMinutes(), hour = now.getHours() % 12;
        var secondAngle = 0, minuteAngle = 0, hourAngle = 0;

        function setClock(){
            second += 1;
            if(second === 60){
                second = 0;
                minute += 1;
                if(minute === 60){
                    minute = 0;
                    hour += 1;
                    if(hour === 12){
                        hour = 0;
                    }
                }
            }
            secondAngle = second * 6;
            minuteAngle = minute * 6 + second / 60;
            hourAngle = hour * 30 + minute / 60 + second / 3600;

            secondPointer.style.transform = `rotate(${secondAngle}deg)`;
            minutePointer.style.transform = `rotate(${minuteAngle}deg)`;
            hourPointer.style.transform = `rotate(${hourAngle}deg)`;
        }
        // 初始化时钟
        setClock();
        clock.style.display = 'block';

        setInterval(setClock, 1000);
    </script>
</body>
</html>

三、图片资源与效果截图

1. 图片资源

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 效果截图

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是JavaScript实现动态时钟的代码: HTML: ```html <!DOCTYPE html> <html> <head> <title>动态时钟</title> <style> body { background-color: #f1f1f1; } .clock { margin: 50px auto; width: 200px; height: 200px; border-radius: 50%; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); position: relative; } .hour-hand { position: absolute; top: 50%; left: 50%; width: 6px; height: 50px; background-color: black; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: hourAnim 43200s linear infinite; } .minute-hand { position: absolute; top: 50%; left: 50%; width: 4px; height: 80px; background-color: black; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: minuteAnim 3600s linear infinite; } .second-hand { position: absolute; top: 50%; left: 50%; width: 2px; height: 100px; background-color: red; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: secondAnim 60s linear infinite; } @keyframes hourAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes minuteAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes secondAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } .clock-center { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: black; border-radius: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="clock"> <div class="hour-hand"></div> <div class="minute-hand"></div> <div class="second-hand"></div> <div class="clock-center"></div> </div> <script src="clock.js"></script> </body> </html> ``` JavaScript: ```javascript function updateClock() { const now = new Date(); const hour = now.getHours(); const minute = now.getMinutes(); const second = now.getSeconds(); const hourDegree = (hour % 12) * 30 + (minute / 60) * 30; const minuteDegree = minute * 6; const secondDegree = second * 6; document.querySelector(".hour-hand").style.transform = `translateX(-50%) rotate(${hourDegree}deg)`; document.querySelector(".minute-hand").style.transform = `translateX(-50%) rotate(${minuteDegree}deg)`; document.querySelector(".second-hand").style.transform = `translateX(-50%) rotate(${secondDegree}deg)`; } setInterval(updateClock, 1000); ``` 这个代码通过 `setInterval` 方法每秒更新一次时钟, `updateClock` 函数获取当前时间并计算出每个指针应该旋转的角度,然后通过设置 `transform` 属性来旋转指针。其中,时针每小时旋转30度,分针每分钟旋转6度,秒针每秒钟旋转6度。 在HTML文件中,我们定义了一个时钟的容器 `.clock`,并在其中添加了时针、分针、秒针和中心点。每个指针都有自己的类名和CSS样式,也有自己的动画效果。其中,时针的动画总时长为43200秒(12小时),分针的动画总时长为3600秒(1小时),秒针的动画总时长为60秒(1分钟)。这样可以让指针在一定的时间内完成一圈的旋转。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值