圆形时钟

Tags: /计算机文档/网页制作/ Date Created:

圆形时钟

<html>

<head>

<title>Clock</title>

// *****************************************************************

// Written By Caocao

// caocao@eastday.com

// http://caocao.oso.com.cn

// *****************************************************************

function graph_set_size(width,height)

{

this.width=width;

this.height=height;

}

function graph_set_point(point)

{

this.point=point;

}

function graph_set_back_color(color)

{

this.back_color=color;

}

function graph_set_line_width(width)

{

this.line_width=width;

}

function graph_line(start_x,start_y,end_x,end_y,color)

{

if (Math.abs(start_x-end_x)>Math.abs(start_y-end_y))

{

if (start_x<end_x)

{

for (i=start_x;i<=end_x;i++)

{

if (i>=0&&i<=this.width)

{

this.data[Math.round(start_y+1.0*(i-start_x)*(end_y-start_y)/(end_x-start_x))*this.height+i]=color;

}

else

{

for (i=end_x;i<=start_x;i++)

{

if (i>=0&&i<=this.width)

{

this.data[Math.round(start_y+1.0*(i-start_x)*(end_y-start_y)/(end_x-start_x))*this.height+i]=color;

}

else

{

if (start_y<end_y)

{

for (i=start_y;i<=end_y;i++)

{

if (i>=0&&i<=this.height)

{

this.data[i*this.height+Math.round(start_x+1.0*(i-start_y)*(end_x-start_x)/(end_y-start_y))]=color;

}

else

{

for (i=end_y;i<=start_y;i++)

{

if (i>=0&&i<=this.height)

{

this.data[i*this.height+Math.round(start_x+1.0*(i-start_y)*(end_x-start_x)/(end_y-start_y))]=color;

}

function graph_circle(center_x,center_y,radius,color)

{

step=Math.atan(1.0/radius)/Math.PI*180;

for (i=0;i<=360;i+=step)

{

this.data[Math.round(center_y+radius*Math.cos(i/180*Math.PI))*this.height+Math.round(center_x+radius*Math.sin(i/180*Math.PI))]=color;

}

function graph_get_user_agent()

{

return(this.user_agent);

}

function graph_move(x,y)

{

eval(this.graph_layer).left=x;

eval(this.graph_layer).top=y;

}

function graph_show()

{

switch (this.user_agent)

{

case 3:eval(this.graph_layer).visibility="show";//NS4

break;

case 2:;//IE5

case 1:eval(this.graph_layer).visibility="visible";//IE4

break;

}

function graph_hide(obj)

{

switch (this.user_agent)

{

case 3:eval(this.graph_layer).visibility="hide";//NS4

break;

case 2:;//IE5

case 1:eval(this.graph_layer).visibility="hidden";//IE4

break;

}

function graph_paint(x,y)

{

txt="<table border=0 cellspacing=0 cellpadding=0>";

for (i=0;i<this.width;i++)

{

txt+="<tr height="+this.point+">";

for (j=0;j<this.height;j++)

{

txt+="<td width="+this.point+" height="+this.point+" bgcolor="+this.data[i*this.height+j]+"></td>";

}

txt+="</tr>";

}

txt+="</table>";

switch (this.user_agent)

{

case 3:

eval(this.graph_layer).document.write(txt);//NS4

eval(this.graph_layer).document.close();

this.show();

break;

case 2:;//IE5

case 1:

document.all["overDiv"].innerHTML=txt;//IE4

this.show();

break;

}

this.move(x,y);

}

function graph_init()

{

if (document.layers)

{

this.user_agent=3;//NS4

this.graph_layer=document.overDiv;

}

if (document.all)

{

if (navigator.userAgent.indexOf('MSIE 5')>0)

{

this.user_agent=1;//IE5

}

else

{

this.user_agent=2;//IE4

}

this.graph_layer=overDiv.style;

}

for (i=0;i<this.width;i++)

{

for (j=0;j<this.height;j++)

{

this.data[i*this.height+j]=this.back_color;

}

function graph(width,height,point,back_color)//graph 类声明

{

this.width=width;

this.height=height;

this.point=point;

this.back_color=back_color;

this.line_width=1;//暂时不用

this.user_agent=1;

this.graph_layer=0;

this.data=new Array(width*height);

this.set_size=graph_set_size;

this.set_point=graph_set_point;

this.set_line_width=graph_set_line_width;

this.line=graph_line;

this.circle=graph_circle;

this.paint=graph_paint;

this.init=graph_init;

this.show=graph_show;

this.hide=graph_hide;

this.move=graph_move;

this.get_user_agent=graph_get_user_agent;

}

</script>

</head>

function show()

{

now=new Date();

clock.line(20,20,20+second_x,20+second_y,"#FFFFFF");

clock.line(20,20,20+minute_x,20+minute_y,"#FFFFFF");

clock.line(20,20,20+hour_x,20+hour_y,"#FFFFFF");

second_x=Math.round(18*Math.cos((now.getSeconds()*6-90)*Math.PI/180));

second_y=Math.round(18*Math.sin((now.getSeconds()*6-90)*Math.PI/180));

minute_x=Math.round(14*Math.cos((now.getMinutes()*6-90)*Math.PI/180));

minute_y=Math.round(14*Math.sin((now.getMinutes()*6-90)*Math.PI/180));

hour_x=Math.round(10*Math.cos((now.getHours()*30-90)*Math.PI/180));

hour_y=Math.round(10*Math.sin((now.getHours()*30-90)*Math.PI/180));

clock.line(20,20,20+second_x,20+second_y,"#FF0000");

clock.line(20,20,20+minute_x,20+minute_y,"#000000");

clock.line(20,20,20+hour_x,20+hour_y,"#000000");

clock.paint(20,20);

setTimeout("show()",1000);

}

clock=new graph(40,40,1,"#FFFFFF");

clock.init();

clock.circle(20,20,19,"#000000");

second_x=0;

second_y=0;

minute_x=0;

minute_y=0;

hour_x=0;

hour_y=0;

show();

</script>

</body>

</html>

---------------------------------------

<head>

<!--

pX=400;pY=200

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)))

}

if (document.all) c0.style.pixelLeft=26

}

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>

</head>

</div>

</body>

---------------------------------------

<!-- Begin

fCol = '000000'; //face colour.

sCol = 'ff0000'; //seconds colour.

mCol = '000000'; //minutes colour.

hCol = '000000'; //hours colour.

H = '....';

H = H.split('');

M = '.....';

M = M.split('');

S = '......';

S = S.split('');

Ypos = 0;

Xpos = 0;

Ybase = 8;

Xbase = 8;

dots = 12;

ns = (document.layers)?1:0;

if (ns) {

dgts = '1 2 3 4 5 6 7 8 9 10 11 12';

dgts = dgts.split(' ');

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

document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial,Verdana size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');

}

for (i = 0; i < M.length; i++) {

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

}

for (i = 0; i < H.length; i++) {

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

}

for (i = 0; i < S.length; i++) {

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

}

else {

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i = 1; i < dots+1; i++) {

document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');

}

document.write('</div></div>')

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i = 0; i < M.length; i++) {

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

}

document.write('</div></div>')

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i = 0; i < H.length; i++) {

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

}

document.write('</div></div>')

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i = 0; i < S.length; i++) {

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

}

document.write('</div></div>')

}

function clock() {

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/6 + Math.PI*parseInt(time.getMinutes())/360;

if (ns) {

Ypos = window.pageYOffset+window.innerHeight-60;

Xpos = window.pageXOffset+window.innerWidth-80;

}

else {

Ypos = document.body.scrollTop + window.document.body.clientHeight - 60;

Xpos = document.body.scrollLeft + window.document.body.clientWidth - 60;

}

if (ns) {

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

document.layers["nsDigits"+i].top = Ypos - 5 + 40 * Math.sin(-0.49+dots+i/1.9);

document.layers["nsDigits"+i].left = Xpos - 15 + 40 * Math.cos(-0.49+dots+i/1.9);

}

for (i = 0; i < S.length; i++){

document.layers["nx"+i].top = Ypos + i * Ybase * Math.sin(sec);

document.layers["nx"+i].left = Xpos + i * Xbase * Math.cos(sec);

}

for (i = 0; i < M.length; i++){

document.layers["ny"+i].top = Ypos + i * Ybase * Math.sin(min);

document.layers["ny"+i].left = Xpos + i * Xbase * Math.cos(min);

}

for (i = 0; i < H.length; i++){

document.layers["nz"+i].top = Ypos + i * Ybase * Math.sin(hrs);

document.layers["nz"+i].left = Xpos + i * Xbase * Math.cos(hrs);

}

else{

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

ieDigits[i].style.pixelTop = Ypos - 15 + 40 * Math.sin(-0.49+dots+i/1.9);

ieDigits[i].style.pixelLeft = Xpos - 14 + 40 * Math.cos(-0.49+dots+i/1.9);

}

for (i=0; i < S.length; i++){

x[i].style.pixelTop = Ypos + i * Ybase * Math.sin(sec);

x[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(sec);

}

for (i=0; i < M.length; i++){

y[i].style.pixelTop = Ypos + i * Ybase * Math.sin(min);

y[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(min);

}

for (i=0; i < H.length; i++){

z[i].style.pixelTop = Ypos + i * Ybase*Math.sin(hrs);

z[i].style.pixelLeft = Xpos + i * Xbase*Math.cos(hrs);

}

setTimeout('clock()', 50);

}

if (document.layers || document.all) window.onload = clock;

// End -->

</SCRIPT>

---------------------------------------

//Standard Analogue Clock - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&

window.addEventListener || window.attachEvent){

(function(){

var fCol="#00ff00"; //face colour.

var dCol="#ffffff"; //dots colour.

var hCol="#ff0000"; //hours colour.

var mCol="#ffffff"; //minutes colour.

var sCol="#00ff00"; //seconds colour.

//Alter nothing below! Alignments will be lost!

var dial = "3 4 5 6 7 8 9 10 11 12 1 2";

dial = dial.split(" ");

var e = 360/dial.length;

var h = 3;

var m = 4;

var s = 5;

var y = 50;

var x = 50;

var cyx = 30/4;

var theDial = [];

var theDots = [];

var theHours = [];

var theMinutes = [];

var theSeconds = [];

var idx = document.getElementsByTagName('div').length;

var pix = "px";

document.write('<div style="position:relative;width:'+(x*2)+'px;height:'+(y*2)+'px">');

for (i=0; i < dial.length; i++){

document.write('<div id="F'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;'

+'font-family:arial,sans-serif;font-size:10px;color:'+fCol+';text-align:center">'+dial[i]+'<\/div>');

document.write('<div id="D'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'

+'width:2px;height:2px;font-size:2px;background-color:'+dCol+'"><\/div>');

}

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

document.write('<div id="H'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'

+'width:2px;height:2px;font-size:2px;background-color:'+hCol+'"><\/div>');

}

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

document.write('<div id="M'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'

+'width:2px;height:2px;font-size:2px;background-color:'+mCol+'"><\/div>');

}

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

document.write('<div id="S'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'

+'width:2px;height:2px;font-size:2px;background-color:'+sCol+'"><\/div>');

}

document.write('<\/div>');

function clock(){

var time = new Date();

var secs = time.getSeconds();

var secOffSet = secs - 15;

if (secs < 15){

secOffSet = secs+45;

}

var sec = Math.PI * (secOffSet/30);

var mins = time.getMinutes();

var minOffSet = mins - 15;

if (mins < 15){

minOffSet = mins+45;

}

var min = Math.PI * (minOffSet/30);

var hrs = time.getHours();

if (hrs > 12){

hrs -= 12;

}

var hrOffSet = hrs - 3;

if (hrs < 3){

hrOffSet = hrs+9;

}

var hr = Math.PI * (hrOffSet/6) + Math.PI * time.getMinutes()/360;

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

theSeconds[i].top = y + (i*cyx) * Math.sin(sec) + pix;

theSeconds[i].left = x + (i*cyx) * Math.cos(sec) + pix;

}

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

theMinutes[i].top = y + (i*cyx) * Math.sin(min) + pix;

theMinutes[i].left = x + (i*cyx) * Math.cos(min) + pix;

}

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

theHours[i].top = y + (i*cyx) * Math.sin(hr) + pix;

theHours[i].left = x + (i*cyx) * Math.cos(hr) + pix;

}

setTimeout(clock,100);

}

function init(){

for (i=0; i < dial.length; i++){

theDial[i] = document.getElementById("F"+(idx+i)).style;

theDial[i].top = y-6 + 30 * 1.4 * Math.sin(i*e*Math.PI/180) + pix;

theDial[i].left = x-6 + 30 * 1.4 * Math.cos(i*e*Math.PI/180) + pix;

theDots[i] = document.getElementById("D"+(idx+i)).style;

theDots[i].top = y + 30 * Math.sin(e*i*Math.PI/180) + pix;

theDots[i].left= x + 30 * Math.cos(e*i*Math.PI/180) + pix;

}

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

theHours[i] = document.getElementById("H"+(idx+i)).style;

}

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

theMinutes[i] = document.getElementById("M"+(idx+i)).style;

}

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

theSeconds[i] = document.getElementById("S"+(idx+i)).style;

}

clock();

}

if (window.addEventListener){

window.addEventListener("load",init,false);

}

else if (window.attachEvent){

window.attachEvent("onload",init);

}

})();

}//End.