JavaScript圖文教程之頁面時鐘_javascript
發布時間:2021-12-27 文章來源:xp下載站 瀏覽:
|
軟件是一系列按照特定順序組織的計算機數據和指令的集合。一般來講軟件被劃分為編程語言、系統軟件、應用軟件和介于這兩者之間的中間件。硬件是“計算機硬件”的簡稱。與“軟件”相對,電子計算機系統中所有實體部件和設備的統稱。 各位各位，大家好哇！都見識過網頁上不少種類的日歷和時鐘吧，網頁上的日歷和時鐘到底要怎么做呢，或者說要怎么做出特別的日歷時鐘！
今天給各位介紹的這個“跟著鼠標跑的時鐘和日歷”極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等字符的宋體、大�。ㄗ詈么腋膭优叮禕R》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》 硬件是實在的，有模有樣的。軟件是程序性的。是一系列的指令。有了軟件，硬件才會實現更豐富的功能。 |
