网络时空 | 网页特效

您现在的位置：首页

时间特效

固定的挂钟

特效说明

一个固定的挂钟，可别认为是图片做的，其实没有一张图片，酷！

特

效

代

码

<body onload="rad();counter();ob();setNum();setInterval('timer()',100);setInterval('runClock()',100)">
<SCRIPT language=javascript>
var dot=65
rads=new Array(65)
function rad () {
for (i=1; i<dot; i++) {
	if (document.all) rads[i]=new Array (eval('rad'+i).style,-100,-100)
	else rads[i] = new Array (eval('document.rad'+i),-100,-100)
	}
}

function setCircle() {
	for (i=1; i<dot; i++) {
		rads[i][0].left=rads[i][1]+pX-15
		if (document.layers) rads[i][0].left+=10
		rads[i][0].top=rads[i][2]+pY-20
		//if (document.layers) rads[i][0].top-=5

}
}

function counter() {
		for (i=1; i<dot; i++) {
		rad=Math.PI*(i/((dot-1)/2))
		rads[i][1] = Math.sin(rad)*60;
		rads[i][2] = -Math.cos(rad)*60;
		}
setCircle()
}

pX=400;pY=150
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)
	else obs[i] = new Array (eval('document.ob'+i),-100,-100)
	}
}
function cl(a,b,c){
	if (document.all) {
		if (a!=0) b+=-1
		eval('c'+a+'.style.pixelTop='+(pY+(c-5)))
		eval('c'+a+'.style.pixelLeft='+(pX+(b)))
		}
else{
	if (a!=0) b+=10
	eval('document.c'+a+'.top='+(pY+(c)))
	eval('document.c'+a+'.left='+(pX+(b)))
}
}

function runClock() {
	for (i=0; i<13; i++) {
		obs[i][0].left=obs[i][1]+pX
		obs[i][0].top=obs[i][2]+pY
	}
}

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;
			if (document.layers)obs[i][1]+=10;
			obs[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27;
		}
		for (i=6;i<10;i++) {
			obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;
			if (document.layers)obs[i][1]+=10;
			obs[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27;
		}
		for (i=10;i<13;i++) {
			obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;
			if (document.layers)obs[i][1]+=10;
			obs[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27;
		}
	}

}
function setNum(){
cl (0,-67,-65);
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>

<DIV id=c0 
style="HEIGHT: 128px; LEFT: 38px; POSITION: absolute; TOP: -119px; WIDTH: 686px; Z-INDEX: 2"></DIV>
<DIV id=c1 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>1</B> 
</DIV>
<DIV id=c2 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>2</B> 
</DIV>
<DIV id=c3 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>3</B> 
</DIV>
<DIV id=c4 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>4</B> 
</DIV>
<DIV id=c5 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>5</B> 
</DIV>
<DIV id=c6 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>6</B> 
</DIV>
<DIV id=c7 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>7</B> 
</DIV>
<DIV id=c8 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>8</B> 
</DIV>
<DIV id=c9 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>9</B> 
</DIV>
<DIV id=c10 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>10</B> 
</DIV>
<DIV id=c11 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>11</B> 
</DIV>
<DIV id=c12 
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>12</B> 
</DIV>
<DIV id=ob0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"> 
</DIV>
<DIV id=ob1 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#0000ff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob2 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#0000ff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob3 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#0000ff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob4 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#0000ff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob5 
style="HEIGHT: 32px; LEFT: -35px; POSITION: absolute; TOP: -4px; WIDTH: 742px; Z-INDEX: 8"><FONT 
color=#0000ff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob6 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#00ffff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob7 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#00ffff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob8 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#00ffff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob9 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#00ffff size=+3><B>.</B></FONT> </DIV>
<DIV id=ob10 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT 
color=#ff0000 size=+3><B>.</B></FONT> </DIV>
<DIV id=ob11 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT 
color=#ff0000 size=+3><B>.</B></FONT> </DIV>
<DIV id=ob12 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT 
color=#ff0000 size=+3><B>.</B></FONT> </DIV>
<DIV id=rad0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"> 
</DIV>
<DIV id=rad1 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad2 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad3 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad4 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad5 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad6 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad7 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad8 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad9 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad10 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad11 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad12 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad13 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad14 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad15 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad16 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad17 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad18 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad19 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad20 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad21 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad22 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad23 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad24 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad25 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad26 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad27 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad28 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad29 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad30 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad31 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad32 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad33 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad34 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad35 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad36 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad37 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad38 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad39 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad40 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad41 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad42 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad43 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad44 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad45 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad46 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad47 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad48 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad49 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad50 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad51 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad52 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad53 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad54 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad55 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad56 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad57 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad58 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad59 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad60 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad61 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad62 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad63 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>
<DIV id=rad64 
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT 
color=#000000><B>.</B></FONT> </DIV>

@_⌒ 特效预览 @_⌒

没有图片!

1

2

3

4

5

6

7

8

9

10

11

12

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.