Script Menampilkan Waktu 2

Date & Time Javascript Blogger

Postingan terkait :

Script Menampilkan Waktu bag.1

Daftar isi

Praktik

Script

Kode dasar script

Tabel detail script

Tampilan waktu dalam Bhs Indonesia

Penulisan

Contoh tampilan

Praktik

• Postingan bagian 2 ini memuat tentang menampilkan waktu menggunakan script dengan metode langsung atau tanpa diwakilkan dengan tag HTML seperti di postingan sebelumnya.
• Metode ini lebih efisien karna fokus hanya di script saja.
• Sebagai contoh yang mungkin penampilan waktu yang paling umum digunakan adalah pada footer blog yaitu pada bagian Atribusi khususnya untuk Copyright.

Contoh

Contoh adalah Footer Atribusi blog ini :

Kamus CSS 2017 -

• Pada contoh diatas, tahun 2017 ditampilkan dengan teks angka biasa, sedangkan untuk tahun selanjutnya ditampilkan menggunakan script. Manfaatnya agar setiap pergantian tahun maka tahun yang ditampilkan otomatis akan mengikuti tanpa harus menggantinya secara manual. Karena script waktu akan selalu menampilkan waktu terkini secara live.

Kode Script

Script yang digunakan adalah sebagai berikut :

.<b>Kamus CSS <i class="fas fa-copyright"></i> 2017 -
<script type="text/javascript">
document.write(new Date().getFullYear());
</script>
</b>

Contoh diatas sekaligus sudah memuat script waktu tanpa tag HTML untuk tahun, selanjutnya ke script waktu bulan, tanggal, jam dst.

Kode dasar untuk script waktu

Script ini dapat menampilkan waktu aktual yang diinginkan secara langsung tanpa menggunakan kode HTML. Namun hasilnya akan menampilkan digit.

Script waktu untuk Hari
<script type="text/javascript">document.write(new Date().getDay());</script>
	(Menampilkan urutan hari)
Script waktu untuk Tanggal
<script type="text/javascript">document.write(new Date().getDate());</script>
	(Menampilkan digit tanggal saat ini.)
Script waktu untuk Bulan
<script type="text/javascript">document.write(new Date().getMonth());</script>
	(Menampilkan bulan saat ini dalam angka.)
Script waktu untuk Tahun
<script type="text/javascript">document.write(new Date().getFullYear());</script>
	(Menampilkan tahun.)
Script waktu untuk Jam
<script type="text/javascript">document.write(new Date().getHours());</script>
	(Menampilkan jam saat ini, sesuai waktu lokal setempat.)
Script waktu untuk Menit
<script type="text/javascript">document.write(new Date().getMinutes());</script>
	(Menampilkan menit terakhir saat halaman ini dimuat)
Script waktu untuk Detik
<script type="text/javascript">document.write(new Date().getSeconds());</script>
	(Menampilkan detik terakhir saat halaman ini dimuat.)

Tampilan Bahasa Indonesia

Selanjutnya untuk menampilkan nama bulan dan hari dengan bahasa Indonesia :

Script

Menampilkan waktu aktual dengan bahasa Indonesia

Menampilkan waktu secara terpisah dengan metode getElementByID atau diwakilkan menggunakan tag HTML.

Script nya adalah sebagai berikut :

<script>
var d = new Date();
var n_hari = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
var n_bulan = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
var hari = d.getDay();
var tanggal = d.getDate();
var bulan = d.getMonth();
var tahun = d.getFullYear();
document.getElementById("bulan").innerHTML = n_bulan[d.getMonth()];
document.getElementById("hari").innerHTML = n_hari[d.getDay()];
document.getElementById("tanggal").innerHTML = tanggal;
document.getElementById("tahun").innerHTML = tahun;
</script>

Penulisan

Tag HTML

Contoh :

Script	HTML
var hari = d.getDay();	<span id="hari"></span>
var tanggal = d.getDate();	<span id="tanggal"></span>
var bulan = d.getMonth();	<span id="bulan"></span>
var tahun = d.getFullYear();	<span id="tahun"></span>

Menampilkan waktu lengkap.

Hasilnya :

• Kesimpulannya, kunci dari script waktu adalah pada element waktunya itu sendiri, selain dari itu semua sama.
• Elemen waktu yang dimaksud adalah :

Jam	Hours	getHours()
Menit	Minutes	getMinutes()
Detik	Seconds	getSeconds()
Hari	Day	getDay()
Tanggal	Dates	getDates()
Bulan	Month	getMonth()
Tahun	Year	getFullYear()

Script ini diistilahkan dengan getMethode