Script JS Tanggal dan Jam

Bagaimana cara menampilkan Tanggal dan Jam pada situs web menggunakan JS (JavaScript) ? Jika itu pertanyaan Anda, maka dibawah ini jawabanya.

Mengapa harus JS (JavaScript) ? Karena bagi pengguna Bloger ataupun WP (WordPress) ini mempermudah pemasangan-nya, tinggal pilih widget html atau javascript, paste kode, beres dah…. Praktis dan tidak memakan banyak waktu.

Ok langsung saja, dibawah ini adalah scriptnya, ada 3 (tiga) script yang Saya kemas jadi satu halaman.

Script JS, Tanggal dan Jam

<!DOCTYPE html>
<html>
<head>
    <title>Time and Date</title>

<!-- begin CSS code -->

<style>
body { 
  	font-family:verdana; 
  	font-size:12px;
}
#ct {
  	background:#333; 
  	padding:4px; 
  	color:white;
}
#clock {
  	background:#333;
  	width:80px;
  	padding:4px; 
  	color:#0f0;
}
#datetime {
  	font-weight:bold;
  	color:maroon;
}
</style>

<!-- end of CSS code -->

</head>
<body onload="display_ct();">

<!-- this content between tag <body>...</body> will be show on browser -->
  
  <p>
    Hasil dari Script Pertama :
  </p>
  
<script> 
function display_ct(){
	var refresh=1000;
	mytime=setTimeout('display_ct()',refresh)
}

function display_ct() {
	var x = new Date()
	document.getElementById('ct').innerHTML = x;
	display_ct();
}
</script>
	
  <span id='ct'></span>

  <p>    
  </p>

  <hr>
  
<!-- Script kedua, mulai dari sini -->	
  
  <p>
    Hasil dari Script Kedua :
  </p>
  
Current Time: <span id="clock"></span>  

<script>  
window.setTimeout("hour()",1000);
   function hour() {
   var date = new Date();
   setTimeout("hour()",1000);
   document.getElementById("clock").innerHTML = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
 } 
</script> 
  
  <p>   
  </p>

  <hr>
  
  <!-- Ahir dari Script kedua -->	
	
  <p>
    Hasil dari Script ketiga :
  </p>  
  
<p>Tanggal - Jam : <span id="datetime"></span></p>

<script>
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+ (dt.getFullYear()) +" - "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
</script>

  <p>   
  </p>

  <hr> 

<!-- End of body content -->

</body>
</html>


Untuk lebih jelasnya, silahkan Anda buka script tersebut pada halaman Realtime HTML Editor ↗ yang sudah saya siapkan, ikuti tautan diatas untuk mengedit dan melihat hasilnya.

Hanya ini saja pembahasan tentang Script JS Tanggal dan Jam, selamat belajar dan salam sukses buat Anda semua.

Mungkin Anda Menyukai