11543 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Changer un Span avec getDay()

Bonjour tout le monde.

Étant pas exceptionnellement doué en JS je viens vous demander de l'aide.

Je suis sur un site pour un Restaurant et j'aurais par exemple:

<span id="Lundi" class="menu">Menu 1</span>
<span id="mardi" class="menu">Menu 2</span>
<span id="mercredi" class="menu">Menu 3</span>
etc...


Et le truc c'est que j'aimerais afficher le menu du jour avec l'élément getDay() (si possible biensur, comme dit je ne suis pas une lumière en JS).

Ou si il y a d'autre solutions que getDay() je suis tout ouïe.

J'imagine que ce serais quelques chose du genre:

.menu.hide();
et avec getDay() .show();

Mais je sais pas comment m'y prendre. Smiley decu

Donc si quelqu'un pourrait me mettre sur la voie ce serais bien sympa. Smiley lol
Modifié par gamenumi (08 Mar 2013 - 09:43)
Bonjour,

Donc, si j'ai bien compris, vous demandez un script JS qui afficherait automatiquement (et non suite à un clic) le menu en fonction de la date réelle (par exemple, aujourd'hui, nous sommes 'jeudi' et il faudrait afficher le menu du jeudi).
Est-ce bien ça?

Pourriez-vous aussi précisez comment vous comptez utiliser les spans de votre exemple?
Bonjour lddsoft,

C'est exactement ça.

Pour ce qui concerne les spans je pense d'abord faire un 
$("span.menu").hide() ;

Et après faire la condition si on est lundi 
$("#lundi").show();

Je vois ça comme ça.
Vous comptez utilisez jQuery?

Voici un petit script vite fait en javascript. Dites-moi si c'est ce que vous désirez:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Menu du jour</title>
    <style type="text/css">
	/*<![CDATA[*/
		.menu {
		    display:none;
		    border:1px solid red;
		    background: #fdfdfd;
		    width:300px;
		    margin:0 auto;
		    padding:15px;
		    font:normal 14px verdana,arial,helvetica,sans-serif;
		}
         /*]]>*/
    </style>
  </head>
  <body>
	<div class="menu" id="jour0">Ici vient le menu du dimanche,<br />car nous sommes dimanche.</div>
	<div class="menu" id="jour1">Ici vient le menu du lundi,<br />car nous sommes lundi.</div>
	<div class="menu" id="jour2">Ici vient le menu du mardi,<br />car nous sommes mardi.</div>
	<div class="menu" id="jour3">Ici vient le menu du mercredi,<br />car nous sommes mercredi.</div>
	<div class="menu" id="jour4">Ici vient le menu du jeudi,<br />car nous sommes jeudi.</div>
	<div class="menu" id="jour5">Ici vient le menu du vendredi,<br />car nous sommes vendredi.</div>
	<div class="menu" id="jour6">Ici vient le menu du samedi,<br />car nous sommes samedi.</div>

    <script type="text/javascript">
	//<![CDATA[
	// à placer juste avant < /body>
	var ladate = new Date();
	var jour = ladate.getDay();
	document.getElementById('jour'+jour).style.display='block';
	//]]>
   </script>

	</body>
</html>
C'est exactement ça merci beaucoup.

Mais néanmoins je ne saisi pas ce qui fait que le texte disparait et s'affiche.
C'est dû au display ?
Au départ, tous les divs de la classe .menu sont masqués par CSS (display:none;).
C'est le script js qui affiche le div (display="block";) en fonction du jour de la semaine.
Sujet clos
Aller à