本实例演示如何在网页上输出颜色渐变的文本。
本实例中关键的函数是rainbow，下面分段介绍其中的代码。首先通过循环中的：
color_d1=255*Math.sin(i/(text.length/3));
color_h1=ToHex(color_d1);
color_d2=mul*i;
color_h2=ToHex(color_d2);
这4条语句取得文本显示的渐变颜色，其中ToHex是一个自定义函数，用于将十进制数转换为字符串形式的十六进制数。
然后程序通过调用document对象的write函数将指定的文本字符逐个地以渐变的颜色填充：
document.write("<FONT color='#FF"+color_h1+color_h2+"'>"+
text.substring(i,i+1)+'</ FONT >');
document.write("<FONT color='#0F"+color_h1+color_h2+"'>"+
text.substring(i,i+1)+'</ FONT >');
document.write("<FONT color='#CC"+color_h1+color_h2+"'>"+
text.substring(i,i+1)+'</ FONT >');
程序运行时，会输出三列指定的文本，但这三列的渐变颜色都各不相同。
<HTML>
<HEAD>
<META name="GENERATOR" content=“Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<P> </P>
<SCRIPT language="javascript">
<!--
var hex=new Array(16);
hex[1]="0"; hex[2]="1"; hex[3]="2"; hex[4]="3";
hex[5]="4"; hex[6]="5"; hex[7]="6"; hex[8]="7";
hex[9]="8"; hex[10]="9"; hex[11]="A"; hex[12]="B";
hex[13]="C"; hex[14]="D"; hex[15]="E"; hex[16]="F";
function ToHex(x)
{
var high=x/16;
var s=high+"";
s=s.substring(0,2);
high=parseInt(s,10);
var left=hex[high+1];
var low=x-high*16;
s=low+"";
s=s.substring(0,2);
low=parseInt(s,10);
var right=hex[low+1];
var string=left+""+right;
return string;
}
function rainbow(text)
{
color_d1=255;
mul=color_d1/text.length;
for(i=0;i<text.length;i++)
{
color_d1=255*Math.sin(i/(text.length/3));
color_h1=ToHex(color_d1);
color_d2=mul*i;
color_h2=ToHex(color_d2);
document.write("<FONT color='#FF"+color_h1+color_h2+"'>"+
text.substring(i,i+1)+'</ FONT >');
document.write("<FONT color='#0F"+color_h1+color_h2+"'>"+
text.substring(i,i+1)+'</ FONT >');
document.write("<FONT color='#CC"+color_h1+color_h2+"'>"+
text.substring(i,i+1)+'</ FONT >');
document.write("<BR>")
}
}
// -->
</SCRIPT>
<SCRIPT>
<!--
rainbow("十里杨州，三生杜牧，前事休说。");
//-->
</SCRIPT>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，就会发现网页上的文本是以渐变颜色填充的。结果如图1-7所示。
图1-7 渐变颜色显示的文本
E- mail:
本站ICP备案号：
