Home > JavaScript Blogger > 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/AVvXsEiCtPiITX8HphCBPvkTrVvW8zSWQfvUkiF_l1fRJqTdegqTWhHWW5_Z7wsrxMFfBxF-c9eLNM00uSks5yxtEaS-pcOMKXxQpB4wqwLA9P0y0Rf7k0-hqrEGQOJ9yhGkC8tKe4bW6W5A9BWV/s104/angka+0+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf7uvYylFhJRoByMBS-tgs8fcYU1qVmFExhi4d6GtZ_sNPd7QQDnpvFBwIeZL20Be0Aet_B2u7k0EydYFWkDGyXQVmjTvER_VBe-ovjSON43ln-HvgjzuAKt2ST9Y-OyXeMpNTMSSFo6nl/s104/angka+1+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVFQ6FhgPd4VCKQu4ZYrTEOHwtZzFN_ERntt70c4-mCoUUf4lWHdKhTuV86bc7NjYG9HTeQGjPkrXcoNtJZWy79kP5nY4LFAyDaf32yhL_bKYjtehcvd875NF33CjCvnBNCTvVqJGpTg-/s104/angka+2+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtDG4Vy1_tWBwQ2fTCNY83XoCm5hX6GhqfUTo_Aov-04Z4kAq4jiQOmTIAZbeWAPABrSVYW9xDmq86bk6KNWONcBri9b9IcheVRoKbd75IDgUDAmAg7Asgdlf1HOrdUhM-DKW-9SVP5hH/s104/angka+3+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2D0CH4vjqEn7QG8yuPN7AS5qy68vkqA7CvVLWRakcpMQo7ZBu4H8Srwq2Zxvohk_i7XbtM_yvG3oAdojkZ6Ar2RXuJOe6qfliK_zmBroLA1l9YKU-IJpsW9toYZCo807Nc-MRpawePB5Z/s104/angka+4+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhudJWacS2Axa3NXBNw57mCjyfxrTCrhZFOm2f4xeBO8XViSR4rUetiXY4HFD53uOqWuZxsAfd24CMocBNk4Mvmt1y2lpm90xbiUt0Tf32BLHBW0jKpAnc3V8Hw9YRUNDzJkHj4E1lq9GhN/s104/angka+5+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKK1ukRsuKSaMKdhmyK2oiSa3er8gYMQLninVs_j10REfBfEGbREm1BMw61BKwK2JUsqAfiv0ojYjsbbTbzjTUUgUwL8AJa8ondnjOYHVo8fgjekhCVxrUW2uDG82OdIUAAR3cEAXBCv0/s104/angka+6+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9zWsGbeE4ARebr1iLUV6ho4UuFsVbFAIN1JUIxnkuzeoGwfwD3R_xhC-pDO_icGS6vWTUKUhtXIPLrh2ORhNkRZ5MKEumokbXH4dHYYNhVyr28lgwq2AcM-E8-D-JO5S2VhuSm7ISSZ7i/s104/angka+7+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiENbgP1ftqCN0NjSL4UdMhUQ18e2a-MwuNklkMlE72Ce4ec02nJs9htzy6jPh3kn86G84WKAXBm6tI1St9tqDK7MuvtE_3hXujUgeE9DbZfd4tLdKglXlN1WAT9siBmAUkPBzEYY1iD8so/s104/angka+8+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiP_Q2kAFmKRWSmRrxUigdvL8OgOg8ndaf4JdeZ8vAdEr_s0e0YobeR5DLnFhYHnGXt8_lwdSc2m5OnBAB9D5dgOBgj2avR1TIWb4bj06YVm3szNNNruWjLoULzrr-cWX1RyQrHLeQLvtU/s104/angka+9+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0TEY_ql7YVLO1GoC4L3CEycSRADcIj-W0KmC5giK3SKSxduvX38rE8Ct8sdLJp0wvtrvtqm_nqOjbjlcs9HLW1AMBLphiuEqsGH5ffclycLxhbauZKprDT1_XMEGEkNnzFp9Utjgj_Og/s104/am+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisz9y6I0nPNj5SATjO8qFCUv0T8sHYm4zajbxmUFQaeaUbLHiIDaqgycZbNN22yziMXGkhYrKgxFYQtv0tPYUGhEEJJ1coBHWF5-RVYqZny0Cd_Oh-vw1klEQMiuTdxmxGWzCUaF19ZR3Z/s104/pm+-+Nano+Yulianto.gif", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_VlzYkoAUkvR9T8xF4toHBcJdekN95FyYTAZLKDBwQI0phNgT7gECi8LcosOg_q0x1HCbjLZ4tHHb1RvVz_cken1jX4VypNijmx_PUMcaMHaIC0SkHJqNun8JTLkMtv6za_NGlRmqI7Nd/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
