Membuat jam gambar dengan JavaScript

Tampilan jam ini sangat menarik untuk menghias atau mempercantik blogspot anda.

---

Demo :

---

Cara membuatnya :

Langkah pertama :

penempatan kode
dibawah ]]></b:skin>
........
diatas </head>

<script type='text/javascript'>
//<![CDATA[

/***********************************************
* JavaScript Kit (http://www.javascriptkit.com/script/cut9.shtml)
***********************************************/

var imageclock=new Object()
 //Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
 imageclock.digits=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXCtxtGDlHXrYCaU1RoUclIOLjwqLF-XxMGPbinFtzw18bDOAUkt7f4dsVDUfiTmXB9i2FxIBOIaZblacpWbWjFzB1sW16_mZF6G3UDIO-O0sQuIa4EIXtwGZthRW7WKLXZUteB1xavRh/s104/angka+0+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZPVPigPPAZNExZxge8B82z-5l-6G65XFzYWG5lezF-Wn0_5WrRr8V1oZz-HMyuVMYuRE0qgpdjzSOhmFIk-eXOCA-Vq6SugNYqvKMWmQYYCtGIqFWqTIXjcjuNaLYyo4r9M9-D_99GTq/s104/angka+1+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg1n763SoZzZN_pbiTdUrWAeZkQhQHHWc5sPs9EAbSEeVMvTf4btBaeLV_o2sIisQusj7CwHMwwcDkwvltuik9DPM0Iiu3PcxOdthAVG-BSzvGGhol63o_DKm0JSLcIuwVcW44iJ-5ogq2/s104/angka+2+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslOFQf_6hGi-ZsAgLbfWYWZ0qRsKBYxcJ-OjTC8RAyv1dEWiq8h0LzpU7zlrQ2kc6EOGbik7DQIj1df1TxeaTQrHxBl84OABHJTjvs-wUrA7zpa26vL-2N6a0mrtmBhe92NqmJoUvDGDt/s104/angka+3+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI3jfO2VLg_LYKiNdSeWJ7OIu3kCxXp0htjpEAsbEGLV_jzcW5gHQcVRiWkCihayx8XTyncdskqkDH7wyhyphenhyphen_uu4voVCGrZ8dHSnJw8c_CszBekpBNgX9NmR6CWM_Dz_YBDnrBpNWkTk0jf/s104/angka+4+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_kf_VLuXlM0-qGSN3QIIvmqkaImZmov2kmHPAPUZjY6V8vG3_0aXV9OLvxOb7XqF6QoXh57wZzxVbdf0klHrRTsMX-n6Iv35XbFnAlbBH9gl-cGj5BEq9MitTWk1DIZy8QT-Kjl-yCs1/s104/angka+5+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM9sM4aaU4e9BfKHNg9raNaHi6dIhME1EWcDexqfLXdgW1AhUrgaSO-PN7YrwrPInDwQrpDWTPNXv8FJFZI1Mx0sQCdaB8mF_f4LlXV72Dxv4Ff8w3XzJ-nwwBrHGRKcWZOzlw2IAcUX-_/s104/angka+6+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjksF_FtxqVkpdL6dbB8ex6jX103nQyBJSuHAwO7-TIPN7N2FQIZDh08pSEuPdtLK0zMJdj-4lceg-Yc9SzsP1p8wLNHePL1gdboWvAebG7ebD6jBu7lXJf4FtDK4Cfgvxf5oAj5WujOxnc/s104/angka+7+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6Th34Swv3TmuTEqgZ2Xvlmf34T4sNESm8IDDsA8s04MOB3otQMaS8loidu9vrm7eEz8SYUNCxq4sV2ZSWGfJDjoLCBOIblFdsLk95ASobn7VH2ktFZHq4ITzEqNSf8Q5j2QE5Nx8pdgc/s104/angka+8+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkymMOgrXTJiHXHiwzHaafB_hNw1i_Vl4eP1o3quv9IflnJffffQ3HI3VW-bg8sVfeqLdKKoBCBf6omnDpM-R1VqGkWxM0eULxhU35PHZsqiz4Rt67CNFKMDgXDZC2DWPidwWWqLi7FgFB/s104/angka+9+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtqzkWmCnq4xTY9EVXcWCwgavcts8FyWHuco0odRMoB9QkmBNfRKHadfUqUhFEVC5e1KABiwoC8Mk6t1oMyDBjtfCukt2tidvnmzaqkDso9CJj9zXwu2czCl4O-a-fJFiBFGMMqzyt3sj/s104/am+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIkYGT1x5OVvvfZlSzWrjg4uzqfBSyYJ7r68XY93GUes3rfZskX5NcOkPwkAQR5-wlJ6Jx2YFeQDwenQ2_tyx2ZtDcEQmpTwIQkmCLAYZXvZgVx_IBneDd4puINPPsEUXwyqPPcrMR4iYe/s104/pm+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlwkKEzJ4GxWK56SNJG552Kyp0jqaE9iYvblIBVepfkh0Y1fLNwG5zRbVPa2YcpMgr5wGP7YSaDQGkw9eONFbdMZSbt4KhBprMpFecSSC7yVw2naEStZu3XLHIXiKi3DcSj2NtyBEbbXM/s104/titi+dua+-+Nano+Yulianto.gif"]
 imageclock.instances=0
 var preloadimages=[]
 for (var i=0; i<imageclock.digits.length; i++){ //preload images
  preloadimages[i]=new Image()
  preloadimages[i].src=imageclock.digits[i]
 }

 imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
  var sections=timestring.split(":")
  if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
   sections[0]="12"
  else if (sections[0]>=13)
   sections[0]=sections[0]-12+""
  for (var i=0; i<sections.length; i++){
   if (sections[i].length==1)
    sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
   else
    sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
  }
  return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
 }

 imageclock.display=function(){
  var clockinstance=this
  this.spanid="clockspan"+(imageclock.instances++)
  document.write('<span id="'+this.spanid+'"></span>')
  this.update()
  setInterval(function(){clockinstance.update()}, 1000)
 }

 imageclock.display.prototype.update=function(){
  var dateobj=new Date()
  var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
  var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
  document.getElementById(this.spanid).innerHTML=currenttimeHTML

 }
//]]>
</script>

Langkah kedua :

Penempatan kode
dibawah <body>
........
diatas </body>

<script type="text/javascript">
new imageclock.display()
</script>

---

Credit : JavaScript Kit

Alhamdulillah