var myCar = { //Définissons les propriéts de mon objet colorCar : "rouge", marqueCar : "Ford", modeleCar : "Fiesta", anneeConstCar : 2000, prixCar : 12000 }; document.getElementById("marqueCar").innerHTML = myCar.marqueCar; document.getElementById("colorCar").innerHTML = myCar.colorCar; document.getElementById("anneeConstCar").innerHTML = myCar.anneeConstCar; document.getElementById("prixCar").innerHTML = myCar.prixCar + "euros"; document.getElementById("modele").addEventListener("click",Aff); var moveBus = document.getElementById("modele"); moveBus.addEventListener("dblclick",move); // //Fonction Aff(Récupération de l'argument fond) function Aff(){ var ChoiceColor = document.getElementById("choixColor").value; if (ChoiceColor === "Bleu"){ document.getElementById("modele").style.backgroundColor = "blue"; } else { document.getElementById("modele").style.backgroundColor = "red"; } } function move(e){ var move = e.target; var pos = 0; var id = setInterval(frame,100) function frame(){ move.style.right = pos + '%'; move.style.transform.rotate = 'pos' + 'deg'; pos++; if (pos === 0) { clearInterval(id); } } }
<p class="ex">Exercice 3:</p> <h3>Gestion d'un objet</h3> <p>Le but étant d'utiliser les propriétes d'un objet dont le nom est <b>myCar</b></p> <p>Sinon pour le fun, vous pouvez sélectionner la couleur et peindre le bus, si vous double-cliquer sur le bus celui-ci avancera.</p> <form> <label>Couleur du modele</label> <select id="choixColor"> <option value="Bleu">Bleu</option> <option value="Rouge">Rouge</option> </select> <br> </form> <p>Ma voiture est une <span id="marqueCar"></span> de couleur <span id="colorCar"></span>, elle a été construite en <span id="anneeConstCar"></span> et elle coûte <span id="prixCar"></span>.</p> <br> <div id="Car"> <div id="modele"> <div id="pot"></div> <div id="fumee"></div> <div id="fumee1"></div> <div id="fumee2"></div> <div id="roueav"></div> <div id="rouear"></div> <div id="fenetre1"></div> <div id="fenetre2"></div> <div id="fenetre3"></div> </div> </div>
/* Gestion du TP 3 */ div#modele{ position:relative; width:200px; border-radius: 10px 10px 0 0; height:100px; margin: 0 auto; background-color: #CCC; min-height: 100px; cursor:copy; } div#fenetre1{ position:absolute; width:40px; height:40px; background-color: #FFF; top:20%; left:10%; } div#fenetre2{ position:absolute; width:40px; height:40px; background-color: #FFF; top:20%; left:38%; } div#fenetre3{ position:absolute; width:40px; height:40px; background-color: #FFF; top:20%; left:68%; } div#roueav{ position:absolute; width:40px; height:40px; background-color: #000; border:2px outset #FFF; border-radius: 50%; top:80%; left:10%; } div#rouear{ position:absolute; width:40px; height:40px; background-color: #000; border:2px outset #FFF; border-radius: 50%; top:80%; left:70%; } div#pot{ position:absolute; width:30px; height:14px; /*background-color: #ccc;*/ background: #bbb none repeat scroll 0 0; overflow: hidden; top:74%; left:90%; } #fumee{ position:absolute; width:14px; height:14px; background-color: #ccc; border-radius: 50%; top:74%; left:110%; } #fumee1{ position:absolute; width:18px; height:18px; background-color: #ccc; border-radius: 50%; top:72%; left:119%; } #fumee2{ position:absolute; width:23px; height:23px; background-color: #ccc; border-radius: 50%; top:70%; left:132%; }