AnalogClock

<STYLE>
#myCanvas { position: absolute; } #hour,#minute,#second { position: absolute; border-radius: 10px; transform-origin: bottom;} #hour { background: black; width: 20px; height: 150px; top: 156px; left: 354px; opacity: 0.8;} #minute { background: blue; width: 10px; height: 220px; top: 86px; left: 354px; opacity: 0.8;} #second { background: red; width: 6px; height: 243px; top: 66px; left: 354px; opacity: 0.8;}
</STYLE>
<SCRIPT>
setInterval(() => { d = new Date(); //object of date() hr = d.getHours(); min = d.getMinutes(); sec = d.getSeconds(); hr_rotation = 30 * hr + min / 2; //converting current time min_rotation = 6 * min; sec_rotation = 6 * sec; hour.style.transform = `rotate(${hr_rotation}deg)`; minute.style.transform = `rotate(${min_rotation}deg)`; second.style.transform = `rotate(${sec_rotation}deg)`;

var canvas = document.getElementById('myCanvas');

// canvas.style.top = "40px" ; // canvas.style.left = "27%" ;
var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 245;
context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5; context.strokeStyle = '#000000'; context.stroke();
context.font = "45px Courier"; context.strokeText("9", centerX-(1.25*radius) ,centerY); context.strokeText("3", centerX+(1.1*radius) ,centerY); context.strokeText("12",centerX * 0.93 ,centerY-(1.1*radius)); context.strokeText("6", centerX * 0.97 ,centerY+(1.2*radius));

// context.strokeText("1",centerX + (0.8 *radius) ,centerY-(0.9*radius)); // context.strokeText("2",centerX + (0.9 *radius) ,centerY-(0.6 *radius));
}, 1000);
</SCRIPT>
</head><body>

<canvas id="myCanvas" width=700 height=600 >Your browser does not support the HTML canvas tag.</canvas> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> </div></body>

Google Sites

Report abuse