Jam Carta Pai

Jam CSS
* Pai luar = saat
Pai tengah = minit
Pai dalam = jam

Demo

Waktu jam diselaraskan dengan waktu tempatan.

<div class="labu">  
 <canvas id="canv" width="500" height="500"></canvas>
</div>
<style>
.labu {
    margin: 0;
background: hsla(180, 95%, 15%, 1);
font-family: Georgia;
font-size: 4em;
    overflow: hidden;
    width: 100%;
    height: 600px;
}
canvas {
left: 50%;
position: relative;
top : 50%;
transform :translate( -50%, -50% );
}
#time {
position: absolute;
    top: 0;
left: 0;    
width: 500px;
    color: hsla(255,255%,255%,0.7);
    font-weight: bold;
text-align: center;
line-height: 500px;
    z-index: 1;
    text-shadow:hsla(180, 85%, 5%, 1) 1px 1px,
    hsla(180, 85%, 5%, .6) 2px 2px,
    hsla(180, 85%, 5%, .6) 3px 3px,
    hsla(180, 85%, 5%, .6) 4px 4px,
    hsla(180, 85%, 5%, .6) 5px 5px,
    hsla(180, 85%, 5%, .6) 6px 6px,
    hsla(180, 85%, 5%, .6) 7px 7px,
    hsla(180, 85%, 5%, .6) 8px 8px,
    hsla(180, 85%, 5%, .6) 9px 9px,
    hsla(180, 85%, 5%, .6) 11px 11px,
    hsla(180, 85%, 5%, .6) 12px 12px,
    hsla(180, 85%, 5%, .6) 13px 13px,
    hsla(180, 85%, 5%, .6) 14px 14px,
    hsla(180, 85%, 5%, .6) 15px 15px,
    hsla(180, 85%, 5%, .6) 16px 16px,
    hsla(180, 85%, 5%, .6) 17px 17px,
    hsla(180, 85%, 5%, .6) 18px 18px,
    hsla(180, 85%, 5%, .6) 19px 19px,
    hsla(180, 85%, 5%, .6) 20px 20px,
    hsla(180, 85%, 5%, .6) 21px 21px,
    hsla(180, 85%, 5%, .6) 22px 22px,
    hsla(180, 85%, 5%, .6) 23px 23px,
    hsla(180, 85%, 5%, .6) 24px 24px,
    hsla(180, 85%, 5%, .6) 25px 25px,
    hsla(180, 85%, 5%, .6) 26px 26px,
    hsla(180, 85%, 5%, .6) 27px 27px,
    hsla(180, 85%, 5%, .6) 28px 28px,
    hsla(180, 85%, 5%, .6) 29px 29px,
    hsla(180, 85%, 5%, .6) 30px 30px;
}
@media screen and (max-width: 600px) {
  .labu {
    height: 400px;
}
  #time {    
width: 100%;
}
  #canv {
    width: 100%;
  }
 }  
</style>
<script>
  var c = document.getElementById('canv');
var $ = c.getContext('2d'); 
var ang = 0;
var secondsColor = 'hsla(180, 85%, 5%, .7)';
var minutesColor = 'hsla(180, 95%, 15%, 1)';
var hoursColor = 'hsla(180, 75%, 25%, 1)';
var currentHr;
var currentMin;
var currentSec;
var currentMillisec; 
var t = setInterval( 'updateTime()', 50 );
function updateTime(){
var currentDate = new Date();
var g = $.createRadialGradient(250,250,.5,250,250,250);  
  g.addColorStop(0, 'hsla(180, 55%, 8%, 1)');  
  g.addColorStop(1, 'hsla(180, 95%, 15%, 1)');  
$.fillStyle = g;
$.fillRect( 0, 0, c.width, c.height );
currentSec = currentDate.getSeconds();
currentMillisec = currentDate.getMilliseconds();
currentMin = currentDate.getMinutes();
currentHr = currentDate.getHours();
if(currentHr == 00){  
    currentHr=12;
  }
  else if (currentHr >= 13 ){  
    currentHr -=12;
  }
drawSeconds();
drawMinutes();
drawHours();
var realTime = currentHr + ':' + numPad0( currentMin ) + ':' + numPad0( currentSec );
  
var textPosX = 250 - ( $.measureText(realTime).width / 2 );
  $.shadowColor = 'hsla(180, 100%, 5%, 1)';
  $.shadowBlur = 100;
  $.shadowOffsetX = 12;
  $.shadowOffsetY = 0;
$.fillStyle =  'hsla(255,255%,255%,.7)';
$.font = "bold 1.6em Georgia";
$.fillText( realTime, textPosX, c.height/2+50);  
}
function drawSeconds(){  
ang = 0.006 * ( ( currentSec * 1000 ) + currentMillisec );
$.fillStyle = secondsColor;
$.beginPath();
$.moveTo( 250, 250 ); 
$.lineTo( 250, 50 );
$.arc( 250, 250, 200, calcDeg( 0 ), calcDeg( ang ), false );
$.lineTo( 250, 250 );
  $.shadowColor = 'hsla(180, 45%, 5%, .4)';
  $.shadowBlur =15;
  $.shadowOffsetX = 15;
  $.shadowOffsetY = 15;
$.fill();
} 
function drawMinutes(){  
ang = 0.0001 * ( ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
$.fillStyle = minutesColor;
$.beginPath();
$.moveTo( 250, 250 ); 
$.lineTo( 250, 100 );
$.arc( 250, 250, 150, calcDeg( 0 ), calcDeg( ang ), false );
$.lineTo( 250, 250 );
  $.shadowColor = 'hsla(180, 25%, 5%, .4)';
  $.shadowBlur =15;
  $.shadowOffsetX = 15;
  $.shadowOffsetY = 15;
$.fill();
}  
function drawHours(){  
ang = 0.000008333 * ( ( currentHr * 60 * 60 * 1000 ) + ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
if( ang > 360 ){
ang -= 360;
}
$.fillStyle = hoursColor;
$.beginPath();
$.moveTo( 250, 250 ); 
$.lineTo( 250, 150 );
$.arc( 250, 250, 100, calcDeg( 0 ), calcDeg( ang ), false );
$.lineTo( 250, 250 );
  $.shadowColor = 'hsla(180, 45%, 5%, .4)';
  $.shadowBlur =15;
  $.shadowOffsetX = 15;
  $.shadowOffsetY = 15;
$.fill();
}  
function calcDeg( deg ){
return (Math.PI/180) * (deg - 90);
}
function numPad0( str ){
var cStr = str.toString();
if( cStr.length < 2 ){
str = 0 + cStr;
}
return str;
}
window.addEventListener('resize', function(){
  c.width = 500;
  c.height = 500;
});
</script>

CSS & JS dirujuk di codepen.io/tmrDevelops/pen/VYKyge/