Custom Clock

Clock Text


Customise the clock and grab the custom code

 
SETTING NAME

Setting Name

ON
SIZE (SOME OPTIONS)
COLOUR
 
 
 
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>
<html>
<!--Developed by Matt Tiernan.
Please credit if copying this code for your own use.
For info see http://eclecticapp.xyz -->

<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=' http://eclecticapp.xyz'> Create your own custom clock at Eclectic App Development!</a> </div> </body> </html>