Bikin Jam Dihital Pakek JavaScript.
Kemaren temen minta bikinin sekrip buat nampilin jam dihital di webnya, katanya buat tugas sih. Nah, kita mulai ya bikin script jam digital dengan javascript dan JQuery-nya.
Kita bikin dulu javascript-nya, terserah mau disimpen di file terpisah atau disamain di file HTML. Tapi sebelumnya, wajib pake JQuery, minimal versi 1.9.x
Sekarang mulai dari sekrip buat bikin variabel buat nampilin jam sama tanggal.
function showTime()
{
var today=new Date(); // Variable buat ambil info waktu hari ini
var D=today.getDate(); // Variable buat nampilin tanggal
var M=today.getMonth(); // Variable buat nampilin bulan
var Y=today.getFullYear(); // Variable buat nampilin taun
var d=today.getDay(); // Variable buat nampilin hari
var h=today.getHours(); // Variable buat nampilin jam
var m=today.getMinutes(); // Variable buat nampilin menit
var s=today.getSeconds(); // Variable buat nampilin detik
}
[spoiler title="Mau lanjut apa mau loncat?"]Kalau cuma butuh scirpt-nya aja, mending ke-ujung deh ;) kecuali kalau mau sekalian mempelajari sekript ini, bisa lanjutin baca :D[/spoiler]
Catatan: JavaScript itu case sensitive, jadi variable atau fungsi dalam huruf besar itu beda dengan huruf kecil, hati-hati ya! ;)
Udah.? Sekarang kita pindah ke file HTML atau sekrip HTML, cari tag body terus tambahin onLoad="showTime()" didalemnya, jadinya gini:
Sampai sini jamnya siap ditampilkan tapi belum bisa tampil, terus gimana? Yang di JavaScript tadi, tambahin sekrip ini sebelum tanda } dalam function showTime sekrip ini fungsinya untuk mengganti raw data hasil dari variable tadi ke nama hari dan nama bulan.
// Declare day
var day=new Array(7);
day[0]="Sun";
day[1]="Mon";
day[2]="Tue";
day[3]="Wed";
day[4]="Thu";
day[5]="Fri";
day[6]="Sat";
// Declare Month
var month=new Array(12);
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sept";
month[9]="Oct";
month[10]="Nov";
month[11]="Des";
Sekarang hasil JavaScript-nya jadi seperti ini:
function showTime()
{
var today=new Date(); // Variable buat ambil info waktu hari ini
var D=today.getDate(); // Variable buat nampilin tanggal
var M=today.getMonth(); // Variable buat nampilin bulan
var Y=today.getFullYear(); // Variable buat nampilin taun
var d=today.getDay(); // Variable buat nampilin hari
var h=today.getHours(); // Variable buat nampilin jam
var m=today.getMinutes(); // Variable buat nampilin menit
var s=today.getSeconds(); // Variable buat nampilin detik
// Declare day
var day=new Array(7);
day[0]="Sun";
day[1]="Mon";
day[2]="Tue";
day[3]="Wed";
day[4]="Thu";
day[5]="Fri";
day[6]="Sat";
// Declare Month
var month=new Array(12);
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sept";
month[9]="Oct";
month[10]="Nov";
month[11]="Des";
}
Sudah hampir siap, sekarang tambahin JQuery ini buat nampilin variabel-variabel ke HTML, seperti biasa, sebelum tanda } dalam function showTime:
$(".clock").text(day[d]+" "+D+"-"+month[M]+"-"+Y+" "+h+":"+m+":"+s);
Jadi sekrip JavaScript sekarang hasilnya begini:
function showTime()
{
var today=new Date(); // Variable buat ambil info waktu hari ini
var D=today.getDate(); // Variable buat nampilin tanggal
var M=today.getMonth(); // Variable buat nampilin bulan
var Y=today.getFullYear(); // Variable buat nampilin taun
var d=today.getDay(); // Variable buat nampilin hari
var h=today.getHours(); // Variable buat nampilin jam
var m=today.getMinutes(); // Variable buat nampilin menit
var s=today.getSeconds(); // Variable buat nampilin detik
// Declare day
var day=new Array(7);
day[0]="Sun";
day[1]="Mon";
day[2]="Tue";
day[3]="Wed";
day[4]="Thu";
day[5]="Fri";
day[6]="Sat";
// Declare Month
var month=new Array(12);
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sept";
month[9]="Oct";
month[10]="Nov";
month[11]="Des";
// Print the Clock
$(".clock").text(day[d]+" "+D+"-"+month[M]+"-"+Y+" "+h+":"+m+":"+s);
}
Terus bikin tag HTML dengan class clock yang nantinya tag ini bakal jadi Jam dihitalnya, contoh disini pake div tapi terserah nantinya mau pake apa.
Kalau udah, coba refresh deh browsernya. Masih ada masalah? Iya, detiknya gak nambah dan gak berubah. Terus tambahin ini, seperti biasa sebelum tanda } dalam function showTime.
setTimeout('showTime()',1000);
Jadi, si sekripnya bakal cek ulang fungsi showTime setiap 1000 milisecond atau setiap satu detik. Hasil akhir sekarang:
function showTime()
{
var today=new Date(); // Variable buat ambil info waktu hari ini
var D=today.getDate(); // Variable buat nampilin tanggal
var M=today.getMonth(); // Variable buat nampilin bulan
var Y=today.getFullYear(); // Variable buat nampilin taun
var d=today.getDay(); // Variable buat nampilin hari
var h=today.getHours(); // Variable buat nampilin jam
var m=today.getMinutes(); // Variable buat nampilin menit
var s=today.getSeconds(); // Variable buat nampilin detik
// Declare day
var day=new Array(7);
day[0]="Sun";
day[1]="Mon";
day[2]="Tue";
day[3]="Wed";
day[4]="Thu";
day[5]="Fri";
day[6]="Sat";
// Declare Month
var month=new Array(12);
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sept";
month[9]="Oct";
month[10]="Nov";
month[11]="Des";
// Print the Clock
$(".clock").text(day[d]+" "+D+"-"+month[M]+"-"+Y+" "+h+":"+m+":"+s);
setTimeout('showTime()',1000);
}
Tapi masih ada yang kurang nih, apa ya.. Oh, kalau diliat sih, angka di jam/menit/detik sebelum nyentuh bilangan puluhan cuma ada 1 angka, biasanya kan jam dua angka per kelompok digit. Hehe... yaudah, tambahin lagi ini didalam fungsi showTime:
h=checkTime(h);
m=checkTime(m);
s=checkTime(s);
Terus ini diluar fungsi showTime
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
Jadi sekarang kita punya JavaScript begini:
function showTime()
{
var today=new Date();
var D=today.getDate();
var M=today.getMonth();
var Y=today.getFullYear();
var d=today.getDay();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// Declare day
var day=new Array(7);
day[0]="Sun";
day[1]="Mon";
day[2]="Tue";
day[3]="Wed";
day[4]="Thu";
day[5]="Fri";
day[6]="Sat";
// Declare Month
var month=new Array(12);
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sept";
month[9]="Oct";
month[10]="Nov";
month[11]="Des";
// add a zero in front of numbers less than 10
h=checkTime(h);
m=checkTime(m);
s=checkTime(s);
$(".clock").text(day[d]+" "+D+"-"+month[M]+"-"+Y+" "+h+":"+m+":"+s);
setTimeout('showTime()',1000);
}
// add a zero in front of numbers less than 10
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
dan HTML begini:
buat nampilin jam dihitalnya. Selesai deh. :D
Selamat mencoba dan tetap berusaha!
Catatan lain: Kalau mau cobain, atau bingung karena gak ada contoh, lihat aja disini: http://jsfiddle.net/sendz/jypaF/