Pages

Tuesday 9 September 2014

Tutorial Javascript - Menampilkan Tanggal dan Waktu pada Website

Kali ini saya ingin berbagi mengenai Javascript, yaitu menampilkan tanggal dan waktu pada website Anda. Tanggal dan waktu tersebut akan berganti secara otomatis sesuai tanggal dan waktu pada perangkat yang digunakan untuk menampilkan website.
Langsung saya tunjukkan scriptnya dan sedikit penjelasan.

Menampilkan tanggal dengan Javascript
scriptnya :

<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&#39;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>

Penjelasan :

  • Untuk membuka program javascript menggunakan tag pembuka <script type='text/javascript'> dan diakhiri oleh tag penutup </script>.
  • var merupakan perintah untuk membuat sebuah variable di javascript. jadi months, myDays, date, day, month, thisDay, yy, year merupakan nama variable.
  • Nama-nama hari dan bulan merupakan isi dari variable.
  • document.write merupakan perintah untuk menampilkan isi dari variable-variable yang disebutkan dalam kurung (thisDay + ', ' + day + ' ' + months[month] + ' ' + year)

Menampilkan waktu dengan Javascript
scriptnya :

<script type="text/javascript">
<!--
function startTime() {
    var today=new Date(),
        curr_hour=today.getHours(),
        curr_min=today.getMinutes(),
        curr_sec=today.getSeconds();
curr_hour=checkTime(curr_hour);
    curr_min=checkTime(curr_min);
    curr_sec=checkTime(curr_sec);
    document.getElementById('clock').innerHTML=curr_hour+":"+curr_min+":"+curr_sec;
}
function checkTime(i) {
if (i<10) {
i="0" + i;
}
return i;
}
setInterval(startTime, 500);
//-->
</script>

Penjelasan :
  • Untuk membuka program javascript menggunakan tag pembuka <script type='text/javascript'> dan diakhiri oleh tag penutup </script>.
  • function adalah perintah untuk membuat fungsi yang akan digunakan untuk menampilkan waktu ke halaman website Anda

Ketikkan script di atas di antara tag BODY pada HTML. Maaf apabila saya tidak begitu jelas untuk penjelasannya karena awal script tersebut hanya copas dan saya modifikasi sendiri. Semoga bermanfaat :) selamat berkarya !!

0 comments:

Post a Comment