js隨機(jī)生成網(wǎng)頁(yè)背景顏色的方法
更新時(shí)間:2015年02月26日 11:58:44 作者:代碼家園
這篇文章主要介紹了js隨機(jī)生成網(wǎng)頁(yè)背景顏色的方法,涉及javascript操作背景色的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js隨機(jī)生成網(wǎng)頁(yè)背景顏色的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
復(fù)制代碼 代碼如下:
<HTML>
<HEAD>
<TITLE>隨機(jī)生成網(wǎng)頁(yè)背景顏色的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) //輪子滾動(dòng)
{
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]; //利用隨機(jī)函數(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動(dòng)
{
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) //顏色預(yù)覽
{
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="預(yù)覽"><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="預(yù)覽"><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="預(yù)覽"><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">
</td>
<td valign=middle align=center>
<input type=button onClick="begin()" value="啟動(dòng)!"><p>
<table bgcolor=FFFFFF border=1 cellspacing=0>
<tr><td align=center valign=middle>按"X" 輪子停止轉(zhuǎn)動(dòng)...<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>顏色的隨機(jī)產(chǎn)生
</tr><tr><td>按下啟動(dòng)按鈕,右邊的三排輪子開(kāi)始滾動(dòng)
</tr><tr><td>按下三個(gè)X按鈕顏色值定下來(lái)
</tr><tr><td>按下預(yù)覽按鈕可看顏色效果
</tr>
</table><p>
</BODY>
</HTML>
<HEAD>
<TITLE>隨機(jī)生成網(wǎng)頁(yè)背景顏色的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) //輪子滾動(dòng)
{
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]; //利用隨機(jī)函數(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動(dòng)
{
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) //顏色預(yù)覽
{
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="預(yù)覽"><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="預(yù)覽"><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="預(yù)覽"><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">
</td>
<td valign=middle align=center>
<input type=button onClick="begin()" value="啟動(dòng)!"><p>
<table bgcolor=FFFFFF border=1 cellspacing=0>
<tr><td align=center valign=middle>按"X" 輪子停止轉(zhuǎn)動(dòng)...<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>顏色的隨機(jī)產(chǎn)生
</tr><tr><td>按下啟動(dòng)按鈕,右邊的三排輪子開(kāi)始滾動(dòng)
</tr><tr><td>按下三個(gè)X按鈕顏色值定下來(lái)
</tr><tr><td>按下預(yù)覽按鈕可看顏色效果
</tr>
</table><p>
</BODY>
</HTML>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JavaScript隨機(jī)生成顏色的方法
- javascript生成隨機(jī)顏色示例代碼
- js生成隨機(jī)顏色方法代碼分享(三種)
- JavaScript實(shí)現(xiàn)簡(jiǎn)單生成隨機(jī)顏色的方法
- js隨機(jī)顏色代碼的多種實(shí)現(xiàn)方式
- js獲取隨機(jī)顏色值的函數(shù)
- JS實(shí)現(xiàn)隨機(jī)顏色的3種方法與顏色格式的轉(zhuǎn)化
- js從10種顏色中隨機(jī)取色實(shí)現(xiàn)每次取出不同的顏色
- 基于JavaScript實(shí)現(xiàn)拖動(dòng)滑塊效果
- js網(wǎng)頁(yè)中隨意拖動(dòng)的小方塊實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成可拖動(dòng)的不同顏色塊示例
相關(guān)文章
微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?
這篇文章主要介紹了微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問(wèn)題的兩種解決方案,需要的朋友可以參考下2018-09-09用javascript獲取textarea中的光標(biāo)位置
Javascript一向以他的靈活隨意而著稱(chēng),這也使得它的功能可以非常的強(qiáng)大,而由于沒(méi)有比較好的調(diào)試工具,又使得它使用起來(lái)困難重重,尤其使對(duì)于一些初學(xué)者,更是感覺(jué)到無(wú)從下手。今天探討的問(wèn)題是用javascript獲取textarea中光標(biāo)的位置。2008-05-05深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法
本文介紹了深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01JS jQuery使用正則表達(dá)式去空字符的簡(jiǎn)單實(shí)現(xiàn)代碼
本文給大家分享使用正則表達(dá)式去空字符的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友參考下2017-05-05