Membuat Jam Dinding dengan Html

Jumat, 28 April 2017

Membuat Jam Dinding dengan Html

April 28, 2017 Leave a Reply
Hampir setiap hari bahkan setiap waktu kita melihat jam apalagi pada waktu yang ditunggu-tunggu, hampir di setiap rumah ada jam dinding, walaupun sebenarnya informasi akan waktu itu banyak tapi keberadaan jam dinding seolah-olah tidak bisa dihindari.

jam

Sebagai pecinta html terbersit di benak saya bagaimana cara membuat jam dinding tersebut, setelah mengumpulkan dari beberapa sumber akhirnya saya menemukan cara membuat jam dinding dengan html. seperti yang kita ketahui tentunya jam dinding tersebut biasanya terdiri dari 3 jarum jam yaitu jarum yang panjang, untuk detik dan menit serta jarum pendek untuk menunjukan jam. 

Apabila kita ingin membuat jam dinding itu berbentuk lingkaran, maka kita juga harus tahu bagaimana cara membuat lingkaran dengan html.berikut adalah script html untuk membuat jam dinding:


<!DOCTYPE html>
<html>
<body>

<canvas id="mycanvas" width="400" height="400"
style="background-color:#0fff">
</canvas>
<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(gambarjam, 1000);
function gambarjam() {
  drawFace(ctx, radius);
  angkajam(ctx, radius);
  drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#00ff');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#00ff');
  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 = '#00ff';
  ctx.fill();
}
function angkajam(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));
    jarumjam(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    jarumjam(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    jarumjam(ctx, second, radius*0.9, radius*0.02);
}
function jarumjam(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);
}
</script>

</body>
</html>

Dari kode di atas kita bisa tahu kode mana untuk membuat jarum jam, dan mana kode untuk membuat lingkaran, jangan lupa simpan kode di atas dengan ekstensi html.kemudian jalankanlah kode html itu maka tampilan jam di dengan kode di atas akan seperti ini :

0 komentar: