这里给大家介绍一个利用CSS实现表格背影色渐变效果的例子,完整的javascript源码如下:
<Script language="javascript">
<!--
//石井坚 变化背景色 2003-7-3
var randomColor;
var i;
var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
function ToHex(n) //Int-->Hex
{
n = Math.round(n);
l = n % 16;
return (hexch[l]);
}
function filterColorText() //Colorful Text
{
randomColor="";
for(i=0;i<6;i++)
{randomColor=randomColor+ToHex((Math.random()*16));}
randomColor="#"+randomColor;
document.getElementById("tablebg").style.backgroundColor=randomColor;
}
colorInterval=setInterval("filterColorText()",1000);
</script>
<table id=tablebg width=200 border=1 bordercolordark=white bordercolorlight=black cellpadding=3 cellspacing=0 style="word-break:break-all;table-layout:fixed">
<tbody align=center>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
</tbody>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<table id=tablebg width=200 border=1 bordercolordark=white bordercolorlight=black cellpadding=3 cellspacing=0
style="word-break:break-all;table-layout:fixed;color:#ffffff;">
<tbody align=center>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
</tbody>
</table>
<script language="javascript">
//石井坚 2003-07-03
//颜色从rgb(0,0,0)一直变化到rgb(255,255,255)
var r=0;
var g=0;
var b=0;
var rgb;
function setTabColor()
{
var tid=document.getElementById("tablebg");
if(Math.floor(b)!=255){b++;}
else
{
if (Math.floor(g)!=255){g++;b=0;}
else
{
if(Math.floor(r)!=255){r=0;g=0;b=0;}
else{r++;g=0;b=0;}
}
}
//span1.innerHTML=span1.innerHTML+"<Br>Red:"+r+",Green:"+g+",Blue:"+b;
tid.style.backgroundColor=RGB1(r,g,b)
}
colorInterval=setInterval("setTabColor()",1);
</script>
<span id=span1></span>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<table id=tablebg width=200 border=1 bordercolordark=white bordercolorlight=black cellpadding=3 cellspacing=0
style="word-break:break-all;table-layout:fixed;color:#ffffff;">
<tbody align=center>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
<tr><td>aaaa</td></tr>
</tbody>
</table>
<script language="javascript">
//石井坚 2003-07-03
//颜色从rgb(0,0,0)一直变化到rgb(255,255,255)
var r=0;
var g=0;
var b=0;
var rgb;
function setTabColor()
{
var tid=document.getElementById("tablebg");
if(Math.floor(b)!=255){b++;}
else
{
if (Math.floor(g)!=255){g++;b=0;}
else
{
if(Math.floor(r)!=255){r=0;g=0;b=0;}
else{r++;g=0;b=0;}
}
}
//span1.innerHTML=span1.innerHTML+"<Br>Red:"+r+",Green:"+g+",Blue:"+b;
tid.style.backgroundColor=RGB1(r,g,b)
}
colorInterval=setInterval("setTabColor()",1);
</script>
<span id=span1></span>
<script language=Vbs>
Function RGB1(r,g,b)
RGB1=RGB(r,g,b)
End Function
</script> |
|
|
|
