Cet exemple d'article décrit la méthode de génération de couleurs d'arrière-plan Web au hasard par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<adal>
<Title> JS Effets spéciaux Généré au hasard Couleur d'arrière-plan </TITAL>
<Style>
.30pt {Font-Size: 30pt; Couleur: # DE3076}
</ Style>
<Script linguisse = "javascript">
<! -
color = nouveau tableau ("0", "3", "6", "9", "C", "F");
vitesse = 250;
document.bgcolor = "fffff";
bg = nouveau array ("ffffff", "ffffff", "ffffff");
fonction début () {
document.form.col1.value = "x"; document.form.col2.value = "x";
document.form.col3.value = "x"; i = 0; rouler (vitesse);
}
Rouleau de fonction (SpeedB) // roues rouleaux
{
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 =
couleur [math.round (math.random () * 10)% 6] +
couleur [math.round (math.random () * 10)% 6]; // Utilisez des fonctions aléatoires pour générer des valeurs de couleur sur la roue
}
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 =
couleur [math.round (math.random () * 10)% 6] +
couleur [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 =
couleur [math.round (math.random () * 10)% 6] +
couleur [math.round (math.random () * 10)% 6];
}
setTimeout ("roll (" + speedb + ")", speedb);
}
Fonction Stop (COL) // La roue cesse de rouler
{
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);
}
}
Vue de fonction (lettre) // Couleur Aperçu
{
document.bgColor = bg [lettre];
document.form.color.value = "#" + bg [lettre];
}
->
</cript>
</ head>
<Nenter>
<br> <br> <br> <br>
<form name = "form">
<table cellpadding = 2 bordure = 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 = "">
<entrée type = bouton onclick = "View (0)" value = "aperview"> <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 = bouton onclick = "View (1)" value = "aperview"> <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 = bouton onclick = "View (2)" value = "aperview"> <br>
<entrée type = bouton onclick = "stop (1)" value = "x" name = "Col1">
<input type = bouton onclick = "stop (2)" value = "x" name = "col2">
<entrée type = bouton onclick = "stop (3)" value = "x" name = "Col3">
</td>
<td valign = Middle Align = Center>
<entrée type = bouton onclick = "begin ()" value = "start!"> <p>
<Tableau BgColor = FFFFF Border = 1 CellSpacing = 0>
<tr> <td align = Center valign = middle> appuyez sur "x" et la roue cesse de tourner ... <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> Génération aléatoire de couleur
</tr> <tr> <td> Appuyez sur le bouton Démarrer et les trois rangées de roues sur le bon début pour rouler
</tr> <tr> <td> Appuyez sur les trois boutons X pour définir la valeur de couleur
</tr> <tr> <td> Appuyez sur le bouton Aperçu pour voir l'effet de couleur
</tr>
</pally> <p>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.