当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 中文的版用javascript实现超酷的“网页时钟”

Javascript
JQuery 获取和设置Select选项的代码
jQuery ctrl+Enter shift+Enter实现代码
jQuery学习2 选择器的使用说明
jQuery学习3:操作元素属性和特性
jQuery学习4 浏览器的事件模型
jQuery学习5 jQuery事件模型
jQuery 学习6 操纵元素显示效果的函数
jQuery学习7 操作JavaScript对象和集合的函数
jQuery库与其他JS库冲突的解决办法
JavaScript Event事件学习第一章 Event介绍
JavaScript Event学习第二章 Event浏览器兼容性
JavaScript Event学习第三章 早期的事件处理程序
JavaScript Event学习第四章 传统的事件注册模型
JavaScript Event学习第五章 高级事件注册模型
JavaScript Event学习第六章 事件的访问
JavaScript Event学习第七章 事件属性
JavaScript Event学习第八章 事件的顺序
js png图片(有含有透明)在IE6中为什么不透明了
JavaScript 读取元素的CSS信息的代码
基于mootools的圆角边框扩展代码

Javascript 中的 中文的版用javascript实现超酷的“网页时钟”


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 46 ::
收藏到网摘: n/a

 

只须将如下的JavaScript代码插入到你页面html的<head>区即可!

<SCRIPT language=JavaScript>
<!--
dCol='yellow'; //定义日历颜色
fCol='#ff0000'; //定义1-12这12个数的颜色
sCol='#00ff00'; //定义秒针颜色
mCol='#0000ff'; //定义分针颜色
hCol='#ff0000'; //定义时针颜色
ClockHeight=40; //定义时钟的高度
ClockWidth=40; //定义时钟的宽度
ClockFromMouseY=0; //定义时钟的中心距鼠标的相对垂直距离
ClockFromMouseX=100; //定义时钟中心距鼠标的相对水平距离
//以上颜色值你要据你页面的背景颜色进行修改!注意不要你页面的背景色一致哦。
d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
m=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月",
"十月","十一月","十二月"); //以上是给定星期和月份的取值范围
date=new Date();
day=date.getDate(); //取得当前日期命令
year=date.getYear(); //取得当前年份命令
if (year < 2000) year=year+1900;
TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+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='Arial';
size=1; //定义秒、分、时针及1-12等字符的宋体、大小(最好匆改动哦)
speed=0.8; //定义一旦鼠标位置发生变化时所有相关字符跟随至前面指定的鼠标的相对位置的速度,
能看到各字符的轨迹,值可在0.1-1.0之间改动(值最小为0.1时跟随过来的速度最慢,值为1.0时跟随速度最快且与轨迹显示)
ns=(document.layers);
ie=(document.all); //说明在NS和IE两种不同浏览器里都适用

//以下的大段语句定义了NS和IE浏览器各自如何控制并完成时间和旋转的日历跟随鼠标转的
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+">";
props2="<font face="+font+" size="+size+" color="+dCol+">";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();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();Dx=new Array();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}

if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+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>'+props+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>');
}

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">'+props2+D[i]+'</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" s