简易时钟动画

xi4oh4o 发布于2019-08-20 18:30 / 2068人阅读

摘要：创建一个的对象并且用三个变量分别表示小时分钟秒并存放到一个函数中。

这就是我说的简易的表盘，有点简陋了 QaQ

刚学习的时钟动画，觉得还有很多东西要去学习，有时候发现代码真是很神奇的。
首先呢我们需要有一个圆的轮廓，这个就是定义一个div宽和高相同，然后用到了一个css3的属性 border-radius：50% 50% 当然只要是大于等于50%都是可以成圆的。
轮廓做出来后我们需要插入60个表盘上的刻度。这个时候有两种办法

1.可以用dom进行插入

var oDial=document.getElementById("dial");
    for(var i=0;i<60;i++) {
        var oLi=document.createElement("li");
        oDial.appendChild(oLi);
        
    }

2.可以用html结构插入

   var Lis="";
    for(var i=0;i<60;i++) {
        Lis+="";
    }
    oDial.innerHTML=Lis;

表盘刻度插入以后呢我们需要对这60个刻度进行定位写出旋转的原点然后每个刻度都在上一个刻度的基础上多旋转6° 我们需要写出表针用三个div分别表示时针分针秒针并且这三个需要在一个点上进行旋转那就是三个div的底部

然后我们应该知道现在所处的时间是多少这是我们需要用到js了。
创建一个Date的对象并且用三个变量分别表示小时分钟秒并存放到一个函数中。

        var now=new Date();
        var hour=now.getHours();
        var second=now.getSeconds();
        var minute=now.getMinutes();

当得到时间以后得到这三个dom对象

    var oSecond=document.getElementById("second");
    var oMinute=document.getElementById("minute");
    var oHour=document.getElementById("hour");

当得到这三个dom对象时需要进行转动用到transform：rotate（度数）

        oSecond.style.transform="rotate("+ second * 6+"deg)";
        oMinute.style.transform="rotate("+ minute*6 +"deg)";
        oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";

最后封装好的函数run的代码如下：
function run() {

        var now=new Date();
        var hour=now.getHours();
        var second=now.getSeconds();
        var minute=now.getMinutes();
        oSecond.style.transform="rotate("+ second * 6+"deg)";
        oMinute.style.transform="rotate("+ minute*6 +"deg)";
        oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";

这样只能转动一次我们需要开一个定时器把run这个函数放进去

setInterval(run,1000);

html代码：

css代码

 * {
            padding: 0;
            margin: 0;
        }
        #clock {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid ;
            margin: 200px auto;
            position: relative;
        }
        li {
            list-style: none;
            width: 2px;
            height: 6px;
            background: black;
            position: absolute;
            left: 100px;
            top: 0;
            transform-origin: 0 100px;
        }
        #dial li:nth-child(5n+1) {
            height: 10px;
        }
        #clock div {
            transform-origin: bottom;
        }
        #hour{
            width: 4px;
            height: 40px;
            background: #000000;
            position: absolute;
            left: 98px;
            top: 60px;
        }
        #minute{
            width: 4px;
            height: 60px;
            background: #999;
            position: absolute;
            left: 98px;
            top: 40px;
        }
        #second{
            width: 2px;
            height: 70px;
            background: #ff0000;
            position: absolute;
            left: 99px;
            top: 30px;
        }

全部代码:




    
    Title

写的不好还望各位指出错误共同进步。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84600.html

简易时钟动画

摘要：创建一个的对象并且用三个变量分别表示小时分钟秒并存放到一个函数中。这就是我说的简易的表盘，有点简陋了 QaQshowImg(https://segmentfault.com/img/bVR4AT?w=368&h=332); 刚学习的时钟动画，觉得还有很多东西要去学习，有时候发现代码真是很神奇的。首先呢我们需要有一个圆的轮廓，这个就是定义一个div宽和高相同，然后用到了一个css3的...

cangck_X 2019-08-01 17:18 评论0 收藏0
简易时钟动画

摘要：创建一个的对象并且用三个变量分别表示小时分钟秒并存放到一个函数中。这就是我说的简易的表盘，有点简陋了 QaQshowImg(https://segmentfault.com/img/bVR4AT?w=368&h=332); 刚学习的时钟动画，觉得还有很多东西要去学习，有时候发现代码真是很神奇的。首先呢我们需要有一个圆的轮廓，这个就是定义一个div宽和高相同，然后用到了一个css3的...

suosuopuo 2019-08-29 13:05 评论0 收藏0
canvas 简易时钟

摘要：简易版时钟时钟清除画布，每次执行重新绘图，解决时钟模糊，边框有锯齿。 canvas 简易版时钟 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 时钟 *{ margin:0; padding:0; } bod...

高胜山 2019-08-20 11:28 评论0 收藏0
canvas 简易时钟

摘要：简易版时钟时钟清除画布，每次执行重新绘图，解决时钟模糊，边框有锯齿。 canvas 简易版时钟 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 时钟 *{ margin:0; padding:0; } bod...

sugarmo 2019-08-01 15:48 评论0 收藏0
canvas应用一：简易时钟

摘要：时钟的实现主要是应用上下文的简单变换文本添加及周期性调用方法。在绘制表盘及时针过程注意使用及方法添加用以保存或返回上一个画布设置属性。思路编写两个构造函数，分别代表表盘和时针，最后利用函数加以实现。写在之前 canvas 元素中提供了看似简单的绘图方法，但仔细挖掘，可以以此做出非常复杂而漂亮的图形。随着 API 的逐渐完善，我相信自己能进行更多有意思的尝试。时钟的 canvas ...

whinc 2019-08-21 11:28 评论0 收藏0