JS简单的指针时钟动态效果

简单的指针时钟动态效果


<!DOCTYPE html>
<html>
<head>
<title>指针时钟</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="generator" content="editplus">
<meta name="liyuncheng" content="email:yunchengli@sina.com">
<SCRIPT language=javascript>
<!--//请在IE8/IE10下使用
pX=200;                        //时钟中心的x坐标
pY=200;                        //时钟中心的Y坐标
obs = new Array(13)                //表示时针，分针，秒针各点的层function ob(){                //将各层以数组表示
for (i=0; i<13; i++) {if (document.all)obs[i]=new Array (eval('ob'+i).style,-100,-100)     //如果是IE则以各指针层的style为元素创建数组elseobs[i] = new Array (eval('document.ob'+i),-100,-100) //如果是NS则直接将层作为元素创建obs指针点数组//注意obj数组的每一个元素本身也是一个数组，第一个元素是准备被操作的对象，后两个数字用于存储y,x坐标}
}function cl(a,b,c){                    //这个函数用于排列表示12个时间的数字if (document.all) {             //如果是IEif (a!=0) b+=-1               //根据IE的显示特性修正x坐标eval('c'+a+'.style.pixelTop='+(pY+(c)))    //改变指定元素(以c加数字为ID的层)的y坐标eval('c'+a+'.style.pixelLeft='+(pX+(b)))//改变x左标,这两行用于排列1到12点的数字}
else{                           //如果不是IEif (a!=0) b+=10                  //根据NS的显示特性修正x坐标eval('document.c'+a+'.top='+(pY+(c)))      //以NS兼容方式改变数字的y坐标eval('document.c'+a+'.left='+(pX+(b)))        //以NS兼容方式改变数字的x坐标
}
if (document.all) c0.style.pixelLeft=26
}function updateclock() {               //根据计算出的每个点的x,y坐标值改变其位置for (i=0; i<13; i++) {obs[i][0].left=obs[i][1]+pX        /* obs[x][1]，obs[x][2]存放的就是x,y坐标 */obs[i][0].top=obs[i][2]+pY      /* 通过left和top两个属性改变层的位置     */}
}var lastsec    //上次计时的秒数，用于比较判断两次执行之间的时间是否改变function timer() {time = new Date ()           //取当前时间sec = time.getSeconds()         //取秒数if (sec!=lastsec) {           //如果时间改变lastsec = sec          //记录当前时间(用于下一次比较改变情况)//计算秒针的角度(以弧度表示),360°，每格30°sec=Math.PI*sec/30      //计算分针的角度(以弧度表示)min=Math.PI*time.getMinutes()/30 hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360for (i=1;i<6;i++) {       //计算秒针各点的坐标obs[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16;//计算秒针x坐标//如果是NS,则需要修正其x坐标使显示正常if (document.layers)obs[i][1]+=10;obs[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27;//计算秒针y坐标}for (i=6;i<10;i++) {     //计算分针各点的坐标obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;//计算分针x坐标if (document.layers)obs[i][1]+=10;        //修正x坐标obs[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27;//计算分针y坐标}for (i=10;i<13;i++) {       //计算时针各点的坐标obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;//计算时针x坐标if (document.layers)obs[i][1]+=10;        //修正x坐标obs[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27;//计算时针y坐标}}}function setNum(){      //初始化表示1到12点刻度的数字，将其排列成一圈
cl (0,67,65);           //将改变坐标的工作写成cl函数可以方便的调用。
cl (1,10,-51);
cl (2,28,-33);
cl (3,35,-8);
cl (4,28,17);
cl (5,10,35);
cl (6,-15,42);
cl (7,-40,35);
cl (8,-58,17);
cl (9,-65,-8);
cl (10,-58,-33);
cl (11,-40,-51);
cl (12,-16,-56);
}
-->
</SCRIPT>
</head><body onLoad="ob(),setNum(),setInterval('timer()',100);setInterval('updateclock()',100)">
<!--
页面装入的时候调用ob,setNum函数来初始化各层的显示
然后再用两个时钟(setInterval)分别进行点坐标的计算和显示。
-->
<div id="c0" style="position:absolute;right:6;top:6; z-index:2;">
</div><!--c1到c12为表示1到12点刻度的数字--><div id="c1" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>1</b></div><div id="c2" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>2</b></div><div id="c3" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>3</b></div><div id="c4" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>4</b></div><div id="c5" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>5</b></div><div id="c6" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>6</b></div><div id="c7" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>7</b></div><div id="c8" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>8</b></div><div id="c9" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>9</b></div><div id="c10" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>10</b></div><div id="c11" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>11</b></div><div id="c12" style="position:absolute;left:20;top:-20px; z-index:5;font-size:11px;"><b>12</b></div><div id="ob0" style="position:absolute;left:-20;top:-20px;z-index:1">  </div><!--ob1到ob5为秒针的5个点--><div id="ob1" style="position:absolute;left:-20;top:-20px;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div><div id="ob2" style="position:absolute;left:-20;top:-20px;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div><div id="ob3" style="position:absolute;left:-20;top:-20px;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div><div id="ob4" style="position:absolute;left:-20;top:-20px;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div><div id="ob5" style="position:absolute;left:-20;top:-20px;z-index:8"> <font size="+3" color="#0000FF"><b>.</b></font></div><!--ob6到ob9为分针的4个点--><div id="ob6" style="position:absolute;left:-20;top:-20px;z-index:7"> <font size="+3" color="#008000"><b>.</b></font></div><div id="ob7" style="position:absolute;left:-20;top:-20px;z-index:7"> <font size="+3" color="#008000"><b>.</b></font></div><div id="ob8" style="position:absolute;left:-20;top:-20px;z-index:7"> <font size="+3" color="#008000"><b>.</b></font></div><div id="ob9" style="position:absolute;left:-20;top:-20px;z-index:7"> <font size="+3" color="#008000"><b>.</b></font></div><!--ob10到ob12为时针的3个点--><div id="ob10" style="position:absolute;left:-20;top:-20px;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div><div id="ob11" style="position:absolute;left:-20;top:-20px;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div><div id="ob12" style="position:absolute;left:-20;top:-20px;z-index:6"> <font size="+3" color="#F30000"><b>.</b></font></div>
</body>
</html>

JS简单的指针时钟动态效果相关推荐

JS 简单实现电子时钟
时钟的确是非常简单的一个功能:我们只需要通过js编写一个方法来获取时间的时分秒,再用定时器每隔一秒进行刷新即可. 注意:通过Date类拿到的时分秒直接拼接起来可能是这样的:8:2:3,而我们想看到的效 ...
css实现圆形钟表,js+css3圆形指针时钟代码
js代码 var divH = document.getElementsByClassName("time_h") var divM = document.getElementsB ...
即学即会---简单易学模拟时钟（html +css +js）
简单易学模拟时钟(基于html,css,js) 有黑夜和白天两种效果,可自行切换. 当然你也可以点击这里看看效果demo效果
使用js实现一个简单的图片时钟
使用js实现一个简单的图片时钟 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
android 时钟动态图标,Android 8.1 Launcher3实现动态指针时钟功能
本文主要实现功能,可能有不合理的地方首先创建一个实现功能的工具里,直接上代码: import android.content.Context; import android.graphics.Bit ...
利用js制作动态小时钟
利用js制作动态小时钟在学完Date()函数之后,可以用来与CSS结合制作一个能转动的时钟. 新建html文件,写好基本结构,代码如下: <!DOCTYPE html> <html ...
Android指针时钟的实现代码
最近写了个指针时钟的小程序,拿出来和大家分享一下. 指针时钟控件实现: 关键点: 1.Android自定义控件实现 2.Android自定义控件命名空间 3.Android自定义控件从布局文件中获取参 ...
html：canvas画布绘图简单入门-绘制时钟-3
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
HTML简易时钟教程,html5 svg简单的模拟时钟特效-HTML5动画
这是一款代码非常简洁的html5 svg模拟时钟特效插件.该插件通过简单的SVG图形来模拟时钟轮廓,然后使用JS代码让时钟动起来.你想查看jQuery版本的数字电子时钟的制作方法可以查看:使用JQUE ...

JS简单的指针时钟动态效果

简单的指针时钟动态效果

JS简单的指针时钟动态效果相关推荐

最新文章

热门文章