随鼠标移动的时钟非常漂亮遗憾的是只支持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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
php建立Ftp连接的方法
2015/03/07 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
浅析return false的正确使用
2013/11/04 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Python Gitlab Api 使用方法
2019/08/28 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
后勤工作职责
2013/12/22 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
大学生在校表现评语
2014/12/31 职场文书