各位各位，大家好哇！都見識過網頁上不少種類的日歷和時鐘吧，網頁上的日歷和時鐘到底要怎么做呢，或者說要怎么做出特別的日歷時鐘！

JavaScript教程之網頁時鐘

　　今天給各位介紹的這個“跟著鼠標跑的時鐘和日歷”極COOL的，準保你沒見過！

　　只須將如下的JavaScript代碼插入到你頁面html的《head》區即可！

　　dCol=´yellow´; //定義日歷顏色《BR》fCol=´#ff0000´; //定義1-12這12個數的顏色《BR》sCol=´#00ff00´; //定義秒針顏色《BR》mCol=´#0000ff´; //定義分針顏色《BR》hCol=´#ff0000´; //定義時針顏色《BR》ClockHeight=40; //定義時鐘的高度《BR》ClockWidth=40; //定義時鐘的寬度《BR》ClockFromMouseY=0; //定義時鐘的中心距鼠標的相對垂直距離《BR》ClockFromMouseX=100; //定義時鐘中心距鼠標的相對水平距離《BR》//以上顏色值你要據你頁面的背景顏色進行修改！注意不要你頁面的背景色一致哦。《BR》d=new Array（“星期日”，“星期一”，“星期二”，“星期三”，“星期四”，“星期五”，“星期六”）;《BR》m=new Array（“一月”，“二月”，“三月”，“四月”，“五月”，“六月”，“七月”，“八月”，“九月”，《BR》“十月”，“十一月”，“十二月”）; //以上是給定星期和月份的取值范圍《BR》date=new Date（）;《BR》day=date.getDate（）; //取得當前日期命令《BR》year=date.getYear（）; //取得當前年份命令《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（´´）; //使秒、分、時針反向相應的位置《BR》Face=´1 2 3 4 5 6 7 8 9 10 11 12´;《BR》font=´Arial´;《BR》size=1; //定義秒、分、時針及1-12等字符的宋體、大小（最好匆改動哦）《BR》speed=0.8; //定義一旦鼠標位置發生變化時所有相關字符跟隨至前面指定的鼠標的相對位置的速度，《BR》能看到各字符的軌跡，值可在0.1-1.0之間改動（值最小為0.1時跟隨過來的速度最慢，值為1.0時跟隨速度最快且與軌跡顯示）《BR》ns=（document.layers）;《BR》ie=（document.all）; //說明在NS和IE兩種不同瀏覽器里都適用《BR》《BR》//以下的大段語句定義了NS和IE瀏覽器各自如何控制并完成時間和旋轉的日歷跟隨鼠標轉的《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》