<script language="javascript">
  var line=new Array();
  var w=35;     <!-- 一條邊框的小格的個數（所以是個正方形）-->
  var left=7;  <!-- 這個是邊框在頁面中的位置的左上角的X坐標-->
  var top=12;   <!-- 自然就是縱坐啦-->
  var width=4;  <!-- 邊框中一小格的象素寬-->
  var height=3;  <!-- 邊框的高度，設為1的話就是一條細線了-->
  line[0]="ff"+Number(25).toString(16)+Number(25).toString(16);
  line[1]="ff"+Number(50).toString(16)+Number(50).toString(16);
  line[2]="ff"+Number(75).toString(16)+Number(75).toString(16);
  line[3]="ff"+Number(100).toString(16)+Number(100).toString(16);
  line[4]="ff"+Number(125).toString(16)+Number(125).toString(16);
  line[5]="ff"+Number(150).toString(16)+Number(150).toString(16);
  line[6]="ff"+Number(175).toString(16)+Number(175).toString(16);
  line[7]="ff"+Number(200).toString(16)+Number(200).toString(16);
  line[8]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[9]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[10]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[11]="ff"+Number(225).toString(16)+Number(225).toString(16);
  line[12]="ff"+Number(200).toString(16)+Number(200).toString(16);
  line[13]="ff"+Number(175).toString(16)+Number(175).toString(16);
  line[14]="ff"+Number(150).toString(16)+Number(150).toString(16);
  line[15]="ff"+Number(125).toString(16)+Number(125).toString(16);
  line[16]="ff"+Number(100).toString(16)+Number(100).toString(16);
  line[17]="ff"+Number(75).toString(16)+Number(75).toString(16);
  line[18]="ff"+Number(50).toString(16)+Number(50).toString(16);
  line[19]="ff"+Number(25).toString(16)+Number(25).toString(16);

  function writes(num)
  {
    var temp;    var s;    var tl,tt;    var tw,th;    temp=num+1;<!--定義變量-->
    if(num==0)<!--寫第一條邊-->
    {
      tl = left;<!--左邊界-->
      tt = top;<!--上邊界-->
      tw = w*width;<!--寬度-->
      th = height;<!--高度-->
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0' ><tr>";
      for(r=0;r<w;r++)<!--依次畫出每一個小格-->
      {
        temp=r+w*num;<!--獲得當前的小格的位置-->
        s+="<td id=tab"+temp+" bgcolor=red></td>";<!--寫入小格-->
      }
      s+="</tr></table>";
    }
    if(num==1)<!--寫第二條邊-->
    {
      tl = left+w*width;<!--左邊界-->
      tt = top;<!--上邊界-->
      tw = height;<!--高度-->
      th = w*width;<!--寬度-->
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'>";
      for(r=0;r<w;r++)<!--依次畫出每一個小格-->
      {
        temp=r+w*num;<!--獲得當前的小格的位置-->
        s+="<tr><td id=tab"+temp+" bgcolor=red></td></tr>";<!--寫入小格-->
      }
      s+="</table>";
    }
    if(num==2)<!--寫第三條邊-->
    {
      tl = left+height;<!--上邊界-->
      tt = top+w*width;<!--左邊界-->
      tw = w*width;<!--寬度-->
      th = height;<!--高度-->
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'><tr>";
      for(r=w;r>0;r--)<!--依次畫出每一個小格-->
      {
        temp=r-1+w*num;
        s+="<td id=tab"+temp+" bgcolor=red></td>";<!--寫入小格-->
      }
      s+="</tr></table>";
    }
    if(num==3)<!--寫第四條邊-->
    {
      tl = left;<!--左邊界-->
      tt = top+height;<!--上邊界-->
      tw = height;<!--高度-->
      th = w*width;<!--寬度-->
      s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'>";
      for(r=w;r>0;r--)<!--依次畫出每一個小格-->
      {
        temp=r-1+w*num;
        s+="<tr><td id=tab"+temp+" bgcolor=red></td></tr>";<!--寫入小格-->
      }
      s+="</table>";
    }
    return s;<!--返回s-->
  }
  
  
  function count()
  {
    var i;    var temp;    var total;<!--定義變量-->
    total = w*4;<!--小格的總數-->
    for(i=0; i<line.length; i++)<!--處理當前小格前后各10個點-->
    {
      temp=pos+i-line.length/2;<!--獲取當前處理的點-->
      temp=temp<0?(total+temp):temp;<!--如果小于0，則循環到后邊-->
      temp=temp>(total-1)?(temp-total):temp;<!--如果大于總數，則循環到前面-->
      document.all["tab"+temp].style.backgroundColor=line[line.length-i];<!--給小格上適當的顏色-->
    }
    pos=(pos+1)>total?0:(pos+1);<!--pos加1，如果pos超過小格的總數，則重頭開始-->
  }

  for(i=0;i<=3;i++)
  {
    document.write(writes(i));<!--依次處理方框的每一條邊-->
  }
  
  var pos=0;<!--初始化變量-->
  setInterval("count()", 1);<!--調用count函數-->
</script>
<img src="leaf.jpg">

<!--本例程實現了走在方框上的霧-->
<!--霧的動畫效果的實現-->
<!--用表格的形式來畫邊框，便于精確的顏色控制-->
<!--setinterval函數的使用-->