Script Menampilkan Waktu

Pada postingan ini script waktu yang akan digunakan diwakilkan dengan HTML, yang artinya letak tampilan waktunya berdasarkan letak tag HTMLnya, bukan berdasarkan letak scriptnya.

Untuk scriptnya sendiri bisa diletakkan terpisah.
Untuk menampilkan waktu dengan metode script lainnya nanti akan dimuat pada postingan : Script Menampilkan Waktu bagian 2

Kode dibawah ini merupakan rangkaian script yang menampilkan masing-masing elemen waktu (jam / menit / tgl / bln / thn) secara terpisah. Sehingga apabila hanya ingin menampilkan elemen pentingnya saja, kita bisa menentukan script mana yang harus dipasang.

Contoh yang menampilkan rangkaian waktu :

Waktu saat ini menunjukkan :

:: - / / WIT

Script jam

Waktu saat ini menunjukkan jam:

:xx

HTML : <span id="jam"></span>
SCRIPT :
<script>var d = new Date();document.getElementById("jam").innerHTML = d.getHours();</script>

Script menit

Waktu saat ini menunjukkan menit:

XX:

HTML : <span id="menit"></span>
SCRIPT :
<script>var d = new Date();document.getElementById("menit").innerHTML = d.getMinutes();</script>

Script detik

Waktu saat ini menunjukkan detik:

XX:XX:

HTML : <span id="detik"></span>
SCRIPT :
<script>var d = new Date();document.getElementById("detik").innerHTML = d.getSeconds();</script>

Script tanggal

Waktu saat ini menunjukkan tanggal:

Date:

HTML : <span id="tgl"></span>

SCRIPT :
<script>var d = new Date();document.getElementById("tgl").innerHTML = d.getDate();</script>

Menampilkan nama bulan dalam bahasa Indonesia

Waktu saat ini menunjukkan :

HTML : <span id="bulan"></span>
SCRIPT :
<script>var d = new Date();
var months = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
document.getElementById("bulan").innerHTML = months[d.getMonth()];
</script>

Menampilkan tahun sekarang

Saat ini menunjukkan :

Tahun:

HTML :
<span id="thn"></span>
SCRIPT :
<script>var d = new Date();document.getElementById("tahun").innerHTML = d.getFullYear();</script>

Jika semua script dipasang maka untuk menampilkan format waktu tinggal menentukan kode HTML nya misal seperti ini :

Waktu saat ini : <span id="jam"></span>:<span id="menit"></span>, <span id="tgl"></span> / <span id="bln"></span> / <span id="tahun"></span>

Dengan tambahan sedikit style, maka tampilannya seperti pada contoh diatas.
Style yang digunakan pada contoh adalah menggunakan HTML dengan tag <label>, sebagai berikut :

Style tersebut hanya sebagai contoh, untuk memberi gaya bisa bebas menggunakan tag apa saja yang cocok sesuai keinginan.

Menampilkan Jam dengan detik berjalan

Script terakhir untuk bagian ini adalah untuk menampilkan jam secara live dengan detik berjalan.

Scriptnya :

<body onload="startTime()">
<span id="txt"></span>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>

Tampilan Waktu saat ini :

Waktu : WIT.

Lanjutkan ke postingan : Script Menampilkan Waktu bagian 2