HTML Javascript menampilkan Live hari tanggal dan jam


Salam pembaca.
Sekarang saya akan mencoba membuat tutorial HTML untuk menampilkan hari tanggal dan jam secara live dengan javascript. Sebelum dimulai perlu kita ketahui beberapa fungsi yang dapat kita gunakan diantaranya :

  1. getDay() : adalah suatu fungsi untuk memperoleh nilai hari dengan nilai 0 s.d. 6 untuk hari minggu s.d. sabtu. Makanya kita perlu mengatur bahwa nilai 0= Minggu, 1= Senin dst, dalam hal ini saya menggunakan Array().
  2. getDate() : adalah suatu fungsi untuk memperoleh nilai dari tanggal.
  3. getMonth() : adalah suatu fungsi untuk memperoleh bulan hari dengan nilai 0 s.d. 11 untuk bulan januari s.d. desember sama seperti “getDay()“. namun jika anda ingin memperoleh dan atau menampilkan bulan dalam format angka maka anda harus melakukan nilai ditambah satu seperti “getMonth()+1” (tanpa tanda petik).
  4. getFullYear() : adalah suatu fungsi untuk memperoleh nilai dari tahun.
  5. getHours() : adalah suatu fungsi untuk memperoleh nilai dari jam.
  6. getMinutes() : adalah suatu fungsi untuk memperoleh nilai dari menit.
  7. getSeconds() : adalah suatu fungsi untuk memperoleh nilai dari detik.

Tanda petik dua diakhir fungsi “var jam = waktu.getHours() + ""; ” adalah untuk merubah nilai integer menjadi string

Setelah memahami fungsi-fungsi tersebut langsung saja kita coba buka notepad copas script dibawah kehalaman notepad yang sudah buka kemudian save dalam file html (“namafilekamu.html” tanpa tanda petik).

<!DOCTYPE html>

<head>

<title>Menampilkan Hari Tanggal dan Jam</title>

function displayTime(){
var nmbulan = new Array();

nmbulan[0] = “Januari”;
nmbulan[1] = “Februari”;
nmbulan[2] = “Maret”;
nmbulan[3] = “April”;
nmbulan[4] = “Mai”;
nmbulan[5] = “Juni”;
nmbulan[6] = “Juli”;
nmbulan[7] = “Augustus”;
nmbulan[8] = “September”;
nmbulan[9] = “Oktober”;
nmbulan[10] = “Nopember”;
nmbulan[11] = “Desember”;

var nmhari = new Array(7);
nmhari[0] = “Minggu”;
nmhari[1] = “Senin”;
nmhari[2] = “Selasa”;
nmhari[3] = “Rabu”;
nmhari[4] = “Kamis”;
nmhari[5] = “Jum’at”;
nmhari[6] = “Sabtu”;

var waktu = new Date();

var jam = waktu.getHours() + “”;
var menit = waktu.getMinutes() + “”;
var detik = waktu.getSeconds() + “”;

document.getElementById(“tampilanjam”).innerHTML = (jam.length==1?”0″+jam:jam) + “:” + (menit.length==1?”0″+menit:menit) + “:” + (detik.length==1?”0″+detik:detik);

var tgl = waktu.getDate() + “”;
var bulan = nmbulan[waktu.getMonth()];
var tahun = waktu.getFullYear() + “”;

document.getElementById(“tampilantgl”).innerHTML = (tgl.length==1?”0″+tgl:tgl) + ” ” + (bulan.length==1?”0″+bulan:bulan) + ” ” + (tahun.length==1?”0″+tahun:tahun);

var hari = nmhari[waktu.getDay()];
document.getElementById(“tampilanhari”).innerHTML = (hari.length==1?”0″+hari:hari);

}

</head>
<body onload="displayTime();setInterval(‘displayTime()’, 1000);">

<p style="margin-top: 0; margin-bottom: 0"><font face="Arial" size="6">Hari
<font color="#008000"><span id="tampilanhari"></span></font></p>
<p style="margin-top: 0; margin-bottom: 0"><font face="Arial" size="6">Tanggal
<font color="#008000"><span id="tampilantgl"></span></font></font></p>
<p style="margin-top: 0; margin-bottom: 0"><font face="Arial" size="6">Jam <font
color="#008000"><span id="tampilanjam"></span></font></font></p>

</body>
</html>

Semoga bermanfaat

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s