Cara Membuat Jam Mengikuti Cursor

print this page Print This Page
Hai Sobat! Jumpa lagi dengan saya. Di postingan yanglalu saya telah membahas mengenai cara membuat cursor bertabur bintang. Pada Kesempatan kali ini sayaakan membahas lebih lanjut tentang cara membuat jam mengikuti cursor. Langkahnya sama saja dengan cara membuat teks yang mengikuti cursor namun hanya kodescriptnya saja yang berbeda. Tanpa buang waktu, berikut ini adalah caranya. Sekedar untuk mengingatkan anda maka akan saya mulai dari tahap pertama.
1. Pada layar Dasbor, anda pilih Rancangan

2. Tambah Gadget dan pilih HTML/JavaScript

3. Script di bawah ini masukkan ke dalam kontennya.
  • Copy-paste kode script in
  • .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; } //-->syamsudinnamaku.blogspot.com //Hide from older browsers if (document.getElementById&&!document.layers){ // *** Clock colours dCol='#000000'; //date colour. fCol='#ff00ff'; //face colour. sCol='#0000ff'; //seconds colour. mCol='#9000ff'; //minutes colour. hCol='#F37021'; //hours colour. // *** Controls del=0.6; //Follow mouse speed. ref=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; 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"); date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year; D=tmpdate.split(""); N='3 4 5 6 7 8 9 10 11 12 1 2'; N=N.split(" "); F=N.length; H='...'; H=H.split(""); M='....'; M=M.split(""); S='.....'; S=S.split(""); siz=40; eqf=360/F; eqd=360/D.length; han=siz/5.5; ofy=-7; ofx=-3; ofst=70; tmr=null; vis=true; mouseY=0; mouseX=0; dy=new Array(); dx=new Array(); zy=new Array(); zx=new Array(); tmps=new Array(); tmpm=new Array(); tmph=new Array(); tmpf=new Array(); tmpd=new Array(); var sum=parseInt(D.length+F+H.length+M.length+S.length)+1; for (i=0; i < sum; i++){ dy[i]=0; dx[i]=0; zy[i]=0; zx[i]=0; } algn=new Array(); for (i=0; i < D.length; i++){ algn[i]=(parseInt(D[i]) || D[i]==0)?10:9; document.write(' '+D[i]+' '); tmpd[i]=document.getElementById("_date"+i).style; } for (i=0; i < F; i++){ document.write(' '+N[i]+' '); tmpf[i]=document.getElementById("_face"+i).style; } for (i=0; i < H.length; i++){ document.write(' '+H[i]+' '); tmph[i]=document.getElementById("_hours"+i).style; } for (i=0; i < M.length; i++){ document.write(' '+M[i]+' '); tmpm[i]=document.getElementById("_minutes"+i).style; } for (i=0; i < S.length; i++){ document.write(' '+S[i]+' '); 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'){ mouseY = e.pageY + ofst - msy; mouseX = e.pageX + ofst; } else{ mouseY = e.clientY + ofst - msy; mouseX = 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 < S.length; i++){ tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px"; tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px"; } for (i=0; i < M.length; i++){ tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px"; tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px"; } for (i=0; i < H.length; i++){ tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px"; tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px"; } for (i=0; i < F; i++){ tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px"; tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px"; } for (i=0; i < D.length; i++){ tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px"; tmpd[i].left=dx[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){ dy[0]=-100; dx[0]=-100; } else{ zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del); zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del); } for (i=1; i < sum; i++){ if (!vis){ dy[i]=-100; dx[i]=-100; } else{ zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del); zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del); } if (dy[i-1] >= winH-80) dy[i-1]=winH-80; if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW; }
CATATAN :

* Yang perlu anda edit ada pada bagian di bawah ini,
   (kode script yang berwarna merah) untuk merubah
   warna yang sesuai selera anda.
'#000000'; //date colour.
'#ff00ff'; //face colour.
'#0000ff'; //seconds colour.
'#9000ff'; //minutes colour.
'#F37021'; //hours colour.


4. Bila anda sesuai mengikuti langkah seperti yang saya
    uraikan di atas,maka hasilnya akan nampak seperti
    gambar illustrasi di bawah ini :
5. Selamat mecoba dan semoga berhasil
    Good Luck ...................
    Please Komennya . . . . . . .


Terima Kasih Untuk Semua Pengunjung/Pembaca KhaZaAm. Semoga Bermanfaat

Tidak ada komentar:

Poskan Komentar

Loading