JS实现简易刻度时钟

最新推荐文章于 2023-08-16 14:59:39 发布

liujian_laohan

最新推荐文章于 2023-08-16 14:59:39 发布

阅读量1.7k

点赞数

文章标签： javascript 时钟

本文链接：https://blog.csdn.net/liujian573281/article/details/61206135

版权

这里写图片描述

如图所示，利用JS实现简易的刻度时钟；
原理如下：利用60等份的li进行布局，li两两之间的间隔为6deg，把基点定在圆心上，使得li圆形分布。然后另外设置三条针线的样式的位置，基点同样定在圆心上，然后秒针每秒动6deg，分针每秒动1/60deg，时针每秒动1/3600deg。
布局代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css" id="sty">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #wrap{
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                border-radius: 50%;
                margin: 20px auto;
                position: relative;
            }
            #wrap ul{

最低0.47元/天解锁文章

liujian_laohan

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
JS实现简易刻度时钟

如图所示，利用JS实现简易的刻度时钟；原理如下：利用60等份的li进行布局，li两两之间的间隔为6deg，把基点定在圆心上，使得li圆形分布。然后另外设置三条针线的样式的位置，基点同样定在圆心上，然后秒针每秒动6deg，分针每秒动1/60deg，时针每秒动1/3600deg。布局代码如下：<!DOCTYPE html><html> <head> <meta char
复制链接

扫一扫