Cara Menampilkan Tanggal dan Jam dengan Javascript

Tutorial By Dwitari

Last updated on Desember 23rd, 2020

Javascript adalah salah satu bahasa pemrograman tingkat tinggi yang bertipe interpreter. Javascript berfungsi untuk validasi atau manipulasi data baik tampilan atau sistem yang ada di dalam website.

Pada saat kamu membuat website yang bersifat informasi yang disampaikan oleh publik atau masyarakat, seperti website berita, ramalan cuaca, bisnis, bank, dan aktivitas lainnya, pasti kamu membutuhkan informasi terkini pada aktivitas website tersebut. Penulis akan memberikan tutorial untuk menampilkan waktu secara lengkap, termasuk hari, tanggal, bulan, tahun, beserta zona waktu dengan Javascript.

Berikut cara menampilkan tanggal dan jam dengan Javascript.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

<html>
<head>
	<title>Tutorial Menampilkan Waktu Lengkap Dengan Javascript</title>
</head>
<body>
	<center><h1>Menampilkan Waktu Lengkap Dengan Javascript</h1></center>
	<div id="hasil"></div>
	<script>
		var waktu = new Date(); 
		document.getElementById("hasil").innerHTML = waktu;
	</script>
</body>
</html>

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “tampil-waktu-full.html”.

5. Klik Save.

001

6. Cari file yang tadi, kemudian klik kanan pada mouse – Open With – Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

002 1

Selesai.

Catatan:

<script>
  var waktu = new Date(); 
  document.getElementById("hasil").innerHTML = waktu;
</script>

Pada kode perintah di atas merupakan kode perintah yang berfungsi untuk menampilkan waktu lengkap. Jadi, kamu bisa melakukan custom tampilan waktu lengkap tersebut sesuai keinginan kamu dengan bantuan CSS pada elemen <div> baik itu id atau class, agar tampilan waktu tersebut lebih menarik untuk visitor yang mengunjungi website.

Kini, kamu bisa menampilkan waktu lengkap di dalam website buatan kamu dengan Javascript, agar si pengunjung (visitor) bisa mengetahui waktu saat ini pada saat membuka website kamu.

Demikian tutorial cara menampilkan tanggal dan jam dengan Javascript. Selamat mencoba.