JavaScript制作的时钟

最新推荐文章于 2024-07-02 12:22:49 发布

默默花上开

最新推荐文章于 2024-07-02 12:22:49 发布

阅读量816

点赞数 2

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

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

版权

本文分享了一种用JavaScript创建动态时钟的方法。时钟包括秒钟、分钟和时钟的实时更新，通过将角度分配给时间单位来实现动态效果。在制作过程中，首先绘制钟的各个部分并设置样式，然后添加背景图片以提升视觉效果。代码中，秒钟每秒转动6度，分钟结合秒数每分钟转动6度，时钟结合分钟数每小时转动30度。

摘要由CSDN通过智能技术生成

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