Modifier l'arrière-plan de couleur entre le rouge et le vert à chaque seconde
Je suis en train de faire une page web changer la couleur de fond de chaque seconde à l'aide de JavaScript.
Je suis en utilisant setTimeout
mais je ne peux pas comprendre comment obtenir ma variable à modifier dans la fonction. Voici mon code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function changecolors() {
x = 1; //<-- I know this is wrong, I just don't know where to place it
var t = setTimeout("change()", 1000);
}
function change() {
while(x < 3) {
if(x = 1) {
color = "red";
x++;
} else if (x = 2) {
color = "green";
x = 1;
}
document.body.style.background = color;
}
}
</head>
<body onload="changecolors()">
</body>
</html>
ramener blink! 😛
est modifier() censé appeler changecolors() pour l'installation de l'appel suivant de nouveau, ou est-il appelé à partir d'un autre endroit?? sinon sa n'arrive qu'une fois
Il ya tout à fait quelques choses de mal dans votre code: (a) les variables de fuite dans la portée globale. (b) Vous avez une boucle infinie (
Ce n'est pas le code, c'est juste une mok jusqu'j'ai fait pour montrer ce que j'essayais de faire.
merci beaucoup pour cette réponse! Fait monter!
est modifier() censé appeler changecolors() pour l'installation de l'appel suivant de nouveau, ou est-il appelé à partir d'un autre endroit?? sinon sa n'arrive qu'une fois
Il ya tout à fait quelques choses de mal dans votre code: (a) les variables de fuite dans la portée globale. (b) Vous avez une boucle infinie (
x
sera toujours inférieur 3
). (c) l'affectation au lieu de comparer. (d) Vous appelez la fonction après une seconde, pas toutes les secondes.Ce n'est pas le code, c'est juste une mok jusqu'j'ai fait pour montrer ce que j'essayais de faire.
merci beaucoup pour cette réponse! Fait monter!
OriginalL'auteur Justin Yoder | 2011-11-23
Vous devez vous connecter pour publier un commentaire.
Il y a plusieurs problèmes ici. Je vais juste corriger votre code:
Essentiellement...
setInterval
au lieu desetTimeout
.setTimeout
n'exécute qu'une seule fois.=
ayants droit, même dans unif
déclaration. Vous avez besoin==
(ou mieux,===
).setTimeout
ousetInterval
. Au lieu de cela, passer une fonction.Un autre point à noter: vous ne devriez pas utiliser la
on*
attributs des éléments HTML pour écouteurs d'événement, mais surtout pas sur<body>
, puisque vous pouvez le faire en JavaScript au lieu de cela, et être discret:Bien sûr, vous pourriez le faire avec moins de fonctions et pas de pollution de l'espace de noms global.
Ce n'est pas qu'ils ont tort, mais dans les gros projets, il est généralement beaucoup plus facile à comprendre lorsque tous les fichiers JavaScript, CSS et HTML sont séparés. Lorsque vous mélangez le JavaScript et le HTML comme ça, il peut devenir source de confusion. Bien sûr, si vous testez, n'ont accès qu'à un seul fichier, ou sont en train de faire un petit projet personnel, c'est pas trop mal.
Je vous remercie beaucoup. Vous avez été très directement à l'essentiel et explique pourquoi vous avez changé les choses que vous avez fait. Très instructif.
OriginalL'auteur Ry-
Clin violon:
http://jsfiddle.net/GolezTrol/R4c5P/1/
Utilise cette fonction:
Utilise fermeture de conserver l'état de la portée globale. Utilise setInterval au lieu de setTimeout répétés d'appel, bien que cela puisse ne pas être pratique. Les deux setInterval et setTimeout retour d'une poignée, vous pouvez l'enregistrer et l'utiliser pour arrêter le minuteur, si vous voulez, mais puisque vous ne demandez pas à ce sujet, je l'ai laissée pour des raisons de simplicité.
La fonction définit un anonyme de rappel qui permet de basculer d'un booléen et définit la couleur d'un test div.
OriginalL'auteur GolezTrol
Aussi, pensez à le faire avec les CSS. Démo.
OriginalL'auteur bookcasey
Si vous pensez que le navigateur à prendre en charge les animations CSS, vous pouvez donc quelque chose de plus intéressant et peut-être moins ennuyeux.
Définir dans votre feuille de style:
Et vous avez terminé, sans JavaScript.
Malheureusement, les animations CSS ne sont pas standard, de sorte que ceux de la charnière sur les préfixes, donc j'ai dû répéter pour
-moz-
et-webkit-
. Il ne fonctionne pas sur Opera et IE, pour l'instant.Merci man, il convient de souligner.
OriginalL'auteur MaxArt
x = 1;
attribuex
une valeur de 1, même dans unif
déclaration. Utilisationx == 1
dansif
états de conserver la valeur de votre variable inchangé.OriginalL'auteur Matt
Je conseillerais de ne pas le faire, car il peut être assez ennuyeux, mais cela devrait fonctionner:
Et puis dans le corps:
PS: Désolé si je ne suis pas répondre à la question de droit...ce code permet de changer l'arrière-plan de bleu à vert chaque seconde à plusieurs reprises pour une quantité infinie de temps. (Ce que je veux dire, c'est que j'ai un peu refait votre code plutôt que d'expliquer ce qui n'allait pas avec la vôtre...)
OriginalL'auteur JCOC611
Pour une chose, c':
Devrait être ceci:
Votre déclaration ensembles de x à 1, plutôt que la teste pour voir si elle est 1.
OriginalL'auteur dnuttle
Vous devriez vraiment lire quelques notions de JavaScript tutoriel ou un livre. Je suis également nouveau sur le JavaScript, mais un peu de lecture a aidé. Ici http://www.w3schools.com/js/ vous pouvez trouver quelques bonnes choses comme référence.
Cela devrait faire l'affaire
Si vous allez manipuler le DOM beaucoup je recommande JQuery
OriginalL'auteur Esteban Angee
Votre code est absent de la clôture
</script>
tag et d'autres questions mentionnées ci-dessus.Trouverez ci-dessous un correctif de votre code qui supprime la variable globale.
OriginalL'auteur scartag
J'ai créé cette fonction appelée toggle_colour pour le même but.
Maintenant, vous pouvez simplement copier le code ci-dessus et appeler la fonction avec deux codes de couleur. Comme,
Vous pouvez vérifier la démo complète et la plus avancée de la bascule de couleur fonctions dans l'article, Changer la couleur de fond de toutes les X secondes en Javascript
Disclaimer: je suis l'auteur de ce tutoriel article.
OriginalL'auteur Narendran Parivallal