Juli 5, 2020

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.