|
|
dalam postingan kali ini saya akan membahas tentang bagaimana sih cara membuat sekaligus memasang jam digital pada website?
tentu ketika kita bayangkan sangat menarik bukan jadi jam digital ini berfungsi untuk mengingatkan kepada pembaca sekaligus mempercantik tampilan pada website kita sehingga para pembaca akan merasa nyaman bahkan penasaran.
dalam pembuatan jam digital yang perlu kalian pahami adalah HTML, tentu buat para sobat blogger yang sudah terbiasa edit tmplate blog akan memudahkan mereka dalam merancangnya tidak seperti saya ini. untuk mempermudah akan saya bagikan javascriptnya saja yang bisa langsung sobat pasang pada website milik sobat sendiri, java script ini juga dapa dipasang langsung di dalam html.
untuk mempersingkat waktu silahkan kalian bisa edit script di bawah ini sesuai dengan minat kalian masing-masing,
style="#">
</canvas>
<script>
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 = 'lawngreen';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0,'#333');
grad.addColorStop(1.5, 'black');
grad.addColorStop(1, '#333');
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 = '#333';
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);
}
</script></div>
</div>
keterangan,
- merah: untuk kode yang berwarna merah merupakan ukuran jam, kalian bisa menggantinya sesuai kebutuhan masing-masing
- hijau: untuk kode yang berwarna hijau merupakan kode yang digunakan untuk mengatur tebal garis jam jika ingin merubahnya silahkan kalian ubah sesuai keinginan kalian
- biru: untuk kode yang berwarna biru merupakan kode warna kalian juga dapat mengubah sesuai keinginan yang kalian sukai.
untuk cara meletakkannya kalian bisa langsung paste pada java script yang berada pada tata letak, kemudian kalian pilih tambahkan gadget dan pilih HTML/JavaScript seperti gambar diatas, tapi jika kalian ingin memasang didalam artikel kalian bisa paste kode tersebut dibawah kode <body> dan letakan sesuai posisi yang kalian inginkan.
mungkin itu saja sedikit tutorial cara membuat dan memasang jam digital di website, jika kalian mengalami kesulitan silahkan tinggalkan komentar pada kolom komentar yang sudah tersedia. trimakasih sudah membaca artikel ini semoga bermanfaat dan terus semangat jangan sampai putus asa
loading...
Silahkan berkomentar dengan sopan dan santun EmoticonEmoticon