JavaScript Jam Mengikuti Cursor

Memasang jam yang mengikuti pointer kursor mouse dengan jarum detik dan tanggal yang memutar. Jam ini menggunakan data Hari, Tanggal dan Waktu yang ada pada komputer pengunjung. Cara pemasangan script waktu ini cukup mudah dan anda tidak perlu merubah keseluruhan script ini karena semua itu akan mengubah koordinat dan membuat script tidak bisa berjalan. Oke buat yang berminat langsung aja menuju TKP....

• Login ke blog anda.
• Klik "Tata Letak" kemudian klik "Tambahkan Gadget" dan pilih "HTML/Javascript".
• Copy-paste kode berikut ini di kotak postingan gadget.
  
  
  <style type="text/css"> .css1{ position:absolute;top:0px;left:0px; width:16px;height:16px; font-family:Arial,sans-serif; font-size:16px; text-align:center; font-weight:bold; } .css2{ position:absolute;top:0px;left:0px; width:10px;height:10px; font-family:Arial,sans-serif; font-size:10px; text-align:center; } </style> <script> /* Clock Configuration */ mozdCol='black'; /*date colour.*/ mozfCol='purple'; /*face colour.*/ mozsCol='blue'; /*seconds colour.*/ mozmCol='red'; /*minutes colour.*/ mozhCol='gold'; /*hours colour.*/ theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"); theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"); </script> <script> if (document.getElementById&&!document.layers){ /* Controls */ mozdel=0.6; /*Follow mouse speed.*/ mozref=40; /*Run speed (timeout).*/ /* Alter nothing below! Alignments will be lost! */ var ieType=(typeof window.innerWidth != 'number'); var docComp=(document.compatMode); var docMod=(docComp && docComp.indexOf("CSS") != -1); var ieRef=(ieType && docMod) ?document.documentElement:document.body; mozdate=new Date(); mozday=mozdate.getDate(); mozyear=mozdate.getYear(); if (mozyear < 2000) mozyear=mozyear+1900; tmpdate=" "+theDays[mozdate.getDay()]+" "+mozday+" "+theMonths[mozdate.getMonth()]+" "+mozyear; Dtemp=tmpdate.split(""); Ntemp='3 4 5 6 7 8 9 10 11 12 1 2'; Ntemp=Ntemp.split(" "); Ftemp=Ntemp.length; Htemp='...'; Htemp=Htemp.split(""); Mtemp='....'; Mtemp=Mtemp.split(""); Stemp='.....'; Stemp=Stemp.split(""); siz=40; eqf=360/Ftemp; eqd=360/Dtemp.length; han=siz/5.5; ofy=-7; ofx=-3; ofst=70; tmr=null; vis=true; mouseYClock=0; mouseXClock=0; dyClock=new Array(); dxClock=new Array(); zyClock=new Array(); zxClock=new Array(); tmps=new Array(); tmpm=new Array(); tmph=new Array(); tmpf=new Array(); tmpd=new Array(); var sumClock=parseInt(Dtemp.length+Ftemp+Htemp.length+Mtemp.length+Stemp.length)+1; for (i=0; i < sumClock; i++){ dyClock[i]=0; dxClock[i]=0; zyClock[i]=0; zxClock[i]=0; } algn=new Array(); for (i=0; i < Dtemp.length; i++){ algn[i]=(parseInt(Dtemp[i]) || Dtemp[i]==0)?10:9; $('body').append('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+mozdCol+'">'+Dtemp[i]+'<\/div>'); tmpd[i]=document.getElementById("_date"+i).style; } for (i=0; i < Ftemp; i++){ $('body').append('<div id="_face'+i+'" class="css2" style="color:'+mozfCol+'">'+Ntemp[i]+'<\/div>'); tmpf[i]=document.getElementById("_face"+i).style; } for (i=0; i < Htemp.length; i++){ $('body').append('<div id="_hours'+i+'" class="css1" style="color:'+mozhCol+'">'+Htemp[i]+'<\/div>'); tmph[i]=document.getElementById("_hours"+i).style; } for (i=0; i < Mtemp.length; i++){ $('body').append('<div id="_minutes'+i+'" class="css1" style="color:'+mozmCol+'">'+Mtemp[i]+'<\/div>'); tmpm[i]=document.getElementById("_minutes"+i).style; } for (i=0; i < Stemp.length; i++){ $('body').append('<div id="_seconds'+i+'" class="css1" style="color:'+mozsCol+'">'+Stemp[i]+'<\/div>'); tmps[i]=document.getElementById("_seconds"+i).style; } function onoff(){ if (vis){ vis=false; document.getElementById("control").value="Clock On"; } else{ vis=true; document.getElementById("control").value="Clock Off"; Delay(); } kill(); } function kill(){ if (vis) document.onmousemove=mouse; else document.onmousemove=null; } function mouse(e){ var msy = (!ieType)?window.pageYOffset:0; if (!e) e = window.event; if (typeof e.pageY == 'number'){ mouseYClock = e.pageY + ofst - msy; mouseXClock = e.pageX + ofst; } else{ mouseYClock = e.clientY + ofst - msy; mouseXClock = e.clientX + ofst; } if (!vis) kill(); } document.onmousemove=mouse; function winDims(){ winH=(ieType)?ieRef.clientHeight:window.innerHeight; winW=(ieType)?ieRef.clientWidth:window.innerWidth; } winDims(); window.onresize=new Function("winDims()"); function ClockAndAssign(){ time = new Date(); secs = time.getSeconds(); sec = Math.PI * (secs-15) / 30; mins = time.getMinutes(); min = Math.PI * (mins-15) / 30; hrs = time.getHours(); hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360; for (i=0; i < Stemp.length; i++){ tmps[i].top=dyClock[Dtemp.length+Ftemp+Htemp.length+Mtemp.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px"; tmps[i].left=dxClock[Dtemp.length+Ftemp+Htemp.length+Mtemp.length+i]+ofx+(i*han)*Math.cos(sec)+"px"; } for (i=0; i < Mtemp.length; i++){ tmpm[i].top=dyClock[Dtemp.length+Ftemp+Htemp.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px"; tmpm[i].left=dxClock[Dtemp.length+Ftemp+Htemp.length+i]+ofx+(i*han)*Math.cos(min)+"px"; } for (i=0; i < Htemp.length; i++){ tmph[i].top=dyClock[Dtemp.length+Ftemp+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px"; tmph[i].left=dxClock[Dtemp.length+Ftemp+i]+ofx+(i*han)*Math.cos(hr)+"px"; } for (i=0; i < Ftemp; i++){ tmpf[i].top=dyClock[Dtemp.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px"; tmpf[i].left=dxClock[Dtemp.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px"; } for (i=0; i < Dtemp.length; i++){ tmpd[i].top=dyClock[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px"; tmpd[i].left=dxClock[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px"; } if (!vis)clearTimeout(tmr); } buffW=(ieType)?80:90; function Delay(){ scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset; if (!vis){ dyClock[0]=-100; dxClock[0]=-100; } else{ zyClock[0]=Math.round(dyClock[0]+=((mouseYClock)-dyClock[0])*mozdel); zxClock[0]=Math.round(dxClock[0]+=((mouseXClock)-dxClock[0])*mozdel); } for (i=1; i < sumClock; i++){ if (!vis){ dyClock[i]=-100; dxClock[i]=-100; } else{ zyClock[i]=Math.round(dyClock[i]+=(zyClock[i-1]-dyClock[i])*mozdel); zxClock[i]=Math.round(dxClock[i]+=(zxClock[i-1]-dxClock[i])*mozdel); } if (dyClock[i-1] >= winH-80) dyClock[i-1]=winH-80; if (dxClock[i-1] >= winW-buffW) dxClock[i-1]=winW-buffW; } tmr=setTimeout('Delay()',mozref); ClockAndAssign(); } window.onload=Delay; } </script>
  Keterangan :
  

  • Silakan sesuaikan parameter variabel warna agar sesuai dengan tema template blog atau website sobat.
  • Nama bulan dan nama hari pada variabel kode diatas bisa diganti dengan bermacam bahasa tinggal merubah kata-katanya saja.


• Klik "Save" dan lihat hasilnya..

.:Selamat Mencoba:.