纯Javascript时钟，网页指针电子表

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<SCRIPT language=javascript>
<!--
pX=100;		//时钟中心的x坐标
pY=100;		//时钟中心的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为元素创建数组
else
obs[i] = new Array (eval('document.ob'+i),-100,-100)//如果是NS则直接将层作为元素创建obs指针点数组
//注意obj数组的每一个元素本身也是一个数组，第一个元素是准备被操作的对象，后两个数字用于存储y,x坐标
}
}

function cl(a,b,c){	//这个函数用于排列表示12个时间的数字
	if (document.all) {	//如果是IE
		if (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{	//如果不是IE
	if (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			//记录当前时间(用于下一次比较改变情况)
		sec=Math.PI*sec/30		//计算秒针的角度(以弧度表示)
		min=Math.PI*time.getMinutes()/30//计算分针的角度(以弧度表示)
		hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360
		
		for (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>
<title>纯javascript时钟</title>
</head>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

纯Javascript时钟，网页指针电子表

分类

网站常用

描述

一个显示在网页上的指针式电子表，纯Javascript时钟。页面装入的时候调用ob,setNum函数来初始化各层的显示，然后再用两个时钟(setInterval)分别进行点坐标的计算和显示。