JavaScript制作的时钟

最新推荐文章于 2024-07-26 11:41:15 发布

默默花上开

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量787

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/leilei__66/article/details/107298328

版权

JavaScript制作的时钟

分享一个自己制作的时钟。算是低级版的吧，秒钟分钟时钟都是可以获取到时间，根据时间来动的。是动态的。
效果图如下：
在这里插入图片描述
制作之前肯定要先把钟的各个部件画出来，然后加上样式，最后再写上代码。钟面加上背景图会更好看哦！
秒钟的js代码比较好写，就把360度分成60份，每秒动一个6度角即可。
分钟就变成分的时间加上秒的时间，再每分钟动6度角即可。
时钟就变成时的时间加上分的时间，再每小时动30度角即可。
话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        #box{
   
            width: 200px;
            height: 400px;
            margin: 50px auto;
            text-align: center;
            position: relative;
        }
        .round{
   
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 50%;
            background-image: url("image/3.jpg");
            background-size: 210px 210px;
            background-position: -5px -5px;
        }
        .min{
   
            width: 3px;
            height: 80px;
            background-color: rgb(223, 241, 56);
            position: absolute;
            left: 100px;
            top: 20px;
            border-radius: 50% 50% 10% 10%;
            transform-origin: bottom;
            z-index: 97;
        }
        .second{
   
            width: 4px;
            height

最低0.47元/天解锁文章

默默花上开

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
JavaScript制作的时钟

JavaScript制作的时钟分享一个自己制作的时钟。算是低级版的吧，秒钟分钟时钟都是可以获取到时间，根据时间来动的。是动态的。效果图如下：制作之前肯定要先把钟的各个部件画出来，然后加上样式，最后再写上代码。钟面加上背景图会更好看哦！秒钟的js代码比较好写，就把360度分成60份，每秒动一个6度角即可。分钟就变成分的时间加上秒的时间，再每分钟动6度角即可。时钟就变成时的时间加上分的时间，再每小时动30度角即可。话不多说，直接上代码：<!DOCTYPE html><htm
复制链接

扫一扫

专栏目录