[Résolu] Comment changer de div avec js

Question

Cristian4

8 Dec 2020 à 14:47

Bonjour,

Je dois faire un bandeau météo en html5 qui est composé de 2 div superposées un au dessus de l'autre. En cliquant sur la première div je dois afficher la deuxième. Je sais que ca doit être fais en js mais malheureusement je débute dans le développement et je ne connais pas trop ce langage.

Est-ce que quelque peut m'aider svp?

Alors j'ai utilisé ce script pour faire en sort que quand je clic il masque la div, mais maintenant j'ai besoin que la div masquée revienne au bout de 10 secondes.
J'ai essaié avec setTimeout() mais ca tourne en boucle, les div s'affiche chaqune 10 seconde et c'est pas ce que je veux, je veux juste que quand je clic la div disparesse et apres elle apparait c'est tout, pas de boucle.

function myFunction(){
  var x = document.getElementById("clic");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Voila mon code html


<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet">


<SCRIPT>
function HeureCheckEJS()
{
krucial = new Date;
heure = krucial.getHours();
min = krucial.getMinutes();
sec = krucial.getSeconds();
jour = krucial.getDate();
mois = krucial.getMonth();
annee = krucial.getFullYear();
if (sec < 10)
sec0 = "0";
else
sec0 = "";
if (min < 10)
min0 = "0";
else
min0 = "";
if (heure < 10)
heure0 = "0";
else
heure0 = "";
h = heure0 + heure;
m = min0 + min;
if (document.getElementById){
document.getElementById("ejs_heure_pa").innerHTML=h;
document.getElementById("ejs_heure_par").innerHTML=m;
}
setTimeout("HeureCheckEJS()", 1000)
}

window.onload = function(){ HeureCheckEJS(); };
</SCRIPT>
</head>

<body onload="HeureCheckEJS();">

<a href="#opus12">
<section id="clic">
<div id="click_ici">
<img id="img_clic" src="clic.svg">
<p id="p_clic">Cliquez ici pour visualiser les<br>prévisions météo des<br>prochaines heures</p>
</div>

<div id="date_heure">
<p id="hour"><span id="ejs_heure_pa"></span>:<span id="ejs_heure_par"></span></p>
<p id="date">'.$datefr.'</p>
</div>

<div id="div_forecast">
<p id="p_forcast">En ce moment à Paris,<br> '.$cond.'</p>
<img id="img_nuage" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icon_m.'.svg">
</div>

<div id="temperature">
<p id="p_temp">'.$temp_c.'<span id="span">°</span></p>
</div>
</section></a>

<section id="opus12">
<div class="div_noire">
<p id="h_pro">Ces prochaines heures à <br>La Défence</p>
<img id="icone_ch" src="chrono.svg">
</div>

<div class="div_bleu">
<p class="heure">'.$heure0.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone0.'.svg">
<p class="temp">'.$temp0.'°C</p>
</div>

<div class="div_noire">
<p class="heure">'.$heure1.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone1.'.svg">
<p class="temp">'.$temp1.'°C</p>
</div>

<div class="div_bleu">
<p class="heure">'.$heure2.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone2.'.svg">
<p class="temp">'.$temp2.'°C</p>
</div>

<div class="div_noire">
<p class="heure">'.$heure3.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone3.'.svg">
<p class="temp">'.$temp3.'°C</p>
</div>

<div class="div_bleu">
<p class="heure">'.$heure4.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone4.'.svg">
<p class="temp">'.$temp4.'°C</p>
</div>

<div class="div_noire">
<p class="heure">'.$heure5.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone5.'.svg">
<p class="temp">'.$temp5.'°C</p>
</div>

<div class="div_bleu">
<p class="heure">'.$heure6.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone6.'.svg">
<p class="temp">'.$temp6.'°C</p>
</div>

<div class="div_noire">
<p class="heure">'.$heure7.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone7.'.svg">
<p class="temp">'.$temp7.'°C</p>
</div>

<div class="div_bleu">
<p class="heure">'.$heure8.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone8.'.svg">
<p class="temp">'.$temp8.'°C</p>
</div>

<div class="div_noire">
<p class="heure">'.$heure9.'h</p>
<img class="icone" src="http://www.spotlook.fr/fr/client/meteo/spotouch/images/'.$icone9.'.svg">
<p class="temp">'.$temp9.'°C</p>
</div>
</section>
</body>
</html>

Et mon css

@font-face { font-family: "Marianina-Regular"; src: url('MarianinaFYW01-Regular.ttf');}

*{
    padding: 0;
    margin: 0;
}

#clic{
    background-color: #000;
    width: 1200px;
    height: 161px;
    display: flex;
    color: #fff;
    font-family: "Marianina-Regular";
    text-decoration: none;
}

a:link {
    text-decoration: none;
}


#click_ici{
    width: 250px;
    text-align: center;
}

#img_clic{
    padding-top: 30px;
}

#p_clic{
    font-family: "Marianina-Regular";
    vertical-align: middle;
}

#date_heure{
    display: flex;
    width: 650px;
    /* font-size: 40px; */
    text-align: center;
}

#hour{
    padding-left: 100px;
    padding-top: 58px;
    font-size: 45px;
}

#date{
    padding-left: 50px;
    padding-top: 62px;
    font-size: 40px;
}

#div_forecast{
    width: 200px;
    font-size: 15px;
}

#p_forcast{
    padding-top: 15px;
}

#img_nuage{
    width: 90px;
    height: 60px;
    padding-top: 10px;
    padding-left: 20px;
}

#temperature{
    text-align: center;
    font-size: 80px;
    width: 80px;
}

#p_temp{
    float: right;
    padding-top: 50px;
}



/* Section meteo */
#opus12{
    background-color: #000;
    width: 1200px;
    height: 161px;
    display: flex;
    color: #fff;
    text-align: center;
    /* margin-top: -161px; */
}

.div_noire{
    width: 110px;
    height: 161px;
    background-color: #000;
}

.div_bleu{
    width: 110px;
    height: 161px;
    background-color: #019EAB;
}

#h_pro{
    font-family: "Marianina-Regular";
    font-size: 20px;
    margin-top: 27px;
    line-height: 23px;
}

#icone_ch{
    padding-top: 17px;
}

.heure{
    font-family: "Marianina-Regular";
    font-size: 22px;
    margin-top: 15px;
}

.icone{
    width: 80px;
    height: 52px;
    padding-top: 18px;
}

.temp{
    font-family: "Marianina-Regular";
    font-size: 18px;
    padding-top: 12px;
}

Modifié par Cristian4 (08 Dec 2020 - 15:05)

_laurent

Modérateur

9 Dec 2020 à 01:08

Salut,

Voici un exemple vite fait avec setTimout (c'etait bien ça oui) :

var divred = document.getElementById("red");
divred.addEventListener("click", hideForTenSec);
  
function hideForTenSec() {
  divred.classList.add("hide");
  setTimeout(function(){
  	divred.classList.remove("hide");
  }, 10000);
}

https://jsfiddle.net/undless/9pauthgj/

L'idée ici c'est d'ajouter une classe au clic et de la supprimer après 10 secondes.
En faisant ainsi tu peux garder le style dans ton CSS et changer facilement les effets. Dans mon exemple j'ai utilisé opacity pour avoir une transition en fade mais tu peux faire ce que tu veux comme le faire slider vers n'importe quelle direction ou encore utiliser display:none (mais pas de transition possible).

Bonne soirée !

Cristian4

9 Dec 2020 à 10:20

Merci beaucoup _laurent, tu m'a sauvé.

Moi j'avais utilisé ce script, mais je pouvais pas faire de transition, avec le tien c'est mieux.


function myFunction() {
  var x = document.getElementById("clic");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
       x.style.display = "none";
      }
      setTimeout(function() {
         x.style.display = "block";
      }, 10000)
    }

J'ai une dernière question si je peux me permettre. J'ai créé une classe .hide avec la transition que je veux mais cette transition n'ai appliqué que au début quand j'ajout la classe avec js, quand il fait remove class il n'y a pas de transition. Aurais tu une idée de comment faire.

Merciii

_laurent

Modérateur

9 Dec 2020 à 10:38

Cristian4 a écrit :
J'ai une dernière question si je peux me permettre. J'ai créé une classe .hide avec la transition que je veux mais cette transition n'ai appliqué que au début quand j'ajout la classe avec js, quand il fait remove class il n'y a pas de transition. Aurais tu une idée de comment faire.

Je pense que tu as mis ta transition sur l'effet survolé et pas sur l'élément de base.

Regardes dans mon exemple la transition est définie sur l'objet, elle sera tout le temps la. Dans le hide il y a seulement la nouvelle valeur. Sinon au moment ou tu enlèves hide, ca enlève aussi la transition Smiley smile

.red {
  opacity:1;
  transition: opacity 500ms;
}
.hide {
  opacity:0;
}

Bonne journée Smiley smile

Cristian4

9 Dec 2020 à 10:45

Oui tout à fait j'avais mis sur hide, maintenant je viens de charger et ca fonctionne.
Merciii
Modifié par Cristian4 (09 Dec 2020 - 10:46)

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Comment changer de div avec js