Cara Mudah Membuat Jam Digital Sesuai Waktu Server dengan Javascript di Website



Cara Mudah Membuat Jam Digital Sesuai Waktu Server dengan Javascript di Website: Membuat jam digital di dalam website merupakan cara seorang untuk menghiasi tampilan website agar telihat lebih user friendly dan menarik..

Pengertian Javascript

JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP, akan tetapi javascript berjalan di sisi Client.

banyak para programer lebih memilih javascript karena kecepatannya dan tidak memberatkan website...untuk mengetahui nilai score kecepatan dan beberapa yang menghambat loading dari website atau blog sobat bisa mengetahuinya dengan mudah..

untuk membuat jam digital kita memerlukan kode javascript.. sebenarnya javascript ini adalah suatu script untuk yang biasa digunakan untuk memproses data secara cepat berbasis client server seperti contoh membuat validasi login dengan ajax tanpa loading di browser...

jadi perubahan yang dilakukan tidak melalui proses loading browser yang memerlukan waktu untuk menampilkannya...

Cara membuat jam digital dengan javascript cukup mudah saja dan nantinya bisa sobat kembangkan lagi menggunakan CSS.

Misalnya, jam ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat ini pada komputer pengguna. Jadi dengan jam digital tampilan website bisa lebih menarik lagi.

Membuat Jam Digital Sederhana Dengan Javascript

Oke mari kita coba membuat jam digital tersebut

1.Buka kode editor sobat. Bisa menggunakan notepad atau codelobster atau yang lainnya

2. Copy saja kode di bawah ini di atas tag </head>
!DOCTYPE html>
<head><title></title>
<body background="jiwa alamku.jpg">
<font color="yellow" size="8" face='Chiller'>
<p>Saat ini waktu menunjukan pukul :<br><span id=”jam”></span></p>
 <hr>
<script type="text/javascript"> 
 //fungsi displayTime yang dipanggil di bodyOnLoad dieksekusi tiap 1000ms = 1detik
 function displayTime()
{
 //buat object date berdasarkan waktu saat ini
 var time = new Date();
 //ambil nilai jam,
 //tambahan script + "" supaya variable sh bertipe string sehingga bisa dihitung panjangnya : sh.length
 var sh = time.getHours() + "";
 //ambil nilai menit
 var sm = time.getMinutes() + "";
 //ambil nilai detik
 var ss = time.getSeconds() + "";
 //tampilkan jam:menit:detik dengan menambahkan angka 0 jika angkanya cuma satu digit (0-9)
 document.getElementById("clock").innerHTML = (sh.length==1?"0"+sh:sh) + ":" + (sm.length==1?"0"+sm:sm) + ":" + (ss.length==1?"0"+ss:ss);
 }
</script>
</head>
<font color="red" size="8" face='elephant'>
<body onload="displayTime();setInterval('displayTime()', 1000);">
<span id="clock"></span>


3. Panggil fungsingnya denga cara<body onload="displayTime();setInterval('displayTime()', 1000);"><span id="clock"></span> taruh kode tersebut di tempat yang memang cocok untuk menampilkan jam digital dan letakan di website sobat…

4. Dan terakhir coba di run

jika script berhasil di run maka akan menampilkan jam digital sesuai dengan waktu server dan akan terus update..

bukan hanya menghiasi saja, tapi akan mempermudah pengunjung untuk melihat waktu hari ini..

oke demikian tutorial cara menampilkan jam digital di website dengan javascript sesuai waktu server ini...untuk lebih mempelajari tentang javascript sobat bisa membaca artikel saya tentang belajar javascript untuk pemula

semoga tutorialnya berhasil dan happy coding

Pemrograman


Artikel Terkait Lainnya:

Next Post
Previous Post
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser