各位各位，大家好哇！都見(jiàn)識(shí)過(guò)網(wǎng)頁(yè)上不少種類的日歷和時(shí)鐘吧，網(wǎng)頁(yè)上的日歷和時(shí)鐘到底要怎么做呢，或者說(shuō)要怎么做出特別的日歷時(shí)鐘！

JavaScript教程之網(wǎng)頁(yè)時(shí)鐘

　　今天給各位介紹的這個(gè)“跟著鼠標(biāo)跑的時(shí)鐘和日歷”極COOL的，準(zhǔn)保你沒(méi)見(jiàn)過(guò)！

　　只須將如下的JavaScript代碼插入到你頁(yè)面html的《head》區(qū)即可！

　　dCol=´yellow´; //定義日歷顏色《BR》fCol=´#ff0000´; //定義1-12這12個(gè)數(shù)的顏色《BR》sCol=´#00ff00´; //定義秒針顏色《BR》mCol=´#0000ff´; //定義分針顏色《BR》hCol=´#ff0000´; //定義時(shí)針顏色《BR》ClockHeight=40; //定義時(shí)鐘的高度《BR》ClockWidth=40; //定義時(shí)鐘的寬度《BR》ClockFromMouseY=0; //定義時(shí)鐘的中心距鼠標(biāo)的相對(duì)垂直距離《BR》ClockFromMouseX=100; //定義時(shí)鐘中心距鼠標(biāo)的相對(duì)水平距離《BR》//以上顏色值你要據(jù)你頁(yè)面的背景顏色進(jìn)行修改！注意不要你頁(yè)面的背景色一致哦。《BR》d=new Array（“星期日”，“星期一”，“星期二”，“星期三”，“星期四”，“星期五”，“星期六”）;《BR》m=new Array（“一月”，“二月”，“三月”，“四月”，“五月”，“六月”，“七月”，“八月”，“九月”，《BR》“十月”，“十一月”，“十二月”）; //以上是給定星期和月份的取值范圍《BR》date=new Date（）;《BR》day=date.getDate（）; //取得當(dāng)前日期命令《BR》year=date.getYear（）; //取得當(dāng)前年份命令《BR》if （year 《 2000） year=year+1900;《BR》TodaysDate=“年 ”+m［date.getMonth（）］+“ ”+day+“日 ”+d［date.getDay（）］+“ ”+year;《BR》D=TodaysDate.split（´´）; //顯示“某年某月某日”《BR》H=´。..´;《BR》H=H.split（´´）;《BR》M=´。..。´;《BR》M=M.split（´´）;《BR》S=´。..。.´;《BR》S=S.split（´´）; //使秒、分、時(shí)針?lè)聪蛳鄳?yīng)的位置《BR》Face=´1 2 3 4 5 6 7 8 9 10 11 12´;《BR》font=´Arial´;《BR》size=1; //定義秒、分、時(shí)針及1-12等字符的宋體、大小（最好匆改動(dòng)哦）《BR》speed=0.8; //定義一旦鼠標(biāo)位置發(fā)生變化時(shí)所有相關(guān)字符跟隨至前面指定的鼠標(biāo)的相對(duì)位置的速度，《BR》能看到各字符的軌跡，值可在0.1-1.0之間改動(dòng)（值最小為0.1時(shí)跟隨過(guò)來(lái)的速度最慢，值為1.0時(shí)跟隨速度最快且與軌跡顯示）《BR》ns=（document.layers）;《BR》ie=（document.all）; //說(shuō)明在NS和IE兩種不同瀏覽器里都適用《BR》《BR》//以下的大段語(yǔ)句定義了NS和IE瀏覽器各自如何控制并完成時(shí)間和旋轉(zhuǎn)的日歷跟隨鼠標(biāo)轉(zhuǎn)的《BR》Face=Face.split（´ ´）;《BR》n=Face.length;《BR》a=size*10;《BR》ymouse=0;《BR》xmouse=0;《BR》scrll=0;《BR》props=“《font face=”+font+“ size=”+size+“ color=”+fCol+“》”;《BR》props2=“《font face=”+font+“ size=”+size+“ color=”+dCol+“》”;《BR》Split=360/n;《BR》Dsplit=360/D.length;《BR》HandHeight=ClockHeight/4.5《BR》HandWidth=ClockWidth/4.5《BR》HandY=-7;《BR》HandX=-2.5;《BR》scrll=0;《BR》step=0.06;《BR》currStep=0;《BR》y=new Array（）;x=new Array（）;Y=new Array（）;X=new Array（）;《BR》for （i=0; i 《 n; i++）{y［i］=0;x［i］=0;Y［i］=0;X［i］=0}《BR》Dy=new Array（）;Dx=new Array（）;DY=new Array（）;DX=new Array（）;《BR》for （i=0; i 《 D.length; i++）{Dy［i］=0;Dx［i］=0;DY［i］=0;DX［i］=0}《BR》《BR》if （ns）{《BR》for （i=0; i 《 D.length; i++）《BR》document.write（´《layer name=“nsDate´+i+´” top=0 left=0 height=´+a+´ width=´+a+´》《center》´+props2+D［i］+´《/font》《/center》《/layer》´）;《BR》for （i=0; i 《 n; i++）《BR》document.write（´《layer name=“nsFace´+i+´” top=0 left=0 height=´+a+´ width=´+a+´》《center》´+props+Face［i］+´《/font》《/center》《/layer》´）;《BR》for （i=0; i 《 S.length; i++）《BR》document.write（´《layer name=nsSeconds´+i+´ top=0 left=0 width=15《BR》height=15》《font face=Arial size=3 color=´+sCol+´》《center》《b》´+S［i］+´《/b》《/center》《/font》《/layer》´）;《BR》for （i=0; i 《 M.length; i++）《BR》document.write（´《layer name=nsMinutes´+i+´ top=0 left=0 width=15《BR》height=15》《font face=Arial size=3 color=´+mCol+´》《center》《b》´+M［i］+´《/b》《/center》《/font》《/layer》´）;《BR》for （i=0; i 《 H.length; i++）《BR》document.write（´《layer name=nsHours´+i+´ top=0 left=0 width=15《BR》height=15》《font face=Arial size=3 color=´+hCol+´》《center》《b》´+H［i］+´《/b》《/center》《/font》《/layer》´）;《BR》}《BR》《BR》if （ie）{《BR》document.write（´《div id=“Od” style=“position:absolute;top:0px;left:0px”》《div style=“position:relative”》´）;《BR》for （i=0; i 《 D.length; i++）《BR》document.write（´《div id=“ieDate” style=“position:absolute;top:0px;left:0;height：´+a+´;width：´+a+´;text-align:center”》´+props2+D［i］+´《/font》《/div》´）;《BR》document.write（´《/div》《/div》´）;《BR》document.write（´《div id=“Of” style=“position:absolute;top:0px;left:0px”》《div style=“position:relative”》´）;《BR》for （i=0; i 《 n; i++）《BR》document.write（´《div id=“ieFace” style=“position:absolute;top:0px;left:0;height：´+a+´;width：´+a+´;text-align:center”》´+props+Face［i］+´《/font》《/div》´）;《BR》document.write（´《/div》《/div》´）;《BR》document.write（´《div id=“Oh” style=“position:absolute;top:0px;left:0px”》《div style=“position:relative”》´）;《BR》for （i=0; i 《 H.length; i++）《BR》document.write（´《div id=“ieHours” style=“position:absolute;width:16px;《BR》height:16px;font-family:Arial;font-size:16px;color：´+hCol+´;text-align:center;font-weight:bold”》´+H［i］+´《/div》´）;《BR》document.write（´《/div》《/div》´）;《BR》document.write（´《div id=“Om” style=“position:absolute;top:0px;left:0px”》《div style=“position:relative”》´）;《BR》for （i=0; i 《 M.length; i++）《BR》document.write（´《div id=“ieMinutes” style=“position:absolute;width:16px;《BR》height:16px;font-family:Arial;font-size:16px;color：´+mCol+´;text-align:center;font-weight:bold”》´+M［i］+´《/div》´）;《BR》document.write（´《/div》《/div》´）《BR》document.write（´《div id=“Os” style=“position:absolute;top:0px;left:0px”》《div style=“position:relative”》´）;《BR》for （i=0; i 《 S.length; i++）《BR》document.write（´《div id=“ieSeconds” style=“position:absolute;width:16px;《BR》height:16px;font-family:Arial;font-size:16px;color：´+sCol+´;text-align:center;font-weight:bold”》´+S［i］+´《/div》´）;《BR》document.write（´《/div》《/div》´）《BR》}《BR》（ns）？window.captureEvents（Event.MOUSEMOVE）：0;《BR》function Mouse（evnt）{《BR》ymouse = （ns）？evnt.pageY+ClockFromMouseY-（window.pageYOffset）：《BR》event.y+ClockFromMouseY;《BR》xmouse = （ns）？evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;《BR》}《BR》（ns）？window.onMouseMove=Mouse:document.onmousemove=Mouse;《BR》function ClockAndAssign（）{《BR》time = new Date （）;《BR》secs = time.getSeconds（）;《BR》sec = -1.57 + Math.PI * secs/30;《BR》mins = time.getMinutes（）;《BR》min = -1.57 + Math.PI * mins/30;《BR》hr = time.getHours（）;《BR》hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt（time.getMinutes（））/360;《BR》if （ie）{《BR》Od.style.top=window.document.body.scrollTop;《BR》Of.style.top=window.document.body.scrollTop;《BR》Oh.style.top=window.document.body.scrollTop;《BR》Om.style.top=window.document.body.scrollTop;《BR》Os.style.top=window.document.body.scrollTop;《BR》}《BR》for （i=0; i 《 n; i++）{《BR》var F=（ns）？document.layers［´nsFace´+i］：ieFace［i］.style;《BR》F.top=y［i］ + ClockHeight*Math.sin（-1.0471 + i*Split*Math.PI/180）+scrll;《BR》F.left=x［i］ + ClockWidth*Math.cos（-1.0471 + i*Split*Math.PI/180）;《BR》}《BR》for （i=0; i 《 H.length; i++）{《BR》var HL=（ns）？document.layers［´nsHours´+i］：ieHours［i］.style;《BR》HL.top=y［i］+HandY+（i*HandHeight）*Math.sin（hrs）+scrll;《BR》HL.left=x［i］+HandX+（i*HandWidth）*Math.cos（hrs）;《BR》}《BR》for （i=0; i 《 M.length; i++）{《BR》var ML=（ns）？document.layers［´nsMinutes´+i］：ieMinutes［i］.style;《BR》ML.top=y［i］+HandY+（i*HandHeight）*Math.sin（min）+scrll;《BR》ML.left=x［i］+HandX+（i*HandWidth）*Math.cos（min）;《BR》}《BR》for （i=0; i 《 S.length; i++）{《BR》var SL=（ns）？document.layers［´nsSeconds´+i］：ieSeconds［i］.style;《BR》SL.top=y［i］+HandY+（i*HandHeight）*Math.sin（sec）+scrll;《BR》SL.left=x［i］+HandX+（i*HandWidth）*Math.cos（sec）;《BR》}《BR》for （i=0; i 《 D.length; i++）{《BR》var DL=（ns）？document.layers［´nsDate´+i］：ieDate［i］.style;《BR》DL.top=Dy［i］ + ClockHeight*1.5*Math.sin（currStep+i*Dsplit*Math.PI/180）+scrll;《BR》DL.left=Dx［i］ + ClockWidth*1.5*Math.cos（currStep+i*Dsplit*Math.PI/180）;《BR》}《BR》currStep-=step;《BR》}《BR》function Delay（）{《BR》scrll=（ns）？window.pageYOffset:0;《BR》Dy［0］=Math.round（DY［0］+=（（ymouse）-DY［0］）*speed）;《BR》Dx［0］=Math.round（DX［0］+=（（xmouse）-DX［0］）*speed）;《BR》for （i=1; i 《 D.length; i++）{《BR》Dy［i］=Math.round（DY［i］+=（Dy［i-1］-DY［i］）*speed）;《BR》Dx［i］=Math.round（DX［i］+=（Dx［i-1］-DX［i］）*speed）;《BR》}《BR》y［0］=Math.round（Y［0］+=（（ymouse）-Y［0］）*speed）;《BR》x［0］=Math.round（X［0］+=（（xmouse）-X［0］）*speed）;《BR》for （i=1; i 《 n; i++）{《BR》y［i］=Math.round（Y［i］+=（y［i-1］-Y［i］）*speed）;《BR》x［i］=Math.round（X［i］+=（x［i-1］-X［i］）*speed）;《BR》}《BR》ClockAndAssign（）;《BR》setTimeout（´Delay（）´，20）;《BR》}《BR》if （ns||ie）window.onload=Delay;《BR》//--》《BR》《/SCRIPT》