Comment changer la couleur d'arrière-plan de manière aléatoire dans le HTML avec du JavaScript?
cette page web change le document d'information de couleur de façon aléatoire. j'ai de la difficulté à faire la même chose avec "#titre" ,mais la couleur reste la même.
s'il vous plaît aider
Merci
Code JavaScript:
function setbackground()
{
window.setTimeout( "setbackground()", 80); // milliseconds delay
var index = Math.round(Math.random() * 9);
var ColorValue = "FFFFFF"; //default color - white (index = 0)
if(index == 1)
ColorValue = "66FF33";
if(index == 2)
ColorValue = "FF0000";
if(index == 3)
ColorValue = "FF00FF";
if(index == 4)
ColorValue = "0000FF";
if(index == 5)
ColorValue = "00FFFF";
if(index == 6)
ColorValue = "FFFF00";
if(index == 7)
ColorValue = "CC66FF";
if(index == 8)
ColorValue = "3366FF";
if(index == 9)
ColorValue = "CCCCCC";
document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
}
function setbackgroundTitle()
{
window.setTimeout( "setbackgroundTitle()", 600); // milliseconds delay
var index = Math.round(Math.random() * 4);
var ColorValue = "FFFFFF"; //default color - white (index = 0)
if(index == 1)
ColorValue = "66FF33";
if(index == 2)
ColorValue = "FF0000";
if(index == 3)
ColorValue = "FF00FF";
if(index == 4)
ColorValue = "0000FF";
document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue;
}
Code CSS:
#title{
background-color:#11f22f;
height:300px;
width:400px;
margin:25px auto 0 auto;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
Code html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HomeWork</title>
<script type="text/javascript" src="crazy.js"> </script>
<link rel="stylesheet" type="text/css" href="HomeWork2.css" />
</head>
<body>
<body onload="setbackground();">
<div id="title" onload="setbackgroundTitle();"> hjhjhkj dfvdfsv dfgvkdfsk dfs</div>
</body>
</html>
Dans l'avenir, envisagez d'utiliser des fonctions anonymes, par opposition aux chaînes pour
code Général astuce: si vous en avez plusieurs, si ce type de déclarations, ils seront tous de s'exécuter à chaque fois, même si l'indice est de 1. L'utilisation d'une instruction switch à la place. Ou dans ce cas, une bien meilleure solution est de stocker toutes les valeurs de couleur dans un tableau, et l'utilisation myColorArray[index] pour obtenir votre valeur.
c'est la même chose que stackoverflow.com/questions/25455485/...
setTimeout
. setTimeout(function(){setbackgroundTitle()}, 600);
suffira.code Général astuce: si vous en avez plusieurs, si ce type de déclarations, ils seront tous de s'exécuter à chaque fois, même si l'indice est de 1. L'utilisation d'une instruction switch à la place. Ou dans ce cas, une bien meilleure solution est de stocker toutes les valeurs de couleur dans un tableau, et l'utilisation myColorArray[index] pour obtenir votre valeur.
c'est la même chose que stackoverflow.com/questions/25455485/...
OriginalL'auteur toky | 2012-03-24
Vous devez vous connecter pour publier un commentaire.
D'abord, copier coller d'erreur: au lieu
document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue;
il devrait y avoirdocument.getElementById("title").style.backgroundColor = "#" + ColorValue;
Selon que Comment faire un div en fonction onload? ne fonctionne pas.
J'ai mis tout à setbackground() et ça marche 😉
OriginalL'auteur godlark
essayez donc:
OriginalL'auteur Ildar
Si c'est les devoirs, veuillez marquer votre question comme devoirs.
D'autre, jQuery serait faire de votre vie aussi simple que:
ou
Non balisé jQuery ne signifie pas que je ne devrait pas suggérer une solution simple à une question. À compter d'aujourd'hui, je ne vois pas l'intérêt d'utiliser Javascript dans 95% des cas (les devoirs sont une raison valable si, pour apprendre la langue 🙂
Les gars dans le jQuery Projet n'AURAIT certainement voir le point. Chill out homme.
OriginalL'auteur Vincent Mimoun-Prat
Le problème peut être que le DOM n'était pas chargée lorsque le script a été en cours d'exécution.
Correcte de votre fonction, vous êtes en supposant que la sortie de
document.getElementById("title")
comme un tableau, mais ses pas.Et de l'appeler sur l'événement onload, pour assurer le DOM est chargé correctement lorsque le script s'exécute
OriginalL'auteur Starx