当前位置:雨木林风win7系统 > 硬件软件教程 > 详细页面

JavaScript图文详细教程之页面时钟_javascript

JavaScript图文详细教程之页面时钟_javascript

更新时间:2022-05-27 文章作者:未知 信息来源:网络 阅读次数:

软件是一系列按照特定顺序组织的计算机数据和指令的集合。一般来讲软件被划分为编程语言、系统软件、应用软件和介于这两者之间的中间件。硬件是“计算机硬件”的简称。与“软件”相对,电子计算机系统中所有实体部件和设备的统称。

  各位各位,大家好哇!都见识过网页上不少种类的日历和时钟吧,网页上的日历和时钟到底要怎么做呢,或者说要怎么做出特别的日历时钟!

JavaScript教程之网页时钟
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》


硬件是实在的,有模有样的。软件是程序性的。是一系列的指令。有了软件,硬件才会实现更丰富的功能。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行