Cara menggunakan membuat tanggal dengan javascript

Question

Cara Membuat Tanggal dan Jam Real Time Menggunakan Javascript dan HTML - Halo sobat ketutrare, bagaimana kabar sobat semua ? semoga dalam keadaan baik dan sukses. Kali ini kita akan membahas mengenai Coding untuk membuat Jam Real Time menggunakan HTML dan Javascript.

Pertama, sobat buka code editor yang sobat gunakan. Pada contoh kita akan menggunakan sublime text. kemudian buat sebuah file.html dengan nama bebas yang bisa sobat letakkan pada sebuah folder. Sobat bisa ketikkan code berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="./script.js" async></script>
</head>
<body>
	<p>Jam Simpel JavaScript</p>
	<div id="DisplayClock" class="clock" onload="showTime()"></div>
</body>
</html>

Pada bagian body, kita buat sebuah <div> yang memiliki id='DisplayClock' yang nantinya akan menjalankan secara langsung fungsi javascript showTime() dengan fungsi onload.

Kita panggil javascript yang nantinya kita buat di langkah kedua dengan nama script.js. Kita memanggilnya / includenya dengan tag <script> di head.

Kedua, kita buat file baru pada folder yang sama dengan format filenya .js atau yang kita sebut file javascript. Pada contoh kita simpan dengan nama script.js. Selanjutnya sobat ketikkan code berikut :

function showTime(){
	var date = new Date();
	var h = date.getHours();
	var m = date.getMinutes();
	var s = date.getSeconds();
	var session = "AM";

	if(h == 0){
		h = 12;
	}
	if (h > 12) {
		h = h - 12 ;
		session = "PM";
	}

	h = (h<10) ? "0" + h : h;
	m = (m<10) ? "0" + m : m;
	s = (s<10) ? "0" + s : s;

	var time = h + ":" + m + ":" + s + " " + session;

	document.getElementById("DisplayClock").innerText = time;
	document.getElementById("DisplayClock").textContent = time;

	setTimeout(showTime, 1000);
}

showTime();

Pada file sript.js, kita buat sebuah fungsi yang bernama showTime(). Fungsi ini sudah kita panggil juga pada langkah pertama pada halaman HTML. Variabel var date untuk date/tanggal, var h untuk menyimpan hour/jam , var m untuk minute/menit, var s untuk second/detik, dan var session untuk penanda waktu AM & PM. Jam akan ditampilkan pada element html yang memiliki id DisplayClock.

Hasil Running Programnya adalah seperti gambar berikut :

hasil running code dan file clock.html

hasil running dan file script.js

OK sobat, demikian tutorial singkat untuk Cara Membuat Tanggal dan Jam Real Time Menggunakan Javascript dan HTML. Semoga tutorial kali ini membantu dan apabila ada pertanyaan mengenai tutorial ini silahkan sobat ketikkan pada kolom komentar di bawah. Terimakasih, salam ketutrare.

03/03/2015 Fachrul Ahaddin 18862 Website

Hallo semuanya. Pada tutorial hari ini saya akan sedikit membahas tentang javascript.Pasti teman-teman sudah sering mengenal kata javascript? Ya, javascript merupakan sebuah Bahasa scripting yang biasa digunakan agar website yang kita buat menjadi lebih interaktif. Nah, pada study kasus kali ini saya akan mencoba menampilkan tanggal hari ini menggunakan javascript. Caranya cukup sederhana, tidak perlu terlalu banyak script. Berikut script untuk lebih jelasnya :

<script type='text/javascript'>

var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at', 'Sabtu'];

var date = new Date();

var day = date.getDate();

var month = date.getMonth();

var thisDay = date.getDay(),

thisDay = myDays[thisDay];

var yy = date.getYear();

var year = (yy < 1000) ? yy + 1900 : yy;

document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);

</script>