随鼠标移动的时钟非常漂亮遗憾的是只支持IE


Posted in Javascript onAugust 12, 2014

新建一个文本文件,将下面的代码复制进去,将文件名字改为clock.html运行即可。

<SCRIPT language=JavaScript><!-- 
dCol='0000FF';//date colour. 
fCol='0000FF';//face colour. 
sCol='0000FF';//seconds colour. 
mCol='0000FF';//minutes colour. 
hCol='0000FF';//hours colour. 
ClockHeight=40; 
ClockWidth=40; 
ClockFromMouseY=0; 
ClockFromMouseX=100; 
//Alter nothing below! Alignments will be lost! 
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) 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='Arial'; 
size=1; 
speed=0.5; 
ns=(document.layers); 
ie=(document.all); 
Face=Face.split(' '); 
n=Face.length; 
a=size*10; 
ymouse=0; 
xmouse=0; 
scrll=0; 
props="<font face="+font+" size="+size+" color="+fCol+"><B>"; 
props2="<font face="+font+" size="+size+" color="+dCol+"><B>"; 
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]+'</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">'+props+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>') 
} 
(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; 
} 
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; 
function ClockAndAssign(){ 
time = new Date (); 
secs = time.getSeconds(); 
sec = -1.57 + Math.PI * secs/30; 
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.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; 
} 
function Delay(){ 
scrll=(ns)?window.pageYOffset:0; 
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()',40); 
} 
if (ns||ie)window.onload=Delay; 
// --></SCRIPT>
Javascript 相关文章推荐
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 #Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 #Javascript
JavaScript Promise启示录
Aug 12 #Javascript
深入理解Javascript中this的作用域
Aug 12 #Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 #Javascript
JavaScript弹出窗口方法汇总
Aug 12 #Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 #Javascript
You might like
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
JavaScript高级程序设计
2006/12/29 Javascript
Prototype使用指南之ajax
2007/01/10 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python遍历数组的方法小结
2015/04/30 Python
解读python如何实现决策树算法
2018/10/11 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
python实现梯度下降法
2020/03/24 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
标准自荐信范文
2014/01/29 职场文书
森林病虫害防治方案
2014/06/02 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
感谢信怎么写
2015/01/21 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
学生退学证明
2015/06/23 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL