📄 mouseclock.htm
字号:
<HTML>
<HEAD>
<TITLE>
与鼠标联动的动画时钟
</TITLE>
<script language=JavaScript>
dCol='000099';//日期的颜色.
fCol='668099';//面板的颜色.
sCol='FF0000';//秒针的颜色.
mCol='000000';//分针的颜色.
hCol='000000';//时针的颜色.
ClockHeight=40;//时钟的高度
ClockWidth=40;//时钟的宽度
ClockFromMouseY=0;//在纵坐标方向上时钟和鼠标之间的距离
ClockFromMouseX=100;//在横坐标方向上时钟和鼠标之间的距离
d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");//星期数组
m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");//月份数组
date=new Date();//获得当前时间的一个实例
day=date.getDate();//获得日期
year=date.getYear();//获得年份
if(year < 2000) //若小于2000年，则该年份是两位数，应该加上1900
year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;//获得我们需要的格式化日期字符串
D=TodaysDate.split('');//获得上述格式化的日期的组成字符数组
H='...';//时针
H=H.split('');//获得时针组成字符数组
M='....';//分针
M=M.split('');//获得分针的组成字符数组
S='.....';//秒针
S=S.split('');//获得秒针的组成字符数组
Face='1 2 3 4 5 6 7 8 9 10 11 12';//面板上的显示
font='Verdana';//设置字体
size=1;//用来计算各容器大小的参数
speed=0.6;//用来计算文字环绕的速度
ns=(document.layers);//判断浏览器是Netscape
ie=(document.all);//判断浏览器是IE
Face=Face.split(' ');//面板上的显示的组成字符数组
n=Face.length;//上述数组的长度，实际上就是12
a=size*10;//设置各个容器的大小
ymouse=0;//时钟的纵坐标
xmouse=0;//时钟的横坐标
scrll=0;//设置Netscape中页面的纵坐标偏移
FaceFont="<font face="+font+" size="+size+" color="+fCol+"><B>";//设置面板的字体和颜色
DayFont="<font face="+font+" size="+size+" color="+dCol+"><B>";//设置日期的字体和颜色
Split=360/n;//两个表示小时的数字中间分开的角度，实际上是30度。
Dsplit=360/D.length;//两个D数组中的相邻字符所分开的角度
HandHeight=ClockHeight/4.5 //各针的高度
HandWidth=ClockWidth/4.5 //各针的宽度
HandY=-7;//设置时针、分针、秒针的纵坐标修正
HandX=-2.5;//设置时针、分针、秒针的横坐标修正
step=0.06;//用于累计计算currStep
currStep=0;//用于计算角度的参数
y=new Array();//下面Y数组的四舍五入值
x=new Array();//下面X数组的四舍五入值
Y=new Array();//用来计算时针、分针、秒针位置的纵坐标的数组
X=new Array();//用来计算时针、分针、秒针位置的横坐标的数组
for(i=0; i < n; i++)//初始化
{
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0
}
Dy=new Array();//下面DY数组的四舍五入值
Dx=new Array();//下面DX数组的四舍五入值
DY=new Array();//用来计算日期字符位置的纵坐标的数组
DX=new Array();//用来计算日期字符位置的横坐标的数组
for(i=0; i < D.length; i++)//初始化
{
Dy[i]=0;
Dx[i]=0;
DY[i]=0;
DX[i]=0
}
//Netscape浏览器的情况，请参看下面IE浏览器的注释
if(ns)
{
for(i=0; i < D.length;i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+DayFont+D[i]+'</font></center></layer>');
for(i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+FaceFont+Face[i]+'</font></center></layer>');
for(i=0; i < S.length;i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for(i=0; i < M.length;i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for(i=0; i < H.length;i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
//IE浏览器的情况
if(ie)
{
//日期容器对象
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for(i=0; i < D.length;i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+DayFont+D[i]+'</B></font></div>');//日期字符容器对象
document.write('</div></div>');
//面板容器对象
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for(i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+FaceFont+Face[i]+'</B></font></div>');//面板时间显示的字符容器对象
document.write('</div></div>');
//时针容器对象
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for(i=0; i < H.length;i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');//时针的字符容器对象
document.write('</div></div>');
//分针容器对象
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for(i=0; i < M.length;i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');//分针的字符容器对象
document.write('</div></div>')
//秒针容器对象
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for(i=0; i < S.length;i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');//秒针的字符容器对象
document.write('</div></div>')
}
//Netscape和IE的MouseMove事件处理函数
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
//鼠标移动处理事件
function Mouse(evnt)
{
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;//根据鼠标的纵坐标位置设置时钟的纵坐标
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;//根据鼠标的横坐标位置设置时钟的横坐标
}
//设置Netscape或者IE的MouseMove事件处理函数
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
//设置时钟运行的函数
function ClockAndAssign()
{
time = new Date();//获得当前时间的一个实例
secs = time.getSeconds();//获得当前的秒数
sec = -1.57 + Math.PI * secs/30;//根据秒数来计算角度值，也就是秒针应处于的角度。当secs=60时，sec相当于2*PI，正好转过一圈。
mins = time.getMinutes();//获得当前的分钟数
min = -1.57 + Math.PI * mins/30;//根据分钟数来计算角度值，也就是分针应处于的角度
hr = time.getHours();//获得当前的小时数
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;//根据小时数和分钟数来计算时针应处于的角度
//设置各个容器的高度计算的基数
if(ie)
{
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for(i=0; i < n; i++)
{
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;//给F赋值为面板的style属性
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;//设置面板的位置
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for(i=0; i < H.length; i++)
{
//设置时针的位置
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for(i=0; i < M.length; i++)
{
//设置分针的位置
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for(i=0; i < S.length; i++)
{
//设置秒针的位置
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for(i=0; i < D.length; i++)
{
//设置日期字符的位置
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;//step累计计算currStep
}
//动画时钟显示的入口函数
function Delay()
{
scrll=(ns)?window.pageYOffset:0;//设置scrll的值，用来在Netscape浏览器中修正各容器的纵坐标
//下面的程序段用来计算各个日期字符的显示位置
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for(i=1; i < D.length; i++)
{
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
//下面的程序段用来计算时针、分针、秒针的显示位置
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for(i=1; i < n; i++)
{
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();//调用显示函数
setTimeout('Delay()',10);//循环定时器
}
if(ns||ie)window.onload=Delay;//将onLoad事件的处理函数设为Delay函数
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -