Karvitt
(Formerly Finotax)

Home
Home Page
Tax
Income Tax & Other Taxes
Forms
Fillable Forms
Finance
Personal Finance
PPF
PPF Calculator, forms, Rules & Info
SSY
SSY Calculator, form, Rules & Info
Widgets
Complete code / Embed code
Misc.
Misc. scripts, calculators & utilities

Home ❯ Widgets ❯ Complete Code ❯ HTML5 Analog Clock

Complete Code of HTML5 Analog Clock

What is Complete Code of HTML5 Analog Clock Widget?

The Complete Code of the widget comprises of HTML Code + CSS Code + Javascript Code. You can use the code to host the widget on your site / blog. You may also freely amend or customize the code without any restrictions.

We shall be glad if you give credit to this site by adding <a href='https://karvitt.com/widgets/' >Code provided by Karvitt.com</a> below the widget on your site / blog. You may amend the link text .

Functional Widget Demo

Analog Clock Code

<script>
 window.onload = function () {
 setInterval(showClock, 1000);
 function showClock() {
 // define canvas and its context.
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var date = new Date;
 var angle;
 var secHandLength = 40;
 // clear everything on the canvas. re-draw new elements every second.
 ctx.clearRect(0, 0, canvas.width, canvas.height); 
 OUTER_DIAL1();
 OUTER_DIAL2();
 CENTER_DIAL();
 MARK_THE_HOURS();
 MARK_THE_SECONDS();
 SHOW_SECONDS();
 SHOW_MINUTES();
 SHOW_HOURS();
 function OUTER_DIAL1() {
 ctx.beginPath();
 ctx.arc(canvas.width / 0, canvas.height / 0, secHandLength + 10, 0, Math.PI * 2);
 ctx.strokeStyle = '#fff';
 ctx.stroke(); }
 function OUTER_DIAL2() {
 ctx.beginPath();
 ctx.arc(canvas.width / 0, canvas.height / 0, secHandLength + 7, 0, Math.PI * 2);
 ctx.strokeStyle = '#ddd';
 ctx.stroke(); }
 function CENTER_DIAL() {
 ctx.beginPath();
 ctx.arc(canvas.width / 2, canvas.height / 2, 2, 0, Math.PI * 2);
 ctx.lineWidth = 3;
 ctx.fillStyle = '#333';
 ctx.strokeStyle = '#f00';
 ctx.stroke(); }
 function MARK_THE_HOURS() {
 for (var i = 0; i < 12; i++) {
 angle = (i - 3) * (Math.PI * 2) / 12; // the angle to mark.
 ctx.lineWidth = 1; // hand width.
 ctx.beginPath();
 var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
 var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
 var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 7));
 var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 7));
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.strokeStyle = '#000';
 ctx.stroke(); } }
 function MARK_THE_SECONDS() {
 for (var i = 0; i < 60; i++) {
 angle = (i - 3) * (Math.PI * 2) / 60; // the angle to mark.
 ctx.lineWidth = 2; // hand width.
 ctx.beginPath();
 var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
 var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
 var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 30));
 var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30));
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.strokeStyle = '#666';
 ctx.stroke(); } }
 function SHOW_SECONDS() {
 var sec = date.getSeconds();
 angle = ((Math.PI * 2) * (sec / 60)) - ((Math.PI * 2) / 4);
 ctx.lineWidth = 0.5; // hand width.
 ctx.beginPath();
 // start from center of the clock.
 ctx.moveTo(canvas.width / 2, canvas.height / 2); 
 // draw the length.
 ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength),
 canvas.height / 2 + Math.sin(angle) * secHandLength);
 // draw the tail of the seconds hand.
 ctx.moveTo(canvas.width / 2, canvas.height / 2); // start from center.
 // draw the length.
 ctx.lineTo((canvas.width / 2 - Math.cos(angle) * 0),
 canvas.height / 2 - Math.sin(angle) * 0);
 ctx.strokeStyle = '#f00'; // color of the hand.
 ctx.stroke(); }
 function SHOW_MINUTES() {
 var min = date.getMinutes();
 angle = ((Math.PI * 2) * (min / 60)) - ((Math.PI * 2) / 4);
 ctx.lineWidth = 1.5; // hand width.
 ctx.beginPath();
 ctx.moveTo(canvas.width / 2, canvas.height / 2); // start from center.
 // draw the length.
 ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.1), 
 canvas.height / 2 + Math.sin(angle) * secHandLength / 1.1);
 ctx.strokeStyle = '#666'; // color of the hand.
 ctx.stroke(); }
 function SHOW_HOURS() {
 var hour = date.getHours();
 var min = date.getMinutes();
 angle = ((Math.PI * 2) * ((hour * 5 + (min / 60) * 5) / 60)) - ((Math.PI * 2) / 4);
 ctx.lineWidth = 1.5; // hand width.
 ctx.beginPath();
 ctx.moveTo(canvas.width / 2, canvas.height / 2); // start from center.
 // draw the length.
 ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.5), 
 canvas.height / 2 + Math.sin(angle) * secHandLength / 1.5);
 ctx.strokeStyle = '#000'; // color of the hand.
 ctx.stroke(); } } }
// Widget Code by https://karvitt.com/widgets/
</script>

<div style='border:2px solid #000;width:80px;height:80px;padding:10px;background:linear-gradient(#eee,#fff);border-radius:10px'><canvas id='canvas' width='80' height='80'></canvas></div>
</body>

Updated : Aug 23, 2020

Karvitt Ⓒ 2020

Sitemap Privacy Contact