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

2016-01-29 11:37 21 1 收藏

中文的版用javascript实现超酷的“网页时钟”,中文的版用&#106avascript实现超酷的“网页时钟”

【 tulaoshi.com - Javascript 】

 

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/javascript/)

<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');
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/javascript/)

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

来源:http://www.tulaoshi.com/n/20160129/1482797.html

延伸阅读
  本文介绍用JS来制作闪烁的边框,演示地址:http://www.85time.com首页,我仅制作了一个闪烁的边框,若想一个以上的边框都能闪烁,可以定义多个变量,本文中,我仅定义了一个变量mydowns! 代码如下,共有两个文件: 文件一:mydowns.js <!-- function flash(){ if (!document.all) return if (mydowns.style.borderColor=="gr...
  原代码插入到<body下面:<script language="JavaScript" <!-- N = 40; Y = new Array(); X = new Array(); S = new Array(); A = new Array(); B = new Array(); M = new Array(); V = (document.layers)?1:0; iH=(document.layers)?window.innerHeight:window.document.body.clientHeight; iW=(document.layers)?win...
标签: PHP
  <?   $size_small=5;//液晶宽度   $size_big=25;//液晶长度   $distance=10;//间距   $color_back="#DDDDDD";   $color_dark="#CCCCCC";   $color_light="#000000";   $number=0; ? <html <head <titleTi...
标签: ASP
  表单的验证是开发WEB应用程序中常遇到的一关。有时候我们必须保证表单的某些项必须填写、必须为数字、必须是指定的位数等等,这时候就要用到表单验证了,一般我们常用的表单验证有2种方式: 1、编写JavaScript或VBScript的表单验证函数,在客户端进行验证; 2、在表单提交后,使用ASP的方法Request.Form获取表单的输入值进行判断,...
  选择自 kindwell 的 Blog     这几天费了挺大力气在网上查找javascript连接access数据库的方法, 经过整理总结,终于写出一段能够有效执行的代码。       但是这段代码在本地可以正常运行,一旦放到免费个人空间上就没法执 行了,主要原因就是操作权限不够,由于只支持静态页面的免费空间多数都 ...

经验教程

27

收藏

44
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部