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

js代码如下

<script>

window.οnlοad=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>