Saw a HTML5 wrote the clock
<!doctype>window. onload=function(){ varCanvas=document.getelementbyid ("MyCanvas"); varC=canvas.getcontext ("2d");//Getcontentext returns a drawing environment where 2d is currently the only valid character referring to the vardrawclock=function() {c. Clearrect (0,0,500,500);//clear the canvas, varnow =New Date(); varSec=now.getseconds (); var min=now.getminutes (); varHour=now.getHours (); Hour=hour+min/60; Hour=hour>12?hour-12:hour;//21:36:21 Turn 24-hour 12-hour clock//dialc.linewidth=10; C. strokestyle= "Blue"; C.Beginpath (); C. Arc (250,250,200,0,360,false); C.Closepath (); C.stroke (); //1. Scale//1.1 Time degreeC.linewidth=7; C. strokestyle= "#000"; for(vari=0;i<12;i++) {C.Save (); C. Translate (250,250); C. Rotate (I*30*math.PI/180); C.Beginpath (); C. MoveTo (0,-170); C. LineTo (0,-190); C.Closepath (); C.stroke (); C.Restore (); } //1.2 minute scaleC.linewidth=5; C. strokestyle= "#000"; for(vari=0;i<60;i++) {C.Save (); C. Translate (250,250); C. Rotate (I*6*math.PI/180); C.Beginpath (); C. MoveTo (0,-170); C. LineTo (0,-180); C.Closepath (); C.stroke (); C.Restore (); } //2.1 HourC.Save (); C. linewidth=7; C. strokestyle= "#000"; C. Translate (250,250); C. Rotate (Hour*30*math.PI/180); C.Beginpath (); C. MoveTo (0,-100); C. LineTo (0,10); C.Closepath (); C.stroke (); C.Restore (); //2.2 minute handC.Save (); C. linewidth=5; C. strokestyle= "#333"; C. Translate (250,250); C. Rotate (min*6*math.PI/180); C.Beginpath (); C. MoveTo (0,-140); C. LineTo (0,15); C.Closepath (); C.stroke (); C.Restore (); //2.3-Second pinC.Save (); C. linewidth=2; C. strokestyle= "Red"; C. Translate (250,250); C. Rotate (SEC * 6 *math.PI/180); C.Beginpath (); C. MoveTo (0,-160); C. LineTo (0,20); C.Closepath (); C.stroke (); //Add a circle to the centerC.Beginpath (); C. Arc (0,0,5,0,360,false); C.Closepath (); C. fillstyle= "Green"; C.Fill (); //Add a dot to the front of the second handC.Beginpath (); C. Arc (0,-140,10,0,360,false); C.Closepath (); C. fillstyle= "Red"; C.Fill (); C.Restore (); //3 Off-disk moment numbers for(vari=1;i<13;i++) {C.Save (); C. linewidth=5; C. strokestyle= "Blue"; C. font= "40px blackbody"; C. Translate (250,250); C. Rotate (I*30*math.PI/180); C.Beginpath (); C. Stroketext ("" +i,-20,-210); C.Closepath (); C.stroke (); C.Restore (); }} drawclock (); SetInterval (Drawclock, 1000); } </script>The Junk browser does not support canvas labels</canvas> </body>A clock written by HTML5