原生JS+css3实现时钟效果，源码奉上

作者 : 开心源码本文共2199个字，预计阅读时间需要6分钟发布时间： 2022-05-12 共212人阅读

效果如下：

代码很简单，我就直接上代码了：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin: 0;padding: 0;            }            .bp{                width: 200px;height: 200px;border: 1px solid black;border-radius: 100%;margin: 50px auto;position: relative;            }            .kedu{                width: 1px;height: 10px;background: black;position: absolute;left: 100px;top: 0px;transform-origin: 0px 100px;            }            .shuzi{                position: absolute;width: 10px;font-size: 10px;height: 85px;transform-origin:bottom ;top: 15px;left: 95px;            }            .scd{                width: 1px;height: 70px;position: absolute;left: 100px;top: 30px;transform-origin:bottom;background: red;            }            .min{                width: 2px;height: 60px;position: absolute;left: 99px;top: 40px;transform-origin:bottom;background: black;            }            .hour{                width: 3px;height: 50px;position: absolute;left: 98.5px;top: 50px;transform-origin:bottom;background: black;            }        </style>    </head>    <body>        <div class="bp">            <div class="hour"></div>            <div class="min"></div>            <div class="scd"></div>        </div>    </body>    <script type="text/javascript">        var bp = document.querySelector(".bp");        var h = document.querySelector(".hour");        var m = document.querySelector(".min");        var s = document.querySelector(".scd");        var date = new Date();        var hours = date.getHours();        var min = date.getMinutes();        var scd = date.getSeconds();        var hk = hours*30+min*0.5;        h.style.transform = "rotateZ("+hk+"deg)";        m.style.transform = "rotateZ("+min*6+"deg)";        s.style.transform = "rotateZ("+scd*6+"deg)";        for (var i = 0 ; i < 60 ; i++) {            var kd = document.createElement("div");            kd.className="kedu";            bp.appendChild(kd);        }        for (var i = 0 ; i < 12 ; i++) {            var shuzi = document.createElement("div");            shuzi.className="shuzi"            shuzi.style.transform = "rotateZ("+(i+1)*30+"deg)";            var num = document.createElement("div");            num.innerHTML = i+1;            num.style.textAlign = "center";            num.style.transform = "rotateZ("+(i+1)*-30+"deg)";            shuzi.appendChild(num)            bp.appendChild(shuzi)        }        function keduchi(){            var kds = document.querySelectorAll(".kedu");            for (var i = 0 ; i < kds.length ; i++) {                kds[i].style.transform = 'rotateZ('+6*i+'deg)';                if (i%5==0) {                    kds[i].style.height = 15+"px"                }            }        }        keduchi()        var md = 0;        setInterval(function(){            var date2 = new Date();            var ss = date2.getSeconds();            if (ss%60==0) {                md++;                var mds = min*6+6*md;                m.style.transform="rotateZ("+mds+"deg)";                var hds = hk+0.5*md;                h.style.transform="rotateZ("+hds+"deg)";            }            s.style.transform="rotateZ("+ss*6+"deg)";        },1000)    </script></html>

—————END—————

喜欢本文的朋友们，欢迎关注公众号张培跃，收看更多精彩内容

代码很简单我就文章朋友们

说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 原生JS+css3实现时钟效果，源码奉上

分享到：