Skip to content

Instantly share code, notes, and snippets.

@florian583

florian583/exo.html

Created November 5, 2015 22:45
Show Gist options
  • Save florian583/4a63a56cb5b179f92072 to your computer and use it in GitHub Desktop.
Save florian583/4a63a56cb5b179f92072 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
exo.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<style type="text/css">
span {
width: 10%;
margin-left: 7.7%;
display: inline-block;
text-align: center;
padding-top: 3.5%;
padding-bottom: 3.5%;
margin-bottom: 0;
position: absolute;
}
#span1 {
background-color: red;
margin-left: 7.7%;
}
#span2 {
background-color: blue;
margin-left: 24.4%;
}
#span3 {
background-color: yellow;
margin-left: 42.1%;
}
#span4 {
background-color: magenta;
margin-left: 59.8%;
}
#span5 {
background-color: green;
margin-left: 77.5%;
}
.up {
margin-left: 43.8% !important;
}
.down {
margin-top: 16.5%;
margin-left: 43.8% !important;
}
.right {
margin-top: 8.2%;
margin-left: 53.8% !important;
}
.left {
margin-top: 8.2%;
margin-left: 33.8% !important;
}
.middle {
margin-top: 8.2%;
margin-left: 43.8% !important;
}
</style>
<script>
window.onload = function() {
var spans = document.getElementsByTagName("span"); // Récupère toutes les spans du document
for (var each in spans) { // Pour chaque span
if(!isNaN(each)) { // Test afin d'éviter que each prennent des valeurs autre que des nombres
spans[each].addEventListener('mouseover',RandomNumber); // Change le nombre de la span quand la souris passe dessus
spans[each].addEventListener('mouseout',RandomColor); // change la couleur de fond quand la souris quitte la span
spans[each].addEventListener('click',moveIntoCross); // alors on ajoute l'évènement change la position des span si on clique dessus
}
}
function moveIntoCross () {
console.log(event.target.id);
var span = event.target.id;
if (span == "span1") { // Span1 Positionné à gauche de la 4
document.getElementById(span).className = "middle";
document.getElementById("span2").className = "left";
document.getElementById("span3").className = "right";
document.getElementById("span4").className = "up";
document.getElementById("span5").className = "down";
}
if (span == "span2") { // Span2 positionné à la drotie de la 4
document.getElementById("span1").className = "left";
document.getElementById(span).className = "middle";
document.getElementById("span3").className = "right";
document.getElementById("span4").className = "up";
document.getElementById("span5").className = "down";
}
if (span == "span3") { // Span3 ne bouge pas en position
document.getElementById("span1").className = "right";
document.getElementById("span2").className = "left";
document.getElementById(span).className = "middle";
document.getElementById("span4").className = "up";
document.getElementById("span5").className = "down";
}
if (span == "span4") { // Span4 passe dessous la 3 et devient le centre de la croix
document.getElementById("span1").className = "up";
document.getElementById("span2").className = "left";
document.getElementById("span3").className = "right";
document.getElementById(span).className = "middle";
document.getElementById("span5").className = "down";
}
if (span == "span5") { // Span5 va dessous la 4
document.getElementById("span1").className = "down";
document.getElementById("span2").className = "left";
document.getElementById("span3").className = "right";
document.getElementById("span4").className = "up";
document.getElementById(span).className = "middle";
}
}
function RandomNumber() { // Ecrit le nombre aléatoire dans la span
event.target.innerHTML = GenerateRandomNumber();
}
function GenerateRandomNumber() {
return Math.floor((Math.random()*255) +1); // Génère un nombre entre 1 et 255
}
function GenerateRandomColor() {
return "hsla(" + Math.floor((((Math.random()*360) +1)*1.618033988749895)) + ",50%,50%,1)";
// Couleur générée utilisant le "Golden Ration"
}
function RandomColor() { // Change la couleur de fond de la span
event.target.style.backgroundColor = GenerateRandomColor();
}
}
</script>
</head>
<body>
<span id="span1">1</span>
<span id="span2">2</span>
<span id="span3">3</span>
<span id="span4">4</span>
<span id="span5">5</span>
</body>
</html>
<!-- Exo nombre aleatoire -->
<html>
<head>
<title>Javascript</title>
</head>
<body>
<script type="text/javascript">
aide = document.createElement("div");
aide.setAttribute("id", "aide");
document.body.appendChild(aide);
aide.innerHTML += "<p>Aides :</p>"
propositions = document.createElement("div");
propositions.setAttribute("id", "propositions");
document.body.appendChild(propositions);
propositions.innerHTML += "<p>Propositions :</p>"
resultat = document.createElement("div");
resultat.setAttribute("id", "resultat");
document.body.appendChild(resultat);
resultat.innerHTML += "<p>Resultats :</p>"
alert("Appuyez sur Entrez ou Ok pour debuter");
var random = Math.floor(Math.random() * (20 - 1 + 1)) + 1;
var i=1;
alert(random);
var firstproposition = false;
do {
var proposition = prompt("Entrez votrez proposition");
} while (isNaN(proposition));
document.getElementById('propositions').innerHTML += "Proposition "+i+" : "+proposition+"</br>";
if (proposition == random) {
document.getElementById('resultat').innerHTML += "Bravo vous avez trouve le nombre en 1 coup.</br>";
} else {
do {
var i = i+1;
if (proposition > random) {
document.getElementById('aide').innerHTML += "C'est moins que : "+proposition+"</br>";
do {
var proposition = prompt("C'est moins :");
} while (isNaN(proposition));
document.getElementById('propositions').innerHTML += "Proposition "+i+" : "+proposition+"</br>";
} else {
document.getElementById('aide').innerHTML += "C'est plus que : "+proposition+"</br>";
do {
var proposition = prompt("C'est plus :");
} while (isNaN(proposition));
document.getElementById('propositions').innerHTML += "Proposition "+i+" : "+proposition+"</br>";
}
} while (proposition != random && i < 5);
if (proposition == random && firstproposition == false) {
document.getElementById('resultat').innerHTML += "Bravo vous avez trouve le nombre "+random+" en "+i+" coups.</br>";
} else {
document.getElementById('resultat').innerHTML += "Dommage vous avez perdu le nombre etait : "+random;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment