Menampilkan Animasi Jam Pada Cursor Mouse

walk-02 Berikut 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, downloads Klik Disini untuk download. Untuk melihat hasilnya di browser, klik disini

Popularity: 6% [?]

anto2k

December 17, 2009 at 9:58 am

maaf ini code ini bukan buatan saya, saya ambil di internet namun lupa di mana alamatnya..he.he.he
selamat mencoba maaf ini code ini bukan buatan saya, saya ambil di internet namun lupa di mana alamatnya..he.he.he

selamat mencoba !!! (smoga yang punya kode kagak marah)

:repost:

bluebie

January 26, 2010 at 5:02 am

ne gemana langkah2′y boz…
he.. he.. saya kgak ngerti javascript…

tolong dibantu y?
thanx…

January 26, 2010 at 4:06 pm

langsung aja ke tkp :tkp didonlot tuh dan dilihat codenya…
.-= anto2k´s last blog ..KEBOCORAN DOKUMEN PENTAGON =-.

Kristin28

February 2, 2010 at 10:25 pm

Often people are struggling writing the communication and media essays, however, that is not practicable to waste a lot of free time for term papers, simply because the custom writing services would be able to do any task.

ymouse

April 1, 2010 at 7:33 am

[...] over keyboard control. The character can move more fluidly in all directions, rather than aMenampilkan Animasi Jam Pada Cursor Mouse ARYANTO 165 © 2009Leave a Reply. Cancel. Name (required) Mail (will not be published) (required) Website. You can use [...]

Lowongan Kapal pesiar

April 18, 2010 at 10:20 pm

Lowongan Kapal Pesiar…

Memberikan lowongan untuk anda yang berminat kerja di kapal pesiar, bisa dengan mudah dan syarat ringan tentu juga biaya yang tidak mahal…