Membuat Jam Digital Realtime Menggunakan JavaScript
Berbicara mengenai JavaScript memang tidak ada habisnya. Bahasa pemrograman berbasis client scripting ini sering digunakan untuk membangun sebuah website yang indah bersama dengan pasangannya yaitu HTML dan CSS. Javascript inilah yang membuat tampilan website menjadi dinamis dan hidup.
Pada seri javascript kali ini kita akan membuat script jam digital realtime. Maksudnya realtime adalah detiknya terus berjalan mengikuti jam normal tanpa refresh halaman. Script ini bisa kamu gunakan untuk memperindah tampilan blog atau website kamu supaya lebih hidup. Langsung saja kita ikuti tutorialnya.
1. Download font digital
Untuk mempercantik tampilan jam seperti digital, pertama kita download dulu font digital disini . Setelah download kemudian ekstrak, kita hanya perlu satu font saja. Misalnya saya pilih font digital-7.ttf . Letakan font tersebut sejajar dengan file HTML yang akan kita buat.
2. Buat file HTML
Yang kedua buatlah file html untuk menampilkan jam digital. Isi dengan kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>Jam Digital</title>
<style type="text/css">
@font-face {
font-family: digital;
src: url(digital-7.ttf);
}
</style>
</head>
<body>
<span id="date_time" style="float: right; font-family: verdana; font-size:13px; font-weight:bold; color:#2e7d32;"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>
<script type="text/javascript">
function date_time(id)
{
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
d = date.getDate();
day = date.getDay();
days = new Array('Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu');
h = date.getHours();
if(h<10) {
h = "0"+h;
}
m = date.getMinutes();
if(m<10){
m = "0"+m;
}
s = date.getSeconds();
if(s<10) {
s = "0"+s;
}
result = ''+days[day]+', '+d+' '+months[month]+' '+year+' '+h+':'+m+':'+s;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
</script>
</body>
</html>Berikut adalah contoh jam digital yang sudah saya pasangkan di website.
