JavaScript writes round digital clocks by object-oriented

Effect, the code is as follows

<! DOCTYPE html>. Hour{height:200px;width:200px;position:relative;top:100px;left:100px;border-radius:50%; BORDER:3PX Solid #666666;display:inline-block}. Minute{height:200px;width:200px;position:relative;top:100px;left:100px;border-radius:50%; BORDER:3PX Solid #666666;display:inline-block}. Second{height:200px;width:200px;position:relative;top:100px;left:100px;border-radius:50%; BORDER:3PX Solid #666666;display:inline-block}. Innerleft{height:178px;width:89px;position:absolute;top:1px;left:1px;border-radius:178px 0 0178px; Border-bottom:10px solid #009bff; border-top:10px solid #009bff; border-left:10px solid #009bff; background:white; transform-origin:100% 50%;} . Innerright{height:178px;width:89px;position:absolute;top:1px;right:1px;border-radius:0 178px 178px 0; border-bottom:10px solid #009bff, border-top:10px solid #009bff, border-right:10px solid #009bff; background:white; transform-origin:0 50%; Transform:rotate (-180deg);} . Cover{position:absolute;height:200px;width:100px;border-radius:198px 0 0 198px;background:white;z-index:1} input{position:absolute;top:60px;left:120px;} Span{height:20px;width:80px;line-Height:20px;display:block;position:absolute;;            top:90px; Z-index:2; left:60px;font-size:16px;font-weight:bold;text-Align:center}</style>window.onload=function(){            functionRoll (progress,n) {Innerleft= Document.queryselector ('. ') + This. ClassName + '. Innerleft '); Innerright= Document.queryselector ('. ') + This. ClassName + '. Innerright '); Span= Document.queryselector ('. ') + This. ClassName + ' span '); Cover= Document.queryselector ('. ') + This. ClassName + '. Cover '); Span.innerhtml= Progress+ ' + This. ClassName; if(Progress*n < 180) {Console.log ( This. ClassName); Cover.style.display= ' Block '; InnerLeft.style.transform= ' Rotate (' + (progress*n) + ' deg) '; InnerRight.style.transform= ' Rotate (' + (progress*n-180) + ' deg) '; }                Else{Console.log ( This. ClassName); Cover.style.display= ' None '; InnerLeft.style.transform= ' Rotate (' + (progress*n) + ' deg) '; InnerRight.style.transform= ' Rotate (0deg) '; }            }            varT=setinterval (function(){                varTime=NewDate (); varhours=time.gethours (); varminutes=time.getminutes (); varseconds=time.getseconds (); varHour=document.queryselector ('. Hour ')); varMinute=document.queryselector ('. Minute ')); varSecond=document.queryselector ('. Second ')); Roll.call (Hour,hours,30); Roll.call (Minute,minutes,6); Roll.call (Second,seconds,6); },1000); }    </script></body>
In the programming process to use tansform to achieve dynamic effects, but there will be a return to zero reverse, and finally no use, and then go to explore it.
JavaScript writes round digital clocks by object-oriented