热点排行

利用JavaScript代码实现的圆角表格

类别：网站制作 点击：0 评论：0 推荐：

圆角表格1代码：

<html>
<head>
<title>园角表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
function rtLoad(m,w,h,tl,tr,bl,br,lp,tp,tbk,bbk,bd,pd,bg,c,s,overact,outact)
{
 var rtHTML=null;
 switch(m)
 {
  case 1:
   wt=w-2;ht=h-2;
   var rtWArray=new Array(1,wt,1);
   var rtHArray=new Array(1,ht,1);
   break;
  case 2:
   wt=w-4;ht=h-4;
   var rtWArray=new Array(1,1,wt,1,1);
   var rtHArray=new Array(1,1,ht,1,1);
   break;
  case 3:
   wt=w-8;ht=h-8;
   var rtWArray=new Array(1,1,2,wt,2,1,1);
   var rtHArray=new Array(1,1,2,ht,2,1,1);
   break;
  case 4:
   wt=w-10;ht=h-10;
   var rtWArray=new Array(1,1,1,2,wt,2,1,1,1);
   var rtHArray=new Array(1,1,1,2,ht,2,1,1,1);
   break;
  case 5:
   wt=w-14;ht=h-14;
   var rtWArray=new Array(1,1,1,2,2,wt,2,2,1,1,1);
   var rtHArray=new Array(1,1,1,2,2,ht,2,2,1,1,1);
   break;
  case 6:
   wt=w-12;ht=h-12;
   var rtWArray=new Array(1,1,1,1,1,1,wt,1,1,1,1,1,1);
   var rtHArray=new Array(1,1,1,1,1,1,ht,1,1,1,1,1,1);
   break;
  default:
   wt=w-8;ht=h-8;
   var rtWArray=new Array(1,1,2,wt,2,1,1);
   var rtHArray=new Array(1,1,2,ht,2,1,1);
   break;
 }
 if(rtWArray&&rtHArray)
 {
  var rtM=rtWArray.length-rtWArray.length%2;
  var rtN=rtM/2;
 }
 
 if(rtWArray&&rtHArray&&rtM&&rtN)
 {
  if(c.outerHTML)
  {
   c.style.display="";
   var cont=c.outerHTML;
   c.outerHTML="";
  }
  else
  {
   var cont=c;
  }
  if(!pd)pd="0px";
  rtHTML="<div style=\"width:" + w + ";height:" + h + ";cursor:default;" + s + "\" onmouseover=\"" + overact + "\" onmouseout=\"" + outact + "\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n";
  for(i=0;i<=rtM;i++)
  {
   rtHTML+="<tr>\n";
   for(j=0;j<=rtM;j++)
   {
    rtHTML+="<td width=\"" + rtWArray[j] +"\" height=\"" + rtHArray[i] +"\"";
    if(i>=rtN)
    {
     m=0+(i-rtN);
     n=rtM-(i-rtN);
    }
    else
    {
     m=0+(rtN-i);
     n=rtM-(rtN-i);
    }
    if(i<rtN&&j<rtN)//检验左上角
    {
     if(tl)
     {
      if(j==m||j==n)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      if(j>m&&j<n)
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
     else
     {
      if(i==0||j==0)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      else
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
    }
    if(i<rtN&&j>rtN)//检验右上角
    {
     if(tr)
     {
      if(j==m||j==n)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      if(j>m&&j<n)
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
     else
     {
      if(i==0||j==rtM)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      else
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
    }
    if(i>rtN&&j<rtN)//检验左下角
    {
     if(bl)
     {
      if(j==m||j==n)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      if(j>m&&j<n)
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
     else
     {
      if(i==rtM||j==0)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      else
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
    }
    if(i>rtN&&j>rtN)//检验右下角
    {
     if(br)
     {
      if(j==m||j==n)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      if(j>m&&j<n)
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
     else
     {
      if(i==rtM||j==rtM)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      else
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
    }
    if(i==rtN&&j==rtN)
     rtHTML+=" align=\"" + lp + "\" valign=\"" + tp + "\" bgcolor=\"" + bg + "\" style=\"padding:" + pd + "\">" + cont + "</td>\n";
    else if((i==rtN&&j==0)||(i==0&&j==rtN)||(i==rtN&&j==rtM)||(i==rtM&&j==rtN))
     rtHTML+=" bgcolor=\"" + bd + "\"></td>\n";
    else if((i==rtN&&j<rtN)||(i==rtN&&j>rtN)||(i<rtN&&j==rtN)||(i>rtN&&j==rtN))
     rtHTML+=" bgcolor=\"" + bg + "\"></td>\n";
    else
    {
     if(i<rtN)
      rtHTML+=" bgcolor=\"" + tbk + "\"></td>\n";
     else
      rtHTML+=" bgcolor=\"" + bbk + "\"></td>\n";
    }
   }
   rtHTML+="</tr>\n";
  }
  rtHTML+="</table></div>";
  return rtHTML;
 }
}
var response = {
     write : function() { document.write(arguments[0]) }
  }
function check_mouse()
{
 tn=event.srcElement.tagName;
 if(tn!='INPUT'&&tn!='TEXTAREA')
  return false;
}
document.onselectstart=new Function("tn=event.srcElement.tagName;if(tn!='INPUT'&&tn!='TEXTAREA')return false;");
</script>
<style>
<!--
table        { font-size:11px;font-family:Tahoma }
input  { font-size:11px;font-family:Tahoma;border:0px;background-color:transparent;width:170px;height:15px;color:#4F7900 }
-->
</style>
<body topmargin="0" leftmargin="0" scroll=no bgcolor="#FFFFFF"><!--#84CA00-->

<div align="left">
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="100%">
    <tr>
      <td width="100%" height="100%" align="center">
      <span id="headt" style="color:#247C1B;">You must have administrative access to successfully log into the Eastpower Board Administration CP.<BR>
      Please enter your administrator username and password below.</span>
      <span style="color: #36B02D" id="middt"><font style="font-size: 13px;"><b>Verification Required</b></font>
      <hr noshade color="#36B02D" size="1">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;color: #36B02D" width="362" height="56">
    <tr>
      <td width="154" height="22">Your Administrator Username:</td>
      <td width="202" height="22" id="idname_t"></td>
    </tr>
    <tr>
      <td width="154" height="22">Your Administrator Password:</td>
      <td width="202" height="22" id="passwd_t"></td>
    </tr>
    <tr>
      <td width="154" height="19">　</td>
      <td width="202" height="19">　</td>
    </tr>
  </table></span>
      <script language="javascript">
       //      0背景变色 1标题字色 2外框色   3内框色   4内字色   5外框底色 6上内框底色 7下内框底色
       var color=new Array("","#217118","#247C1B","#2F9726","#36B02D","#BCECB7","#E3F7E1","#F2FBF2","#FFFFFF");
       //var color=new Array("#52D342","#315100","#426D00","#529200","#6BA600","#A5FF00","#C6FF63","#E7FFBD","#FFFFFF");
       tmp="<span style=\"width:380px;height:15px;text-align:left;padding-left:1px;font-size:12px;font-family:helvetica;color:" + color[1] + "\"><b>Welcome to the Eastpower Board Administration CP</b></span><br>"
          +rtLoad(3,382,43,true,true,false,false,"left","middle","","",color[3],2,color[6],headt,"","","")
          +rtLoad(3,382,110,false,false,false,false,"left","top","","",color[7],2,color[7],middt,"border:1px solid "+color[3]+";border-top:0px;","","")
          +"<span style=\"width:71px;height:18px;text-align:left;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"
          +rtLoad(2,59,18,true,true,true,true,"center","middle",color[5],color[5],color[4],0,"","<u>H</u>ome","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';")
          +"</span>"
          +"<span style=\"width:238px;height:18px;text-align:right;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"
          +rtLoad(2,59,18,true,true,true,true,"center","middle",color[5],color[5],color[4],0,"","<u>O</u>k","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';")
          +"</span>"
          +"<span style=\"width:71px;height:18px;text-align:right;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"
          +rtLoad(2,59,18,true,true,true,true,"center","middle",color[5],color[5],color[4],0,"","<u>C</u>ancel","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';")
          +"</span>";
       //tmp2=rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#D6D7D6",tmp,"","","");
  response.write(rtLoad(4,400,212,true,true,true,true,"center","middle",color[8],color[8],color[2],0,color[5],tmp,"","",""));
  //response.write("<br>"+rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#DEE7EF",tmp,"","",""));
  
  idname_t.innerHTML=rtLoad(2,190,17,true,true,true,true,"center","middle","","",color[4],0,"","<input type=\"text\" name=\"idname\" size=\"20\">","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';");
  passwd_t.innerHTML=rtLoad(2,190,17,true,true,true,true,"center","middle","","",color[4],0,"","<input type=\"password\" name=\"passwd\" size=\"20\">","background-color:"+color[7],"this.style.backgroundColor='"+color[8]+"';","this.style.backgroundColor='"+color[7]+"';");
      </script></td>
    </tr>
  </table>
</div>
</body>
</html>


圆角表格2代码：

<html>
<head>
<title>园角表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
function rtLoad(m,w,h,tl,tr,bl,br,lp,tp,tbk,bbk,bd,pd,bg,c,s,overact,outact)
{
 var rtHTML=null;
 switch(m)
 {
  case 1:
   wt=w-2;ht=h-2;
   var rtWArray=new Array(1,wt,1);
   var rtHArray=new Array(1,ht,1);
   break;
  case 2:
   wt=w-4;ht=h-4;
   var rtWArray=new Array(1,1,wt,1,1);
   var rtHArray=new Array(1,1,ht,1,1);
   break;
  case 3:
   wt=w-8;ht=h-8;
   var rtWArray=new Array(1,1,2,wt,2,1,1);
   var rtHArray=new Array(1,1,2,ht,2,1,1);
   break;
  case 4:
   wt=w-10;ht=h-10;
   var rtWArray=new Array(1,1,1,2,wt,2,1,1,1);
   var rtHArray=new Array(1,1,1,2,ht,2,1,1,1);
   break;
  case 5:
   wt=w-14;ht=h-14;
   var rtWArray=new Array(1,1,1,2,2,wt,2,2,1,1,1);
   var rtHArray=new Array(1,1,1,2,2,ht,2,2,1,1,1);
   break;
  case 6:
   wt=w-12;ht=h-12;
   var rtWArray=new Array(1,1,1,1,1,1,wt,1,1,1,1,1,1);
   var rtHArray=new Array(1,1,1,1,1,1,ht,1,1,1,1,1,1);
   break;
  default:
   wt=w-8;ht=h-8;
   var rtWArray=new Array(1,1,2,wt,2,1,1);
   var rtHArray=new Array(1,1,2,ht,2,1,1);
   break;
 }
 if(rtWArray&&rtHArray)
 {
  var rtM=rtWArray.length-rtWArray.length%2;
  var rtN=rtM/2;
 }
 
 if(rtWArray&&rtHArray&&rtM&&rtN)
 {
  if(c.outerHTML)
  {
   c.style.display="";
   var cont=c.outerHTML;
   c.outerHTML="";
  }
  else
  {
   var cont=c;
  }
  if(!pd)pd="0px";
  rtHTML="<div style=\"width:" + w + ";height:" + h + ";cursor:default;" + s + "\" onmouseover=\"" + overact + "\" onmouseout=\"" + outact + "\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n";
  for(i=0;i<=rtM;i++)
  {
   rtHTML+="<tr>\n";
   for(j=0;j<=rtM;j++)
   {
    rtHTML+="<td width=\"" + rtWArray[j] +"\" height=\"" + rtHArray[i] +"\"";
    if(i>=rtN)
    {
     m=0+(i-rtN);
     n=rtM-(i-rtN);
    }
    else
    {
     m=0+(rtN-i);
     n=rtM-(rtN-i);
    }
    if(i<rtN&&j<rtN)//检验左上角
    {
     if(tl)
     {
      if(j==m||j==n)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      if(j>m&&j<n)
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
     else
     {
      if(i==0||j==0)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      else
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
    }
    if(i<rtN&&j>rtN)//检验右上角
    {
     if(tr)
     {
      if(j==m||j==n)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      if(j>m&&j<n)
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
     else
     {
      if(i==0||j==rtM)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      else
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
    }
    if(i>rtN&&j<rtN)//检验左下角
    {
     if(bl)
     {
      if(j==m||j==n)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      if(j>m&&j<n)
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
     else
     {
      if(i==rtM||j==0)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      else
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
    }
    if(i>rtN&&j>rtN)//检验右下角
    {
     if(br)
     {
      if(j==m||j==n)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      if(j>m&&j<n)
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
     else
     {
      if(i==rtM||j==rtM)
      {
       rtHTML+=" bgcolor=\"" + bd + "\"";
      }
      else
      {
       rtHTML+=" bgcolor=\"" + bg + "\"";
      }
     }
    }
    if(i==rtN&&j==rtN)
     rtHTML+=" align=\"" + lp + "\" valign=\"" + tp + "\" bgcolor=\"" + bg + "\" style=\"padding:" + pd + "\">" + cont + "</td>\n";
    else if((i==rtN&&j==0)||(i==0&&j==rtN)||(i==rtN&&j==rtM)||(i==rtM&&j==rtN))
     rtHTML+=" bgcolor=\"" + bd + "\"></td>\n";
    else if((i==rtN&&j<rtN)||(i==rtN&&j>rtN)||(i<rtN&&j==rtN)||(i>rtN&&j==rtN))
     rtHTML+=" bgcolor=\"" + bg + "\"></td>\n";
    else
    {
     if(i<rtN)
      rtHTML+=" bgcolor=\"" + tbk + "\"></td>\n";
     else
      rtHTML+=" bgcolor=\"" + bbk + "\"></td>\n";
    }
   }
   rtHTML+="</tr>\n";
  }
  rtHTML+="</table></div>";
  return rtHTML;
 }
}
var response = {
     write : function() { document.write(arguments[0]) }
  }
function check_mouse()
{
 tn=event.srcElement.tagName;
 if(tn!='INPUT'&&tn!='TEXTAREA')
  return false;
}
document.onselectstart=new Function("tn=event.srcElement.tagName;if(tn!='INPUT'&&tn!='TEXTAREA')return false;");
</script>
<style>
<!--
table        { font-size:11px;font-family:Tahoma }
input  { font-size:11px;font-family:Tahoma;border:0px solid #737173;width:170px;height:15px;color:#ff0000 }
-->
</style>
</head>
<body topmargin="0" leftmargin="0" scroll=no bgcolor="#DEE7EF">
<div align="left">
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="100%">
    <tr>
      <td width="100%" height="100%" align="center">
      <span id="headt" style="color:#333333;">You must have administrative access to successfully log into the Eastpower Board Administration CP.<BR>
      Please enter your administrator username and password below.</span>
      <span style="color: #737173" id="middt"><font style="font-size: 13px;"><b>Verification Required</b></font>
      <hr noshade color="#999999" size="1">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;color: #737173" width="362" height="56">
    <tr>
      <td width="154" height="22">Your Administrator Username:</td>
      <td width="202" height="22" id="idname_t"></td>
    </tr>
    <tr>
      <td width="154" height="22">Your Administrator Password:</td>
      <td width="202" height="22" id="passwd_t"></td>
    </tr>
    <tr>
      <td width="154" height="19">　</td>
      <td width="202" height="19">　</td>
    </tr>
  </table></span>
      <script language="javascript">
       tmp="<span style=\"width:380px;height:15px;text-align:left;padding-left:1px;font-size:12px;font-family:helvetica;color:#3169A5\"><b>Welcome to the Eastpower Board Administration CP</b></span><br>"
          +rtLoad(3,382,43,true,true,false,false,"left","middle","","","#737173",2,"#FFFFEE",headt,"","","")
          +rtLoad(3,382,110,false,false,false,false,"left","top","","","#FFFFFF",2,"#FFFFFF",middt,"border-left:1px solid #737173;border-right:1px solid #737173;border-bottom:1px solid #737173;","","")
          +"<span style=\"width:74px;height:18px;text-align:left;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"
          +rtLoad(2,59,18,true,true,true,true,"center","middle","#D6D7D6","#D6D7D6","",0,"#E7E7E7","<u>H</u>ome","background-color:#BFBDBF","this.style.backgroundColor='#737173';","this.style.backgroundColor='#BFBDBF';")
          +"</span>"
          +"<span style=\"width:238px;height:18px;text-align:right;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"
          +rtLoad(2,59,18,true,true,true,true,"center","middle","#D6D7D6","#D6D7D6","#737173",0,"","<u>O</u>k","background-color:#E7E7E7","this.style.backgroundColor='#FFFFFF';","this.style.backgroundColor='#E7E7E7';")
          +"</span>"
          +"<span style=\"width:71px;height:18px;text-align:right;font-size:12px;font-family:Arial;color:#3169A5;padding-top:3px\">"
          +rtLoad(2,59,18,true,true,true,true,"center","middle","#D6D7D6","#D6D7D6","#737173",0,"","<u>C</u>ancel","background-color:#E7E7E7","this.style.backgroundColor='#FFFFFF';","this.style.backgroundColor='#E7E7E7';")
          +"</span>";
       //tmp2=rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#D6D7D6",tmp,"","","");
  response.write(rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#D6D7D6",tmp,"","",""));
  //response.write("<br>"+rtLoad(4,400,212,true,true,true,true,"center","middle","","","#A8AAA8",0,"#DEE7EF",tmp,"","",""));
  
  idname_t.innerHTML=rtLoad(2,190,17,true,true,true,true,"center","middle","","","#D6D7D6",0,"","<input type=\"text\" name=\"idname\" size=\"20\">","","","");
  passwd_t.innerHTML=rtLoad(2,190,17,true,true,true,true,"center","middle","","","#D6D7D6",0,"","<input type=\"password\" name=\"passwd\" size=\"20\">","","","");
  
  //tt=rtLoad(1,17,17,true,true,true,true,"center","middle","","","#A5C3FF",0,"#A5C3FF","","","","");
  //response.write("<br>"+rtLoad(2,21,21,true,true,true,true,"center","middle","","","#FFFFFF",0,"#2971FF",tt,"","",""));
      </script></td>
    </tr>
  </table>
</div>
</body>
</html>

本文地址：http://com.8s8s.com/it/it30971.htm

Copyright © 2004-2013 信息技术中文网 All rights reserved 版权所有

Powered by 信息技术中文网 Ver2.0