Sujet Précédent Sujet Suivant

Comment changer de div avec js

Fermé
Julien - 2 déc. 2020 à 15:45
jordane45 Messages postés 38242 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 octobre 2024 - 8 déc. 2020 à 13:29
Bonjour,

Je dois faire un bandeau météo en html5 qui est composé de 2 section superposées un au dessus de l'autre. En cliquant sur la première section je dois afficher la deuxième. Je sais que ca doit etre 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?


Voila le 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 le 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;
}
A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38242 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 octobre 2024 4 689
2 déc. 2020 à 16:08
Bonjour,

Commence par nous poster ton code correctement en utilisant les balises de code
Explications ( à lire ENTIEREMENT ) disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Jette un oeil également à cette page qui devrait te donner un bon début pour ton code
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp


0
Réponse 2 / 4
Julien
7 déc. 2020 à 09:47
Voila mon code. J'espère que ca l'affiche bien avec les balises 

<!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>



@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;
}
0
jordane45 Messages postés 38242 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 octobre 2024 4 689
7 déc. 2020 à 10:00
Bonjour,

Il serait bien d'indenter ton code html et js ... ça le rendrait beaucoup plus lisible.

Ensuite, ben.. je ne vois pas ce que tu as essayé de faire pour traiter ton besoin ?
Je t'ai donné un lien... as tu pris le temps d'aller le voir avant de revenir ici ?

Juste au cas où, je préfère te prévenir ... Je me ferai un plaisir de t'aider à corriger ton code ... mais en aucun cas je ne le ferai pour toi ... Donc montre nous ce que tu as essayé de faire ....
0
Réponse 3 / 4
Julien
8 déc. 2020 à 11:23
Bonjour Jordane45, oui je vu le lien que tu ma donné.

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.

Merci pour le lien 

function myFunction(){
  var x = document.getElementById("clic");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
0
jordane45 Messages postés 38242 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 octobre 2024 4 689
8 déc. 2020 à 12:03
Pour ton besoin, il faudrait découper ce code en deux
Une fonction pour afficher .. et une fonction pour masquer.
Et Dans la fonction "masquer" tu places ton setTimeOut pour réafficher au bout de 10 secondes
0
Réponse 4 / 4
Julien
8 déc. 2020 à 12:33
Merci, mais est-ce que tu peux m'expliquer un peut plus parce que je connais pas trop comment ca marche javascript
0
jordane45 Messages postés 38242 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 octobre 2024 4 689
8 déc. 2020 à 13:29
Il n'y a que 8 lignes de code dans la fonction que tu nous montres...
Je pense qu'il n'est pas trop compliqué de comprendre comment elle fonctionne...
Dis-moi si tu parles un minimum anglais (ce qui est fortement recommandé quand on apprend à coder)
Commence déjà par essayer de comprendre ce code ça sera un bon début pour la suite de ce que tu veux faire.
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Mettre Facebook Messenger en français
bleumarine2009 -
lauredine61 -

1 réponse
code couleur associé a une image
magic charly -
pandora -

9 réponses