随鼠标移动的时钟非常漂亮遗憾的是只支持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 定时器调用传递参数的方法
Nov 12 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
Angular2数据绑定详解
Apr 18 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
JavaScript中的相等操作符使用详解
Dec 21 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
DedeCms模板安装/制作概述
2007/03/11 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP异常处理Exception类
2015/12/11 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python实现自动上京东抢手机
2018/02/06 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Python 远程开关机的方法
2020/11/18 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
《会走路的树》教后反思
2014/04/19 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript