js随机生成网页背景颜色的方法
本文实例讲述了js随机生成网页背景颜色的方法。分享给大家供大家参考。具体实现方法如下：
<HTML>
<HEAD>
<TITLE>随机生成网页背景颜色的JS特效</TITLE>
<STYLE>
.30pt{font-size:30pt;color:#de3076}
</STYLE>
<SCRIPTLANGUAGE="JavaScript">
<!--
color=newArray("0","3","6","9","C","F");
speed=250;
document.bgColor="FFFFFF";
bg=newArray("FFFFFF","FFFFFF","FFFFFF");
functionbegin(){
document.form.col1.value="X";document.form.col2.value="X";
document.form.col3.value="X";i=0;roll(speed);
}
functionroll(speedB)//轮子滚动
{
if(document.form.col1.value=="X"){
document.form.c1.value=document.form.b1.value;
document.form.b1.value=document.form.a1.value;
document.form.a1.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6]; //利用随机函数产生轮子上的颜色值
}
if(document.form.col2.value=="X"){
document.form.c2.value=document.form.b2.value;
document.form.b2.value=document.form.a2.value;
document.form.a2.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6];
}
if(document.form.col3.value=="X"){
document.form.c3.value=document.form.b3.value;
document.form.b3.value=document.form.a3.value;
document.form.a3.value=
color[Math.round(Math.random()*10)%6]+
color[Math.round(Math.random()*10)%6];
}
setTimeout("roll("+speedB+")",speedB);
}
functionstop(col)//轮子停止滚动
{
if(col==1){document.form.col1.value=" ";i++;}
if(col==2){document.form.col2.value=" ";i++;}
if(col==3){document.form.col3.value=" ";i++;}
if(i==3){
bg[0]=document.form.a1.value+
document.form.a2.value+
document.form.a3.value;
bg[1]=document.form.b1.value+
document.form.b2.value+
document.form.b3.value;
bg[2]=document.form.c1.value+
document.form.c2.value+
document.form.c3.value;
speedB=500000;roll(speedB);
}
}
functionview(letter)//颜色预览
{
document.bgColor=bg[letter];
document.form.color.value="#"+bg[letter];
}
-->
</script>
</head>
<center>
<br><br><br><br>
<formname="form">
<tablecellpadding=2border=1>
<tr><tdalign=center>
<inputtype=textname="a1"size=3onFocus="this.blur()"value="">
<inputtype=textname="a2"size=3onFocus="this.blur()"value="">
<inputtype=textname="a3"size=3onFocus="this.blur()"value="">
<inputtype=buttononClick="view(0)"value="预览"><br>
<inputtype=textname="b1"size=3onFocus="this.blur()"value="">
<inputtype=textname="b2"size=3onFocus="this.blur()"value="">
<inputtype=textname="b3"size=3onFocus="this.blur()"value="">
<inputtype=buttononClick="view(1)"value="预览"><br>
<inputtype=textname="c1"size=3onFocus="this.blur()"value="">
<inputtype=textname="c2"size=3onFocus="this.blur()"value="">
<inputtype=textname="c3"size=3onFocus="this.blur()"value="">
<inputtype=buttononClick="view(2)"value="预览"><br>
<inputtype=buttononClick="stop(1)"value="X"name="col1">
<inputtype=buttononClick="stop(2)"value="X"name="col2">
<inputtype=buttononClick="stop(3)"value="X"name="col3">
</td>
<tdvalign=middlealign=center>
<inputtype=buttononClick="begin()"value="启动!"><p>
<tablebgcolor=FFFFFFborder=1cellspacing=0>
<tr><tdalign=centervalign=middle>按"X"轮子停止转动...<p>
BGColor=<inputtype=textsize=7value="#FFFFFF"name=color>
</td></tr>
</table>
</td></tr>
</table>
</form>
</center>
<tableclass=30pt>
<tr><td>颜色的随机产生
</tr><tr><td>按下启动按钮,右边的三排轮子开始滚动
</tr><tr><td>按下三个X按钮颜色值定下来
</tr><tr><td>按下预览按钮可看颜色效果
</tr>
</table><p>
</BODY>
</HTML>
希望本文所述对大家的javascript程序设计有所帮助。