この記事の例では、JSによってWebバックグラウンドカラーをランダムに生成する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<Title> JS Special Effectsランダムに生成されたWebページの背景色</title>
<style>
.30pt {font-size：30pt; color：＃de3076}
</style>
<スクリプト言語= "javascript">
<！ -
color = new Array（ "0"、 "3"、 "6"、 "9"、 "c"、 "f"）;
速度= 250;
document.bgcolor = "fffff";
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;ロール（速度）;
}
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]; //ランダム関数を使用して、ホイールに色の値を生成します
}
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];
}
setimeout（ "roll（"+speedb+"）"、speedb）;
}
関数停止（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）;
}
}
関数ビュー（文字）//色プレビュー
{
document.bgcolor = bg [文字];
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>
<入力型=テキスト名= "a1" size = 3 onfocus = "this.blur（）" value = "">
<入力型=テキストname = "a2" size = 3 onfocus = "this.blur（）" value = "">
<入力型=テキスト名= "a3" size = 3 onfocus = "this.blur（）" value = "">
<入力型=ボタンonclick = "View（0）" value = "preview"> <br>
<入力型=テキスト名= "b1" size = 3 onfocus = "this.blur（）" value = "">
<入力型=テキスト名= "b2" size = 3 onfocus = "this.blur（）" value = "">
<入力型=テキスト名= "b3" size = 3 onfocus = "this.blur（）" value = "">
<入力型=ボタンonclick = "View（1）" value = "preview"> <br>
<入力型=テキストname = "c1" size = 3 onfocus = "this.blur（）" value = "">
<入力型=テキスト名= "c2" size = 3 onfocus = "this.blur（）" value = "">
<入力型=テキストname = "c3" size = 3 onfocus = "this.blur（）" value = "">
<入力型=ボタンonclick = "View（2）" value = "preview"> <br>
<入力型=ボタンonclick = "stop（1）" value = "x" name = "col1">
<入力型=ボタンonclick = "stop（2）" value = "x" name = "col2">
<入力型=ボタンonclick = "stop（3）" value = "x" name = "col3">
</td>
<td valign = middle align = center>
<入力型=ボタンonclick = "begin（）" value = "start！"> <p>
<表BgColor = fffff border = 1 cellspacing = 0>
<tr> <td align = center valign = middle> press "x"を押すと、ホイールが回転しなくなります... <p>
bg color = <入力タイプ=テキストサイズ= 7 value = "＃ffffff" name = color>
</td> </tr>
</table>
</td> </tr>
</table>
</form>
</center>
<テーブルクラス= 30pt>
<tr> <TD>ランダム生成色
</tr> <tr> <td>スタートボタンを押し、右側のホイールの3列を押してロールします
</tr> <tr> <td> 3つのxボタンを押して色値を設定します
</tr> <tr> <td>プレビューボタンを押して、色の効果を確認します
</tr>
</table> <p>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。