熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JavaScript實現酷“網頁時鐘”

2013-11-15 11:46:43  來源: JSP教程 

  只須將如下的JavaScript代碼插入到你頁面html的<head>區即可!

  <SCRIPT language=JavaScript>
<!
dCol=yellow; //定義日歷顏色
fCol=#ff; //定義個數的顏色
sCol=#ff; //定義秒針顏色
mCol=#ff; //定義分針顏色
hCol=#ff; //定義時針顏色
ClockHeight=; //定義時鐘的高度
ClockWidth=; //定義時鐘的寬度
ClockFromMouseY=; //定義時鐘的中心距鼠標的相對垂直距離
ClockFromMouseX=; //定義時鐘中心距鼠標的相對水平距離
//以上顏色值你要據你頁面的背景顏色進行修改!注意不要你頁面的背景色一致哦
d=new Array(星期日星期一星期二星期三星期四星期五星期六);
m=new Array(一月二月三月四月五月六月七月八月九月
十月十一月十二月); //以上是給定星期和月份的取值范圍
date=new Date();
day=dategetDate(); //取得當前日期命令
year=dategetYear(); //取得當前年份命令
if (year < ) year=year+;
TodaysDate=+m[dategetMonth()]+ +day++d[dategetDay()]+ +year;
D=TodaysDatesplit(); //顯示某年某月某日
H=;
H=Hsplit();
M=;
M=Msplit();
S=;
S=Ssplit(); //使秒時針反向相應的位置
Face= ;
font=Arial;
size=; //定義秒時針及等字符的宋體大小(最好匆改動哦)
speed=; //定義一旦鼠標位置發生變化時所有相關字符跟隨至前面指定的鼠標的相對位置的速度
能看到各字符的軌跡值可在之間改動(值最小為時跟隨過來的速度最慢值為時跟隨速度最快且與軌跡顯示)
ns=(documentlayers);
ie=(documentall); //說明在NS和IE兩種不同浏覽器裡都適用

  //以下的大段語句定義了NS和IE浏覽器各自如何控制並完成時間和旋轉的日歷跟隨鼠標轉的
Face=Facesplit( );
n=Facelength;
a=size*;
ymouse=;
xmouse=;
scrll=;
props=<font face=+font+ size=+size+ color=+fCol+>;
props=<font face=+font+ size=+size+ color=+dCol+>;
Split=/n;
Dsplit=/Dlength;
HandHeight=ClockHeight/
HandWidth=ClockWidth/
HandY=;
HandX=;
scrll=;
step=;
currStep=;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=; i < n; i++){y[i]=;x[i]=;Y[i]=;X[i]=}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=; i < Dlength; i++){Dy[i]=;Dx[i]=;DY[i]=;DX[i]=}

  if (ns){
for (i=; i < Dlength; i++)
documentwrite(<layer name=nsDate+i+ top= left= height=+a+ width=+a+><center>+props+D[i]+</font></center></layer>);
for (i=; i < n; i++)
documentwrite(<layer name=nsFace+i+ top= left= height=+a+ width=+a+><center>+props+Face[i]+</font></center></layer>);
for (i=; i < Slength; i++)
documentwrite(<layer name=nsSeconds+i+ top= left= width=
height=><font face=Arial size= color=+sCol+><center><b>+S[i]+</b></center></font></layer>);
for (i=; i < Mlength; i++)
documentwrite(<layer name=nsMinutes+i+ top= left= width=
height=><font face=Arial size= color=+mCol+><center><b>+M[i]+</b></center></font></layer>);
for (i=; i < Hlength; i++)
documentwrite(<layer name=nsHours+i+ top= left= width=
height=><font face=Arial size= color=+hCol+><center><b>+H[i]+</b></center></font></layer>);
}

  if (ie){
documentwrite(<div id=Od ><div >);
for (i=; i < Dlength; i++)
documentwrite(<div id=ieDate >+props+D[i]+</font></div>);
documentwrite(</div></div>);
documentwrite(<div id=Of ><div >);
for (i=; i < n; i++)
documentwrite(<div id=ieFace >+props+Face[i]+</font></div>);
documentwrite(</div></div>);
documentwrite(<div id=Oh ><div >);
for (i=; i < Hlength; i++)
documentwrite(<div id=ieHours >+H[i]+</div>);
documentwrite(</div></div>);
documentwrite(<div id=Om ><div >);
for (i=; i < Mlength; i++)
documentwrite(<div id=ieMinutes >+M[i]+</div>);
documentwrite(</div></div>)
documentwrite(<div id=Os ><div >);
for (i=; i < Slength; i++)
documentwrite(<div id=ieSeconds >+S[i]+</div>);
documentwrite(</div></div>)
}
(ns)?windowcaptureEvents(EventMOUSEMOVE):;
function Mouse(evnt){
ymouse = (ns)?evntpageY+ClockFromMouseY(windowpageYOffset):
eventy+ClockFromMouseY;
xmouse = (ns)?evntpageX+ClockFromMouseX:eventx+ClockFromMouseX;
}
(ns)?windowonMouseMove=Mouse:documentonmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = timegetSeconds();
sec = + MathPI * secs/;
mins = timegetMinutes();
min = + MathPI * mins/;
hr = timegetHours();
hrs = + MathPI * hr/+MathPI*parseInt(timegetMinutes())/;
if (ie){
Odstyletop=windowdocumentbodyscrollTop;
Ofstyletop=windowdocumentbodyscrollTop;
Ohstyletop=windowdocumentbodyscrollTop;
Omstyletop=windowdocumentbodyscrollTop;
Osstyletop=windowdocumentbodyscrollTop;
}
for (i=; i < n; i++){
var F=(ns)?documentlayers[nsFace+i]:ieFace[i]style;
Ftop=y[i] + ClockHeight*Mathsin( + i*Split*MathPI/)+scrll;
Fleft=x[i] + ClockWidth*s( + i*Split*MathPI/);
}
for (i=; i < Hlength; i++){
var HL=(ns)?documentlayers[nsHours+i]:ieHours[i]style;
HLtop=y[i]+HandY+(i*HandHeight)*Mathsin(hrs)+scrll;
HLleft=x[i]+HandX+(i*HandWidth)*s(hrs);
}
for (i=; i < Mlength; i++){
var ML=(ns)?documentlayers[nsMinutes+i]:ieMinutes[i]style;
MLtop=y[i]+HandY+(i*HandHeight)*Mathsin(min)+scrll;
MLleft=x[i]+HandX+(i*HandWidth)*s(min);
}
for (i=; i < Slength; i++){
var SL=(ns)?documentlayers[nsSeconds+i]:ieSeconds[i]style;
SLtop=y[i]+HandY+(i*HandHeight)*Mathsin(sec)+scrll;
SLleft=x[i]+HandX+(i*HandWidth)*s(sec);
}
for (i=; i < Dlength; i++){
var DL=(ns)?documentlayers[nsDate+i]:ieDate[i]style;
DLtop=Dy[i] + ClockHeight**Mathsin(currStep+i*Dsplit*MathPI/)+scrll;
DLleft=Dx[i] + ClockWidth**s(currStep+i*Dsplit*MathPI/);
}
currStep=step;
}
function Delay(){
scrll=(ns)?windowpageYOffset:;
Dy[]=Mathround(DY[]+=((ymouse)DY[])*speed);
Dx[]=Mathround(DX[]+=((xmouse)DX[])*speed);
for (i=; i < Dlength; i++){
Dy[i]=Mathround(DY[i]+=(Dy[i]DY[i])*speed);
Dx[i]=Mathround(DX[i]+=(Dx[i]DX[i])*speed);
}
y[]=Mathround(Y[]+=((ymouse)Y[])*speed);
x[]=Mathround(X[]+=((xmouse)X[])*speed);
for (i=; i < n; i++){
y[i]=Mathround(Y[i]+=(y[i]Y[i])*speed);
x[i]=Mathround(X[i]+=(x[i]X[i])*speed);
}
ClockAndAssign();
setTimeout(Delay());
}
if (ns||ie)windowonload=Delay;
//>
</SCRIPT>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19603.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.