Announcement

December 2009
M T W T F S S
« Nov   Jan »
 123456
78910111213
14151617181920
21222324252627
28293031  

Archives

Categories

Tags

Where are You From?

Menampilkan Animasi Jam Pada Cursor Mouse

walk-02Berikut ini adalah code (berbasis JavaScripts) untuk menampilkan animasi yang cukup menarik
berupa sebuah jam didekat cursor mouse anda yang menampil tanggal Hari, tanggal, bulan, tahun yang berputar
beserta jam…. cukup bagus untuk dicoba

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT language=JavaScript>
 
dCol='BBBBBB';//date colour.
 
fCol='666666';//face colour.
 
sCol='AACCFF';//seconds colour.
 
mCol='000000';//minutes colour.
 
hCol='000000';//hours colour.
 
ClockHeight=40;
 
ClockWidth=40;
 
ClockFromMouseY=0;
 
ClockFromMouseX=100;
 
 
 
d=new Array("MINGGU","SENIN","SELASA","RABU","KAMIS","JUMAT","SABTU");
 
m=new Array("JANUAR1","FEBRUAR1","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER","OKTOBER","NOVEMBER","DESEMBER");
 
date=new Date();
 
day=date.getDate();
 
year=date.getYear();
 
if (year < 2000) year=year+1900;
 
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
 
D=TodaysDate.split('');
 
H='...';
 
H=H.split('');
 
M='....';
 
M=M.split('');
 
S='.....';
 
S=S.split('');
 
Face='1 2 3 4 5 6 7 8 9 10 11 12';
 
font='Arial';
 
size=1;
 
speed=0.6;
 
ns=(document.layers);
 
ie=(document.all);
 
Face=Face.split(' ');
 
n=Face.length;
 
a=size*10;
 
ymouse=0;
 
xmouse=0;
 
scrll=0;
 
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
 
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
 
Split=360/n;
 
Dsplit=360/D.length;
 
HandHeight=ClockHeight/4.5
 
HandWidth=ClockWidth/4.5
 
HandY=-7;
 
HandX=-2.5;
 
scrll=0;
 
step=0.06;
 
currStep=0;
 
y=new Array();x=new Array();Y=new Array();X=new Array();
 
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
 
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
 
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
 
if (ns){
 
for (i=0; i < D.length; i++)
 
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
 
for (i=0; i < n; i++)
 
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
 
for (i=0; i < S.length; i++)
 
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
 
for (i=0; i < M.length; i++)
 
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
 
for (i=0; i < H.length; i++)
 
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
 
}
 
if (ie){
 
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < D.length; i++)
 
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
 
document.write('</div></div>');
 
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < n; i++)
 
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
 
document.write('</div></div>');
 
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < H.length; i++)
 
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
 
document.write('</div></div>');
 
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < M.length; i++)
 
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
 
document.write('</div></div>')
 
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < S.length; i++)
 
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
 
document.write('</div></div>')
 
}
 
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
 
function Mouse(evnt){
 
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
 
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
 
}
 
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
 
function ClockAndAssign(){
 
time = new Date ();
 
secs = time.getSeconds();
 
sec = -1.57 + Math.PI * secs/30;
 
mins = time.getMinutes();
 
min = -1.57 + Math.PI * mins/30;
 
hr = time.getHours();
 
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
 
if (ie){
 
Od.style.top=window.document.body.scrollTop;
 
Of.style.top=window.document.body.scrollTop;
 
Oh.style.top=window.document.body.scrollTop;
 
Om.style.top=window.document.body.scrollTop;
 
Os.style.top=window.document.body.scrollTop;
 
}
 
for (i=0; i < n; i++){
 
 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
 
 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
 
 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
 
 }
 
for (i=0; i < H.length; i++){
 
 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
 
 HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
 
 HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
 
 }
 
for (i=0; i < M.length; i++){
 
 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
 
 ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
 
 ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
 
 }
 
for (i=0; i < S.length; i++){
 
 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
 
 SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
 
 SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
 
 }
 
for (i=0; i < D.length; i++){
 
 var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
 
 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
 
 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
 
 }
 
currStep-=step;
 
}
 
function Delay(){
 
scrll=(ns)?window.pageYOffset:0;
 
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
 
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
 
for (i=1; i < D.length; i++){
 
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
 
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
 
}
 
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
 
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
 
for (i=1; i < n; i++){
 
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
 
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
 
}
 
ClockAndAssign();
 
setTimeout('Delay()',20);
 
}
 
if (ns||ie)window.onload=Delay;
 
</SCRIPT>
 
 
</head>
 
<body>
</body>
</html>

Selamat mencoba
Mau download listing codenya? boleh, downloadsKlik Disini untuk download. Untuk melihat hasilnya di browser, klik disini

16 comments to Menampilkan Animasi Jam Pada Cursor Mouse

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

[+] kaskus emoticons nartzco

 
What is 9 + 9 ?
Please leave these two fields as-is: