今天做项目用到了时钟插件，在这里分享给大家用用

js代码如下

<script>

window.onload=function(){

//            时钟

            var clock=document.getElementsByClassName("clock1")[0];

            draw();

            var time=new Date();

            var h=drawpointer(4,45,"#fff",time.getHours()*30+time.getMinutes()*6/12);

            var m=drawpointer(3,65,"#fff",time.getMinutes()*6);

            var s=drawpointer(2,80,"#fff",time.getSeconds()*6);

            setInterval(function(){

                var time=new Date();

                h.style.transform="rotate("+(time.getHours()*30+time.getMinutes()*6/12)+"deg)";

                m.style.transform="rotate("+time.getMinutes()*6+"deg)";

                s.style.transform="rotate("+time.getSeconds()*6+"deg)"

            },1000);

            function draw(){

                for(var i=0;i<60;i++){

                    var newdiv=document.createElement("div");

                    var m,h;

                    if(i%5==0){

                        m=3;

                        h=16;

                    }else{

                        m=1;

                        h=10;

                    }

                    newdiv.style.cssText="width:"+m+"px;height:"+h+"px;background:#fff;position:absolute;left:0;top:0;transform:translate("+(240-m)/2+"px,0) rotate("+i*6+"deg);transform-origin:"+m/2+"px 120px"

                    clock.appendChild(newdiv);

                }

            }

            function drawpointer(w,h,b,d){

                var newdiv=document.createElement("div");

//                中间的圆

                var newd=document.createElement("div");

                newd.style.cssText="width:10px;height:10px;border-radius:50%;background: radial-gradient(circle at 50% 50%,#fff,#fff);position:absolute;left:"+(240-10)/2+"px;top:"+(240-10)/2+"px;"

                newdiv.style.cssText="width:"+w+"px;height:"+h+"px;position:absolute;left:"+(240-w)/2+"px;top:"+(120-h)+"px;background:"+b+";transform:rotate("+d+"deg);transform-origin:center bottom;";

                clock.appendChild(newdiv);

                clock.appendChild(newd);

                return newdiv;
            }

}

</script>

html代码如下

<div class="clock1"></div>