86、二十四小时时钟

86、二十四小时时钟

脚本说明:

把如下代码加入<body>区域中

<script language="JavaScript">

<!--

 

 

f1Col='ccccc0';//face colour.

f2Col='ccccc0';//face colour.

d1Col='ff0000';//dot colour.

d2Col='ff0000';//dot colour.

 

hCol='00ff00';//hours colour.

mCol='00ff00';//minutes colour.

sCol='00ff00';//seconds colour.

ClockHeight=50;

ClockWidth=50;

 

//Alter nothing below! Alignments will be lost!

 

h=10;

m=7;

s=7;

 

face24='06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 01 02 03 04 05';

face24=face24.split(' ');

n1=face24.length;

face12='15 20 25 30 35 40 45 50 55 0 5 10';

face12=face12.split(' ');

n2=face12.length;

p="<font face=Arial size=1 color=#"+f1Col+">";

p2="<font face=Arial size=1 color=#"+f2Col+">";

 

 

 

 

e=360/n1;

e2=360/n2

e3=360/60

 

HandHeight=ClockHeight/6;

HandWidth=ClockWidth/6;

y=0;

x=0;

 

ns6=(document.getElementById&&!document.all);

ns=(document.layers);

ie=(document.all);

 

if (ns){

for (i=0; i < n1; i++)

document.write('<layer name="nshour24'+i+'" top=0 left=0 height=15 width=15><center>'+p+face24[i]+'</font></center></layer>');

for (i=0; i < n1; i++)

document.write('<layer name=nsdots1'+i+' top=0 left=0 bgcolor='+d1Col+' clip="0,0,2,2"></layer>');

for (i=0; i < n2; i++)

document.write('<layer name="nshour12'+i+'" top=0 left=0 height=15 width=15><center>'+p2+face12[i]+'</font></center></layer>');

for (i=0; i < 12; i++)

document.write('<layer name=nsdots2'+i+' top=0 left=0 bgcolor='+d2Col+' clip="0,0,2,2"></layer>');

for (i=0; i < h; i++)

document.write('<layer name=nsH'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');

for (i=0; i < m; i++)

document.write('<layer name=nsM'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');

for (i=0; i < s; i++)

document.write('<layer name=nsS'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');

}

if (ie||document.getElementById){

for (i=0; i < n1; i++)

document.write('<div id="hour24'+i+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;text-align:center">'+p+face24[i]+'</font></div>');

for (i=0; i < n1; i++)

document.write('<div id="dots1'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+d1Col+'"></div>');

for (i=0; i < n2; i++)

document.write('<div id="hour12'+i+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;text-align:center">'+p2+face12[i]+'</font></div>');

for (i=0; i < 12; i++)

document.write('<div id="dots2'+i+'" style="position:absolute;top:0px;left:0px;height:2px;width:2px;font-size:2px;background:#'+d2Col+'"></div>');

for (i=0; i < h; i++)

document.write('<div id="ieH'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');

for (i=0; i < m; i++)

document.write('<div id="ieM'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');

for (i=0; i < s; i++)

document.write('<div id="ieS'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');

}

 

 

function Scroll(){

if (ns){

y=window.pageYOffset+window.innerHeight-ClockHeight*2;

x=window.pageXOffset+window.innerWidth-ClockWidth*2.3;

}

if (ns6){

y=window.pageYOffset+window.innerHeight-ClockHeight*2.1;

x=window.pageXOffset+window.innerWidth-ClockWidth*2.2;

}

if (ie){

y=document.body.scrollTop+window.document.body.clientHeight-ClockHeight*2;

x=document.body.scrollLeft+window.document.body.clientWidth-ClockWidth*2;

}

setTimeout('Scroll()',50);

}

Scroll();

 

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.57 + Math.PI * hr/12 + Math.PI*parseInt(time.getMinutes())/720;

for (i=0; i < s; i++){

 var cs=(ns)?document.layers['nsS'+i]:(ie)?document.all['ieS'+i].style:document.getElementById("ieS"+i).style;

 cs.top=y+(i*HandHeight)*Math.sin(sec);

 cs.left=x+(i*HandWidth)*Math.cos(sec);

}

for (i=0; i < m; i++){

 var cm=(ns)?document.layers['nsM'+i]:(ie)?document.all['ieM'+i].style:document.getElementById("ieM"+i).style;

 cm.top=y+(i*HandHeight)*Math.sin(min);

 cm.left=x+(i*HandWidth)*Math.cos(min);

}

for (i=0; i < h; i++){

 var ch=(ns)?document.layers['nsH'+i]:(ie)?document.all['ieH'+i].style:document.getElementById("ieH"+i).style;

 ch.top=y+(i*HandHeight)*Math.sin(hrs);

 ch.left=x+(i*HandWidth)*Math.cos(hrs);

}

for (i=0; i < 12; i++){

 var d2=(ns)?document.layers['nsdots2'+i]:(ie)?document.all['dots2'+i].style:document.getElementById("dots2"+i).style;

 d2.top=y + ClockHeight*Math.sin(-1.0471 + i*e2*Math.PI/180);

 d2.left=x + ClockWidth*Math.cos(-1.0471 + i*e2*Math.PI/180);

}

for (i=0; i < n2; i++){

 var h12=(ns)?document.layers['nshour12'+i]:(ie)?document.all['hour12'+i].style:document.getElementById("hour12"+i).style;

 h12.top=y-6 + ClockHeight*1.2*Math.sin(i*e2*Math.PI/180);

 h12.left=x-6 + ClockWidth*1.2*Math.cos(i*e2*Math.PI/180);

}

for (i=0; i < n1; i++){

 var d1=(ns)?document.layers['nsdots1'+i]:(ie)?document.all['dots1'+i].style:document.getElementById("dots1"+i).style;

 d1.top=y + ClockHeight*1.5*Math.sin(-1.0471 + i*e*Math.PI/180);

 d1.left=x + ClockWidth*1.5*Math.cos(-1.0471 + i*e*Math.PI/180);

}

for (i=0; i < n1; i++){

 var h24=(ns)?document.layers['nshour24'+i]:(ie)?document.all['hour24'+i].style:document.getElementById("hour24"+i).style;

 h24.top=y-6 + ClockHeight*1.7*Math.sin(i*e*Math.PI/180);

 h24.left=x-6 + ClockWidth*1.7*Math.cos(i*e*Math.PI/180);

}

setTimeout('ClockAndAssign()',500);

}

ClockAndAssign();

 

 

//-->

</script>

固定的长针为时针,短针为分针,转动的当然是秒针了

 

Write a comment

Comments: 0