Sebelumnya telah saya
bagikan tutorial untuk “Menampilkan Waktu/Jam Sistem pada Halaman WEB”, melanjutkan
sebelumnya saya akan berbagi tutorial untuk “Menampilkan Hari dan Tanggal
Sistem pada Halaman WEB”. Sobat berbagi tidak perlu membuat file lagi, hanya
perlu menambahkan beberapa script saja pada file sobat sebelumnya.
Tambahkan script
javascript dibawah ini :
<script>
var hariseminggu = new Array('Ahad','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');
var bulansetahun = new Array('Januari','Februari','Maret','April','Mei','Juni','Juli',
'Agustus','September','Oktober','November','Desember');
function hari(){
var hariini;
var hari = new Date();//membuat objek waktu
hariini = hariseminggu[hari.getDay()]+", "+hari.getDate()+" "+bulansetahun[hari.getMonth()]+" "+hari.getFullYear();//menempatkan data waktu pada variabel
document.getElementById('tampilhari').innerHTML=hariini; //menampilkan variabel hariini pada html
setTimeout('hari()',300); //meload function secara terus menerus
}
</script>
Script diatas
digunakan untuk Menampilkan Waktu/Jam Sistem pada Halaman WEB dengan
menggunakan fungsi Date() pada
javascript. Dari fungsi Date() yang digunakan bias kita gunakan fungsi khusus
yang ada didalamnya :
1)
.getDay() : digunakan untuk mengambil value
Day/Hari, dengan nilai kembalian seperti index 0-6.
2)
.getDate() : digunakan untuk mengambil value
Date/Tanggal, dengan nilai kembalian 1-31.
3)
.getMonth() : digunakan untuk mengambil value
Month/Bulan, dengan nilai kembalian index 0-11.
4)
.getFullYear() : digunakan untuk mengambil value Year/Tahun,
dengan format 4 digit tahun.
var hariseminggu = new Array('Ahad','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');
var bulansetahun = new Array('Januari','Februari','Maret','April','Mei','Juni','Juli',
'Agustus','September','Oktober','November','Desember');
Array yang terdapat
pada script diatas digunakan untuk mendapatkan nama dari hari dan bulan dari
hasil fungsi Date() yang digunakan karena .getDay() dan getMonth()
akan mengembalikan nilai berupa index sehingga tidak menghasilkan nilai yang
sebenarnya.
Sebagai tempat untuk
menampilkan hasil javascript yang dibuat, tambahkan script pada tag
<body> HTML dengan “hari();” seperti dibawah ini :
<body onload="viewjam();
hari();">
Dan tambahkan isi body
dengan script dibawah ini :
<div><i>Hari ini
</i> <strong><big><a id="tampilhari"></a></big></strong></div>
Sehinggan script HTML menjadi :
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>BELAJAR WEB II</title>
</head>
<body onload="viewjam();
hari();">
<div>MOH. SUKRON MAKMUN</div>
<div><i>Sekarang
Jam</i> <strong><big><a id="tampiljam"></a></big></strong></div>
<div><i>Hari ini
</i> <strong><big><a id="tampilhari"></a></big></strong></div>
</body>
</html>
Kemudian Letakkan
script javascript untuk menampilkan jam didalam tag <head> pada HTML,
sehingga menjadi seperti ini :
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>BELAJAR WEB II</title>
<script>
function viewjam(){
var jam;
var jamku = new Date();//membuat
objek waktu
jam = "Sekarang Jam :
"+jamku.getHours()+":"+jamku.getMinutes()+":"+jamku.getSeconds();//menempatkan
data waktu pada variabel
document.getElementById('tampiljam').innerHTML=jam;//menampilkan
variabel jam pada html
setTimeout('viewjam()',0);//meload
function secara terus menerus
}
var hariseminggu = new
Array('Ahad','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');
var
bulansetahun = new Array('Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember');
function
hari(){
var
hariini;
var
hari = new Date();//membuat
objek waktu
hariini
= hariseminggu[hari.getDay()]+", "+hari.getDate()+" "+bulansetahun[hari.getMonth()]+" "+hari.getFullYear();//menempatkan
data waktu pada variabel
document.getElementById('tampilhari').innerHTML=hariini; //menampilkan variabel hariini pada html
setTimeout('hari()',300); //meload
function secara terus menerus
}
</script>
</head>
<body onload="viewjam(); hari();">
<div>MOH. SUKRON MAKMUN</div>
<div><i>Sekarang
Jam</i> <strong><big><a id="tampiljam"></a></big></strong></div>
<div><i>Hari ini
</i> <strong><big><a id="tampilhari"></a></big></strong></div>
</body>
</html>
Jalankan file HTML
pada localhost atau langsung pada browser.
0 komentar:
Post a Comment
Gunaka bahasa yang santun dalam berkomentar.