Tag Archives: Real Time Clock Javascript

Menampilkan Jam dan Tanggal dengan JavaScript

Leave a reply
Show Date Time for Real

Show Date Time for Real

Menampilkan tanggal dan jam secara real time dapat dilakukan dengan JavaScript.

Berikut ini coding JavaScript untuk tampilan seperti diatas:

function startTime()
{ 	var today=new Date();
	var weekday=new Array(7);
	var weekday=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
	var monthname=new Array(12);
	var monthname=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
	var dayname=weekday[today.getDay()];
	var day=today.getDate();
	var month=monthname[today.getMonth()]; 
	var year=today.getFullYear();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();
	h=checkTime(h);
	m=checkTime(m);
	s=checkTime(s);
	document.getElementById('clocktime').innerHTML=dayname+", "+day+"-"+month+"-"+year+", "+h+":"+m+":"+s;
	t=setTimeout(function(){startTime()},500);
}
// function checkTime to add a zero in front of numbers < 10
function checkTime(i)
{	if(i<10){i="0"+i;}
	return i;
}

Berikut ini coding HTML yang memanggil fungsi javascript tersebut:

<!DOCTYPE html>
<html>
<head>
<title>My Application</title>
<script type="text/javascript" src="js/time.js"></script>
</head>
<body onload="startTime()">
<table bgcolor="#0000ff" width="100%" cellpadding="5"> 
<tr><td width="33%">My Application</td><td align="right">
<span id="clocktime"></span> :: Welcome, Super Administrator | Logout</td></tr>
</table>
</body>
</html>

 
Anda Juga bisa menggunakan method javascript toLocaleDateString() dengan parameter format dibawah ini.

<div id="date" style="font:bold 12pt Arial;background:#00ffff;width:100%;"></div> 
<script>
function displayTime() {  
const now = new Date(); // Get current time
const formattedDate = now.toLocaleDateString('en-GB',
  {day: 'numeric', month: 'short', year: 'numeric'})
  .replace(/ /g, '-');
document.getElementById("date").innerHTML = formattedDate + 
  " " + now.toLocaleTimeString('it-IT');
setTimeout(displayTime, 1000); 
}
window.onload = displayTime; 
</script>

 
Selamat mencoba.