Custom Clock

Clock Text

Customise the clock and grab the custom code


Setting Name

Hour Hand
Hour End
Minute Hand
Minute End
Second Hand
Second End

Copy and paste this:

For example, open Notepad, paste this code in and save as "clock.html"

<!DOCTYPE html>
<!--Developed by Matt Tiernan.
Please credit if copying this code for your own use.
For info see -->

<body onload='startTime()'>

<canvas id='clockcnv'
width='666' height='666'
style=' padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; '> </canvas> <script type='text/javascript'> function startTime(){ today=new Date(); h=today.getHours(); m=today.getMinutes(); s=today.getSeconds(); ord = ''; if (h < 12){ ord = 'AM'; }else{ ord = 'PM'; if (h > 12){ h-=12; } } //add a zero in front of numbers<10 m=checkTime(m); s=checkTime(s); // Pass time to canvas and draw cnv(h,m,s); // Repeat this at intervals <~ 1000ms t=setTimeout(function(){startTime()},1000); } function cnv(hr,mn,sc){ // SETUP - NOTE: ALL DERIVED FROM CANVAS WID/HGT var c = document.getElementById('clockcnv'); var ctx = c.getContext('2d'); cwid = c.width; chgt = c.height; midx = cwid/2; midy = chgt/2; // Len is the universal scale factor len = 0.95*Math.min(midx,midy); // CLOCK FACE ctx.beginPath(); ctx.moveTo(midx+len,midy); ctx.arc(midx,midy,len,0,2*Math.PI); // HOUR HAND lenf = 0.5; //Angle = hr & factor of mn with canvas rotation factor of 3pi/2 angh = ((hr + (mn/60)) / 12) * (2*Math.PI) + (3*Math.PI/2); // HOUR HAND END // MINUTE HAND lenf = 0.75; angm = (mn/60)* (2*Math.PI) + (3*Math.PI/2); // MINUTE HAND END // SECOND HAND lenf = 0.9; angs = (sc/60)* (2*Math.PI) + (3*Math.PI/2); // MINUTE HAND END // SMALL CIRCLE TO COVER ENDS OF HANDS ctx.beginPath(); ctx.lineWidth = 1; ctx.moveTo(midx,midy); // Len/40 is width of HR hand (the widest) ctx.arc(midx,midy,(len/40),0,2*Math.PI); ctx.stroke(); ctx.fillStyle = '#000000'; ctx.fill(); // TEXT } function checkTime(i){ if (i<10){ i='0' + i; } return i; } </script> <br> <div> <a style='text-align:center; font-family:verdana; font-size:xx-large;' href=''> Create your own custom clock at Eclectic App Development!</a> </div> </body> </html>