随鼠标移动的时钟非常漂亮遗憾的是只支持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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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
php实现的在线人员函数库
2008/04/09 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
对python的输出和输出格式详解
2018/12/08 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python多线程同步实例教程
2019/08/11 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
酒店管理自荐信
2013/10/23 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
火灾现场处置方案
2014/05/28 职场文书
销售口号霸气押韵
2015/12/24 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
python中的None与NULL用法说明
2021/05/25 Python
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android