1
2
3
4
5
6
7
8
9
10
11
12
.
.
.
.
.
.
.
.
.
.
.
.
使用提示
固定的时钟
演示效果：
代码提示：将下面的代码复制到〈BODY〉与〈/BODY〉中
脚本说明: 第一步:把如下代码加入<body>区域中 <STYLE>.num { COLOR: white; WIDTH: 30px } </STYLE> <SCRIPT language=JavaScript> <!-- pX = 100; pY = 100; 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))); 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() / 6 + Math.PI * parseInt(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); } function startClock() { ob(); setNum(); setInterval('timer()', 100); setInterval('runClock()', 100); } //--> </SCRIPT> <DIV id=c0 style="LEFT: 36px; POSITION: absolute; TOP: 36px; Z-INDEX: 2"> <TABLE> <TBODY> <TR> <TD bgColor=#000000 height=120 width=120></TD></TR></TBODY></TABLE></DIV> <DIV class=num id=c1 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>1</B> </DIV> <DIV class=num id=c2 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>2</B> </DIV> <DIV class=num id=c3 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>3</B> </DIV> <DIV class=num id=c4 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>4</B> </DIV> <DIV class=num id=c5 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>5</B> </DIV> <DIV class=num id=c6 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>6</B> </DIV> <DIV class=num id=c7 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>7</B> </DIV> <DIV class=num id=c8 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>8</B> </DIV> <DIV class=num id=c9 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>9</B> </DIV> <DIV class=num id=c10 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>10</B> </DIV> <DIV class=num id=c11 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>11</B> </DIV> <DIV class=num id=c12 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>12</B> </DIV> <DIV class=num id=ob0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"></DIV> <DIV class=num id=ob1 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob2 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob3 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob4 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob5 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob6 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob7 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob8 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob9 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob10 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ffff00 size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob11 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ffff00 size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob12 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ffff00 size=+3><B>.</B></FONT> </DIV> 第二步:修改<body***>中的内容，将下面的代码加入原<body***>中onload=javascript:startClock()
使用提示
返回目录
