javascript

位置:IT落伍者 >> javascript >> 浏览文章

JavaScript实现酷“网页时钟”


发布日期:2018年08月03日
 
JavaScript实现酷“网页时钟”

只须将如下的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>

               

上一篇:js变量作用域及可访问性的探讨

下一篇:javascript弹出窗口详解