Pasang Jam di Blog dengan Javascript - Beberapa waktu yang lalu saat saya mengunjungi blognya Andre Pandet aka Urang Kurai yang nggak tau kenapa blognya kesannya terlalu dark itu dan saat saya masuk ke halaman front, saya melihat ada jam live di sana. Sengaja di pasang dan memang diset dengan jam Indonesia.
Sepertinya blog dipasang jam semacam itu seru juga ya. Hanya menggunakan efek perintah dari Javascript, kita sudah bisa menampilkan item Jam tanpa menggunakan widget yang terkesan memberatkan loading page blog.
Mau tau hasil akhirnya seperti apa. Silahkan lihat Jam di atas halaman ini yang berjalan secara live, berwarna kuning. Dan seperti itu lah hasil akhirnya nanti. Waktu yang ditampilkan pun adalah waktu yang sesuai dengan server dan tidak terpengaruh dengan waktu pada client.
Baiklah, langsung saja kita mengintip scriptnya seperti apa. Silahkan copas saja script Javascript di bawah ini sebelum atribut </head> :
<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>
Selanjutnya cari atribut body dengan cara menekan CTRL+F dan cari <body>. Jika sudah ketemu ganti atribut tersebut dengan kode di bawah ini :
<body onload="displayTime();setInterval('displayTime()', 1000);">
Kemudian kalian bisa meletakkan kode di bawah ini via template atau new gadget di blog kalian masing-masing untuk menampilkan efek jam-nya :
<span id="clock" style='color: yellow;'></span>
Jika semua langkah di atas sudah kalian lakukan, silahkan untuk simpan dan testing halaman blog kalian, apakah Jam tampil dengan format yang diinginkan atau tidak. Jika ada kegagalan, silahkan konsultasi dengan admin, bisa via chat maupun email ya.
Tutorial Cara Menampilkan Jam Live di Blog ini tidak dianjurkan untuk newbie atau pemula. Diharapkan yang sudah faham HTML dan Javascript.
Source : http://soesapto.hantoro.web.id/2012/09/menampilkan-waktu-secara-live-dengan-javascript/
Tidak ada komentar:
Posting Komentar