css3 clock

2024年3月9日 74次阅读 来源: dada86

技术要点

css3的transform:rotate();
js的date()对象;

css

。指针旋转的原点设为底部中心:transform-origin:center bottom;
。旋转引起的锯齿，可以通过设置：translateZ(0)来改善；

js

。使用date对象得出当前时分秒，按照表面计算出旋转的角度旋转即可。
。用cssText属性批量操作样式

    function id(obj){
        return document.getElementById(obj);
    }
    var today=new Date(),
        year = today.getFullYear(),
        month = today.getMonth()+1, //获取当前月份(0-11,0代表1月)
        day = today.getDate(),
        h=today.getHours(),
        m=today.getMinutes(),
        s = today.getSeconds();
        //时
        var hourDeg = h * 30 + m*30/60,
            hourrotate = 'rotate('+hourDeg+'deg)';
            hcss = '-moz-transform:' + hourrotate + ';-o-transform:' + hourrotate + ';-ms-transform:' + hourrotate;
        id('JclockHour').style.cssText = hcss;
        id('JclockHour').style.webkitTransform = hourrotate;//webkit
        //分
        var minuteDeg = m*6 + s*6/60,
        ...

        //秒
        var secondDeg = s*6,
        ...

demo

https://github.com/dandanze/clock

    原文作者：dada86
    原文地址: https://segmentfault.com/a/1190000002645039
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞