Making round clocks with Html+css+javascript

　　The results of the production are as follows:

　　The dials, ticks and figures are all done with html+css.

The HTML+CSS code is as follows:

<! DOCTYPE html>

JS code is as follows:

var minute;var hour;var second;function Createclock () {var Circle=document.getelementbyid ("Div1"); var smallcircle= document.getElementById ("Div2"), Var angle=0;for (var i=0;i<30;i++) {var clockpanel=document.createelement ("div") ;//clockpanel.setattribute ("width", "500px");//clockpanel.style.bordertop= "1px solid black" Clockpanel.setattribute ("Class", "Clockpanel"); Circle.appendchild (Clockpanel);   Circle.insertbefore (clockpanel,smallcircle); clockpanel.style.transform= "Rotate (" +angle+ "deg)"; angle+=6; if (i%5==0) {clockpanel.style.border= "2px solid Black";}}} function GetDate () {var date=new date (); Hour=date.gethours (); Minute=date.getminutes (); Second=date.getseconds ();} var angle1=6;var angle2=6;var angle3=6;function Secondpointfresh () {//alert ("DHF");//alert ( SecondPoint.style.transform); second++;if (second==60) {second=0;minute++;if (minute==60) {minute=0;hour++;if (hour=        =12) hour=0; }}angle1=second*6;var Secondpoint=document.getelementbyid ("Secondpoint"); secondpoint.style.transform= "rotate("+angle1+" deg) "; angle2= (minute*6); var Minutepoint=document.getelementbyid (" Minutepoint "); minutepoint.style.transform= "Rotate (" +angle2+ "deg)" angle3= ((hour%12) *30) + (minute*0.5); var hourpoint= document.getElementById ("Hourpoint"); hourpoint.style.transform= "Rotate (" +angle3+ "deg)";} Createclock (); GetDate (); Secondpointfresh (); SetInterval ("Secondpointfresh ()", 1000);

　　

Making round clocks with Html+css+javascript