js实现时钟转动

东方青云、

已于 2023-04-21 15:28:51 修改

阅读量1.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：综合案例 JS笔记文章标签： javascript css 前端

于 2023-04-17 13:30:40 首次发布

本文链接：https://blog.csdn.net/Zhang_wang_yun/article/details/130197893

该文章介绍如何利用HTML、CSS和JavaScript创建一个动态的网页时钟。通过CSS定位将表盘和钟针图片组合，并使用JavaScript设置间歇函数，使钟针每秒自动转动，根据时间更新旋转角度。钟针的旋转基于transform:rotate()属性，当秒、分、时达到特定值时会进行进位处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、实现效果

在这里插入图片描述

2、实现原理

我们有四张图片，clock为表盘，hour、minute、second为钟针，四个图片采取定位的方式定在一起；
表盘使用 position: relative;限制里面子级的定位位置，三个钟针使用 position: absolute;定位在表盘里面。
声明一个间歇函数来让时钟每秒自动转动，在里面声明三个变量来定义 transform: rotate();，规定三个钟针旋转多少度。

在这里插入图片描述

3、实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页时钟</title>
    <style>
        * {
   
            box-sizing: border-box;
        }

        .clock {
   
            width: 600px;
            height: 600px;
            background: url(