Analogue Clock

<canvas id="canvas" width="150" height="150"></canvas>

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 = 60;

// 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 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 = '#466B76';
                    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 = 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 / 30));
                    var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30));

ctx.moveTo(x1, y1);
                    ctx.lineTo(x2, y2);

ctx.strokeStyle = '#C4D1D5';
                    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) * 20),
                    canvas.height / 2 - Math.sin(angle) * 20);

ctx.strokeStyle = '#586A73';        // 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 = '#999';  // 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();
            }
        }
    }

Colourful Analogue Clock

<canvas id="canvas" width="150" height="150" style="background-color:transparent;">
</canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#F00');
  grad.addColorStop(0.5, 'blue');
  grad.addColorStop(1, '#FFF');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#FFF';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}

Big Clock

var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));

var cx = 100;
var cy = 100;

function shifter(val) {
  return [val, cx, cy].join(' ');
}

var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));

for(var i = 1; i <= 12; i++) {
  var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  el.setAttribute('x1', '100');
  el.setAttribute('y1', '30');
  el.setAttribute('x2', '100');
  el.setAttribute('y2', '40');
  el.setAttribute('transform', 'rotate(' + (i*360/12) + ' 100 100)');
  el.setAttribute('style', 'stroke: #ffffff;');
  document.querySelector('svg').appendChild(el);
}

Digital Clock

Sample

Black Digi Clock

<table class="ta" border="0" align="center" bgcolor="#c0c0c0" cellspacing="0" cellpadding="2" width="136">
     <tr>
       <td colspan="4">
                 <font size="1" face="verdana, arial, helvetica, ms sans serif">
                   <b>Current Time</b>
                 </font>
              </td>
          
     <td>
   <form name="hours">
          <p><input class="time" type="text" size="2" name="clock"></p>
          </form>
       </td>
       <td>
   <form name="minutes">
          <p><input class="time" type="text" size="2" name="clock" /></p>
          </form>
       </td>
       <td>
   <form name="seconds">
          <p><input class="time" type="text" size="2" name="clock" /></p>
          </form>
       </td>
       <td>
   <form name="ampm">
          <p><input class="time" type="text" size="2" name="clock" /></p>
          </form>
       </td>
     </tr>
  </table>

.time{box-shadow:4px 6px 9px #000000; background-color:#000000; color:#FFFFFF;}
.ta{background-color:#FFFFFF;}

var musicsrc="apollo13.mid"

function sivamtime() {
 now=new Date();
 hour=now.getHours();
 min=now.getMinutes();
 sec=now.getSeconds();

if (min<=9) {
 min="0"+min;
 }
if (sec<=9) {
 sec="0"+sec;
 }
if (hour>12) {
 hour=hour-12;
 add="pm";
 }
else {
 hour=hour;
 add="am";
 }
if (hour==12) {
 add="pm";
 }
if (hour==00) {
 hour="12";
 }

document.hours.clock.value = (hour<=9) ? "0"+hour : hour;
  document.minutes.clock.value = min;
  document.seconds.clock.value = sec;
  document.ampm.clock.value= add;
 setTimeout("sivamtime()", 1000);

}

playit=false
function playmusic(){
musicwin=window.open("","","width=100,height=100")
if (navigator.appName=="Microsoft Internet Explorer")
musicwin.document.write('<bgsound src='+'"'+musicsrc+'"'+' loop="infinite">')
else
musicwin.document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20" height="20" autostart="true" loop="true">')
musicwin.document.close()
}

function soundcheck(cbox){
playit=cbox.checked
}

function alarm() {
    note = document.arlm.message.value;
    if (note == '') {note = 'ALARM!!';}

hrs = document.arlm.hr.value;
    min = document.arlm.mts.value;
    apm = document.arlm.am_pm.value;

if ((document.hours.clock.value == hrs) &&
    (document.minutes.clock.value == min) &&
    (document.ampm.clock.value == apm)) {
     if (playit)
     playmusic()
     else
     alert(note);
     return false}

if (hrs == '') {alert('The Hour field is empty'); return false}
 if (min == '') {alert('The Minute field is empty'); return false}
 if (apm == '') {alert('The am/pm field is empty'); return false}

if (hrs.length == 1) {document.arlm.hr.value = '0' + hrs}
 if (min.length == 1) {document.arlm.mts.value = '0' + min}
 if (hrs.length > 2) {alert('The Hour is wrongly typed.'); return false}
 if (min.length > 2) {alert('The Minute is wrongly typed.'); return false}
 if (apm != 'am' && apm != 'pm' ) {alert('The am/pm is wrongly typed.'); return false}

setTimeout("alarm()", 1000);}

Simple Digital Clock

Stylush Clock

Simple Calender

<body onLoad="displayCalendar()"> 
 
<div id="calendar"></div> 
</body>

.monthPre{
 color: gray;
 text-align: center;  
}
.monthNow{
 color: blue;
 text-align: center; 
}
.dayNow{
 border: 2px solid black; background-color: #00F; 
 color: #FFF;
 text-align: center;
}
.calendar td{
 htmlContent: 2px;
 width: 40px; border-radius: 5px; box-shadow:#CCC 2px 4px 6px;
}
.monthNow th{
 background-color: #000000; border-radius: 10px 5px 15px; text-shadow: 2px 4px 6px #CCCCCC;
 color: #FFFFFF;
 text-align: center;
}
.dayNames{
 background: #000;
 color: #FFFFFF;
 text-align: center;
}
 
     
function displayCalendar(){
 
 
 var htmlContent ="";
 var FebNumberOfDays ="";
 var counter = 1;
 
 
 var dateNow = new Date();
 var month = dateNow.getMonth();

AS Program's

Friday 23 March 2018

CLOCKS :