problème de JS dans une page HTML

Sujet résolu

28 avril 2009 à 9:49:37

Bonjour, je suis en train de faire un exercice où je suis censé simuler le mouvement de trois balles de jonglage à partir de trois <div>. J'ai beau essayer, mes fonctions JS m'ont l'air correct, mais je ne comprends pas. voilà le code :

<head>
	<title> Jonglerie </title>
	<style type="text/css">
		#balle1{position: absolute;
				left: 0px;
				top: 0px;
				color: red;}
		
		#balle2{position: absolute;
				left: 0px;
				top: 0px;
				color: green;}
				
		#balle3{position: absolute;
				left: 0px;
				top: 0px;
				color: yellow;}
				
	</style>
	
	<script type="text/javascript">

	
	function placeboite(laboite,x,y)		// replace une boite en fonction de ses coordonnées
			{
			laboite.style.left=x;
			laboite.style.top=y			// document.getElementById("balle1,2 ou 3")
			}
			 
	function deplaceboites(t)				// en fonction de t (angle), fait bouger les trois boites
			{
			placeboite(document.getElementById("balle1"), 		// balle1
			200+100*Math.cos(t*Math.PI/180),
			200+150*Math.sin(2*t*Math.PI/180));
			
			placeboite(document.getElementById("balle2"), 		// balle2
			200+100*Math.cos((t+120)*Math.PI/180),
			200+150*Math.sin(2*(t+120)*Math.PI/180));
			
			placeboite(document.getElementById("balle3"), 		// balle3
			200+100*Math.cos((t+240)*Math.PI/180),
			200+150*Math.sin(2*(t+240)*Math.PI/180));
			
			setTimeout															// A COMPLETER!!!

			}
			
	</script>
	
</head>
	
	<body onload="deplaceboites(0)">
	
		<div id="balle1"> O </div>
		<div id="balle2"> O </div>
		<div id="balle3"> O </div>
		
	</body>
	
</html>

Il y a un setTimeout à compléter pour t+1 mais je ne sais pas le faire, et de plus j'aimerai que mon code fonctionne...

birdy42

28 avril 2009 à 10:08:52

Le setInterval ne serait pas plus approprié ? enfin faudrait demander aux experts... j'ai testé ça :

<html>
<head>
	<title> Jonglerie </title>
	<style type="text/css">
		#balle1{position: absolute;
				left: 0px;
				top: 0px;
				color: red;}
		
		#balle2{position: absolute;
				left: 0px;
				top: 0px;
				color: green;}
				
		#balle3{position: absolute;
				left: 0px;
				top: 0px;
				color: blue;}
				
	</style>
	
	<script type="text/javascript">
var t=0; 
	
	function placeboite(laboite,x,y){		// replace une boite en fonction de ses coordonnées
		laboite.style.left=x;
		laboite.style.top=y			// document.getElementById("balle1,2 ou 3")
	}
			
	function deplaceboites(){			// en fonction de t (angle), fait bouger les trois boites
		t++;
		placeboite(document.getElementById("balle1"), 		// balle1
		200+100*Math.cos(t*Math.PI/180),
		200+150*Math.sin(2*t*Math.PI/180));
		
		placeboite(document.getElementById("balle2"), 		// balle2
		200+100*Math.cos((t+120)*Math.PI/180),
		200+150*Math.sin(2*(t+120)*Math.PI/180));
		
		placeboite(document.getElementById("balle3"), 		// balle3
		200+100*Math.cos((t+240)*Math.PI/180),
		200+150*Math.sin(2*(t+240)*Math.PI/180));
			
																		// A COMPLETER!!!

	}
		
	window.onload=function(){
		setInterval(deplaceboites, 10);
		
	}
	
			
	</script>
	
</head>
	
	<body>
	
		<div id="balle1"> O </div>
		<div id="balle2"> O </div>
		<div id="balle3"> O </div>
		
	</body>
	
</html>

EDIT: et résultat visible ici

D'oh

28 avril 2009 à 10:12:51

ok peut-être, mais chez moi les boites ne bougent pas, et avec ton code non plus, je ne vois rien bouger...

HELP please!!!!

birdy42

28 avril 2009 à 10:17:25

Sur ma page de résultat pas visible non plus ? o_O

Tu utilises quel navigateur ? (j'ai juste testé avec Firefox 3)
EDIT: testé avec IE7 marche aussi

D'oh

28 avril 2009 à 10:20:42

excuse moi si si ça marche! par contre dans ma balise <html> j'avais tout les infos du genre :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

et là ca marchait pas... mais maintenant si je mets seulement <html> ca fonctionne! donc merci beaucoup du coup de main!!!

birdy42

28 avril 2009 à 10:26:06

Attention... je crois que c'est juste la première ligne qui embête

<?xml version="1.0" encoding="utf-8"?>

En fait, cette ligne est utilisée pour les documents xml et non xHTML.
le doctype et la balise HTML avec les infos sont indispensables pour la validité de ton site web (ou du moine l'attribut xmlns)
edit: c'est le doctype qui semble embêter mais je comprends pas pourquoi :/

Golmote

28 avril 2009 à 10:52:21

Prends un DOCTYPE moins strict. Genre celui du HTML 4.1, et ça devrait fonctionner.