Aller au contenu. | Aller à la navigation

Outils personnels

Navigation

S1-2012 Sapin de Noël

Le correctif du premier programme proposé dans la S1

HTML icon s1Sapin.html — HTML, 1 ko (1690 bytes)

Contenu du fichier

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="author" content="Bertrand Emery" />
	<title>Sapin de Noël</title>
	<style>
		h1 {text-align:center;}
		svg {display:block; margin:auto;}
	</style>
</head>
<body>
	<h1>Sapin de Noël</h1>
	<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" >
		<polygon points="50,1 75,25 60,30 85,50 65,60 95,75 50,85 5,75 35,60 15,50 40,30 25,25" fill="green" stroke="black" />
		<rect x="45" y="80" width="10" height="19" fill="brown" stroke="black" />
		<circle cx="30" cy="60" r="5" fill="red" stroke="black" />
		<circle cx="70" cy="50" r="5" fill="red" stroke="black" />
		<circle cx="40" cy="40" r="5" fill="red" stroke="black" />
		<circle cx="55" cy="35" r="5" fill="red" stroke="black" />
		<circle cx="55" cy="70" r="5" fill="red" stroke="black" />
		<circle cx="45" cy="20" r="5" fill="red" stroke="black" />
	</svg>
	<audio src="jinglebells.mp3" autoplay loop />
	<script type="text/javascript">
		var boules=document.getElementsByTagName("circle"); // on récupère les cercles dans un tableau JS
		var z=0, couleurs=new Array(); // on crée une variable de valeur et un tableau pour les couleurs
		couleurs=['blue','red','yellow','purple','grey','lightblue','gold']; // on définit différentes couleurs
		
		function changColor(){ // change la couleur des circles
			for (var i=0; i<boules.length; i++) {
				boules[i].style.fill=couleurs[z];
			}
			z++;
			if (z==couleurs.length) {z=0;} // incrémente z sauf si celui-ci a atteint la valeur maximale.
		}
		
		setInterval("changColor()", 5000); // lance la minuterie	
	</script>

</body>
</html>