一个不使用图片的石英钟

一个不使用图片的石英钟

  这个程序直接存为*.htm。本程序是一个Javascript作图类，不使用图片，
可以在客户端实时作图，这里提供了两个作图函数line，circle。作为应用
我制作了一个不使用图片的石英钟。注意不要把分辨率设的太高，不然影响
速度。这个类生成的图形为一个层，可以放置在任何位置，同时兼容NS和IE。
不过在制作这个石英钟的过程中，我发现NS的运算效率实在是太差了，只制
作了IE版。不过，其他地方还能用NS的，我保留了接口。

<html>
<head>
<title>Clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script language="javascript">
// *****************************************************************
//          Written By Caocao
//          [email protected]
//          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>
<body bgcolor="#FFFFFF">
<DIV id=overDiv style="POSITION: absolute; Z-INDEX: 1"></DIV>
<script language="javascript">
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()",0);
}
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>