js隨機生成網(wǎng)頁背景顏色的方法

更新時間：2015年02月26日 11:58:44 作者：代碼家園

這篇文章主要介紹了js隨機生成網(wǎng)頁背景顏色的方法,涉及javascript操作背景色的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js隨機生成網(wǎng)頁背景顏色的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<HTML> 

<HEAD>

<TITLE>隨機生成網(wǎng)頁背景顏色的JS特效</TITLE>

<STYLE>

.30pt{font-size:30pt;color:#de3076}

</STYLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

color=new Array("0","3","6","9","C","F");

speed=250;

document.bgColor="FFFFFF";

bg=new Array("FFFFFF","FFFFFF","FFFFFF");

function begin() {

document.form.col1.value=" X "; document.form.col2.value=" X ";

document.form.col3.value=" X "; i=0; roll(speed);

}

function roll(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];  //利用隨機函數(shù)產(chǎn)生輪子上的顏色值

}

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);

}

function stop(col) //輪子停止?jié)L動

{

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);

   }

}

function view(letter) //顏色預覽

{

document.bgColor=bg[letter];

document.form.color.value="#"+bg[letter];

}

-->

</script>

</head>

<center>

<br><br><br><br>

<form name="form">

<table cellpadding=2 border=1>

<tr><td align=center>

<input type=text name="a1" size=3 onFocus="this.blur()" value=" ">

<input type=text name="a2" size=3 onFocus="this.blur()" value=" ">

<input type=text name="a3" size=3 onFocus="this.blur()" value=" ">

<input type=button onClick="view(0)" value="預覽"><br>

<input type=text name="b1" size=3 onFocus="this.blur()" value=" ">

<input type=text name="b2" size=3 onFocus="this.blur()" value=" ">

<input type=text name="b3" size=3 onFocus="this.blur()" value=" ">

<input type=button onClick="view(1)" value="預覽"><br>

<input type=text name="c1" size=3 onFocus="this.blur()" value=" ">

<input type=text name="c2" size=3 onFocus="this.blur()" value=" ">

<input type=text name="c3" size=3 onFocus="this.blur()" value=" ">

<input type=button onClick="view(2)" value="預覽"><br>

<input type=button onClick="stop(1)" value=" X " name="col1"> 

<input type=button onClick="stop(2)" value=" X " name="col2"> 

<input type=button onClick="stop(3)" value=" X " name="col3"> 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

         </td>

<td valign=middle align=center>

<input type=button onClick="begin()" value="啟動!"><p>

<table bgcolor=FFFFFF border=1 cellspacing=0>

<tr><td align=center valign=middle>按"X" 輪子停止轉(zhuǎn)動...<p>

BG Color = <input type=text size=7 value="#FFFFFF" name=color>

</td></tr>

</table>

</td></tr>

</table>

</form>

</center>

<table class=30pt>

<tr><td>顏色的隨機產(chǎn)生

</tr><tr><td>按下啟動按鈕,右邊的三排輪子開始滾動

</tr><tr><td>按下三個X按鈕顏色值定下來

</tr><tr><td>按下預覽按鈕可看顏色效果

</tr>

</table><p>

</BODY>

</HTML>