Menampilkan Jam dan Tanggal dengan JavaScript

Tinggalkan Balasan

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.

Leave your comment