Este ejemplo de artículo describe el método para generar aleatoriamente los colores de fondo web por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <html>
<Evista>
<title> JS Efectos especiales Generado aleatoriamente Color de fondo de la página web </title>
<Estilo>
.30PT {font-size: 30pt; color:#DE3076}
</style>
<Script language = "javaScript">
<!-
color = nueva matriz ("0", "3", "6", "9", "c", "f");
velocidad = 250;
document.bgcolor = "fffff";
bg = nueva matriz ("ffffff", "ffffff", "ffffff");
función begin () {
document.form.col1.value = "x"; document.form.col2.value = "x";
document.form.col3.value = "x"; i = 0; rollo (velocidad);
}
rollo de funciones (speedb) // rollo de ruedas
{
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]; // Use funciones aleatorias para generar valores de color en la rueda
}
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);
}
parada de funciones (col) // La rueda deja de rodar
{
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; rollo (speedb);
}
}
Vista de funciones (letra) // Vista previa del color
{
document.bgcolor = bg [letra];
document.form.color.value = "#"+bg [letra];
}
->
</script>
</ablo>
<centro>
<br> <br> <br> <br>
<form de nombre = "formulario">
<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 = "">
<Entrada tipo = botón onClick = "View (0)" Value = "Preview"> <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 = "">
<Entrada tipo = botón onClick = "View (1)" Value = "Preview"> <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 = "">
<Entrada tipo = botón onClick = "View (2)" Value = "Preview"> <br>
<Entrada tipo = botón onClick = "stop (1)" value = "x" name = "col1">
<Entrada tipo = botón onClick = "stop (2)" value = "x" name = "col2">
<Entrada tipo = botón onClick = "stop (3)" value = "x" name = "col3">
</td>
<td valign = middle align = center>
<input type = button onClick = "begin ()" value = "start!"> <p>
<Tabla BGColor = FFFFF Border = 1 CellSpacing = 0>
<tr> <td align = center valign = middle> presione "x" y la rueda deja de girar ... <p>
Bg color = <input type = text size = 7 value = "#ffffff" name = color>
</td> </tr>
</table>
</td> </tr>
</table>
</form>
</Center>
<class de tabla = 30pt>
<tr> <td> Generación aleatoria de color
</tr> <tr> <td> presione el botón de inicio y las tres filas de ruedas en el comienzo derecho a rodar
</tr> <tr> <td> presione los tres botones X para establecer el valor de color
</tr> <tr> <td> presione el botón Vista previa para ver el efecto de color
</tr>
</table> <p>
</body>
</Html>
Espero que este artículo sea útil para la programación de JavaScript de todos.