AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    - JS - Afficher un texte différent en fonction de l'heure.

    Cheshire Cat
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Dim 24 Juin 2018 - 0:33

    Bonjour, bonsoir !

    Je sollicite à nouveau votre aide (pour ma pomme cette fois) pour du JavaScript

    En effet, je souhaiterai que ma barre de navigation affiche un texte en fonction de l'heure : Bonjour et Bonsoir

    J'aimerai également que cela prenne en compte le décalage horaire (pour que nos amis du québec ne froncent pas les sourcils).

    Rien de très sorcier, me direz vous, mais j'avoue qu'en cherchant un peu sur le net je ne trouve pas d'aide vraiment utile ou compréhensible pour mon niveau en JavaScript.

    Voilà, j'espère que vous pourrez m'aider à ce sujet.

    Merci d'avance !


    Dernière édition par Cheshire Cat le Mer 24 Oct 2018 - 13:03, édité 1 fois
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5089

    le Dim 24 Juin 2018 - 12:10

    Coucou Chesh :)

    La bonne nouvelle c'est qu'en javascript quand tu récupères l'heure c'est directement celle du système donc le décalage horaire est pris en compte ♥︎

    MDN a écrit:Si vous ne fournissez pas d'arguments, le constructeur crée un objet Date pour la date du jour et l'heure selon l'heure locale du système.
    Source: MDN Web Docs - Date

    On va voir ensemble comment écrire ton texte, mais on pourrait très bien imaginer quelque chose de différent, par exemple en fonction de l'heure ça rajoute une classe CSS sur le body (day / night). Ensuite dans ton CSS ton stylise ton forum avec des couleurs différentes selon l'heure \ o /. Mais bon je m'égare.

    Petite question, est ce que tu vois comment écrire en JS le texte dans ta barre de navigation ou pas vraiment ? Si oui, est ce que tu peux nous fournir le code que tu utilises pour ça s'il te plait ?



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Cheshire Cat
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Dim 24 Juin 2018 - 18:35

    Coucou Ninou :face:

    Ah, je ne savais pas. J'avoue qu'en cherchant sur le net, mes critères de recherche ne m'ont pas du tout mené à MDN et je n'ai pas eu le réflexe d'aller directement dessus o/ Honte à moi ! Au moins j'aurai appris quelque chose de pas trop compliqué :toto:

    En vrai on pourrait faire ça, changer l'affichage du forum selon l'heure, mais c'est pas le but recherché. Mais ça m'intéresse juste pour m'amuser avec <:

    Je te donne les codes du coup, les voilà !

    Code:
    <div id="page-body">
                     
                              <div id="navbarr">
                               
                                <div id="bloc_nav">
                                  <div id="bonjour">
                                    Bienvenue<br />
                                    <span class="js-username"></span>
                                   
                                   <ul id="navbarr_links">                                 
                                         <!-- BEGIN switch_user_logged_out -->
                                         <li><a href="/register">Inscris-toi !</a><div></div></li>
                                         <li><a href="/login">Connexion</a></li>
                                         <!-- END switch_user_logged_out -->
                                     
                                         <!-- BEGIN switch_user_logged_in -->
                                         <li><a href="/profile?mode=editprofile">Profil</a><div></div></li>
                                         <li><a href="/privmsg?folder=inbox">Messagerie</a><div></div></li>
                                         <li><a href="/logout">Déconnexion</a></li>
                                         <!-- END switch_user_logged_in -->
                                    </ul>
                                  </div>
                                 
                                  <div class="js-avatar"></div>
                                </div>

                                <script type="text/javascript">
                                     $(function(){
                                        $.each(_userdata, function(key, value){
                                           $(".js-" + key).html(value);
                                        })
                                     });
                                </script>
                               
                                <div><a id="cRetour" class="cInvisible" href="#haut"></a></div>
                               
                                <div><a id="cRetourBas" class="cInvisible" href="#bas"></a></div>

                              </div>

    Code:
    /* BARRE LATERALE A DROITE */
    #navbarr{
      position:-webkit-sticky;
      requiredforsafariposition:sticky;
      position:sticky;
      float:right;
      top:0;
      width:240px;
      height:900px;
      padding:10px;
      background-color:#bdaaa2;
    }
    #bloc_nav{
      display:flex;
      justify-content:space-around;
    }
    #bonjour{
      width:126px;
      padding-top:3px;
      text-align:center;
      font-family:'Quicksand', sans-serif;
      font-size:25px;
      letter-spacing:-1px;
      line-height:23px;
    }
    .js-username{
      font-size:1.23rem;
      font-weight:bold;
      font-style:italic;
      letter-spacing:-0.5px;
    }
    #navbarr_links {
      margin-top:5px;
    }
    #navbarr_links li a{
      display:block;
      background-color:#7a716c;
      box-shadow:0 0 3px rgba(78,75,73,0.3);
      font-size:16px;
      color:#dad0cf;
    }
    #navbarr_links li div{
      width:80%;
      margin:9px auto;
      border-top:1px solid #eee;
    }
    #navbarr_links li:last-of-type a{
      background-color:#dad0cf;
      color:#7a716c;
    }
    .js-avatar{
      width:80px;
      height:160px;
      margin-left:10px;
      box-shadow:0px 0px 4px rgba(78, 75, 73, 0.8);
    }
    .js-avatar img{
      width:100%;
    }

    Je risque d'ailleurs d'avoir quelques problèmes avec cette histoire de barre de navigation en position sticky mais bon o/ (je verrai ça quand j'aurai accumulé les problèmes et que ça me soûlera)
    Cheshire Cat
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Dim 1 Juil 2018 - 15:00

    Petit up

    J'ai édité les codes sur mon message précédent, ayant modifié le design de la barre latérale.
    avatar
    Pinke
    FémininAge : 25Messages : 141

    le Mer 25 Juil 2018 - 8:04

    Coucou ! Je ne sais pas trop si cela pourra t'aider, mais en traînant dans les astuces du forum des forumactifs espagnol, je suis tombée sur ceci :hum:
    Cheshire Cat
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Dim 29 Juil 2018 - 15:54

    Coucou !

    Merci je vais regarder ça n_n
    Cheshire Cat
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Mer 24 Oct 2018 - 13:03

    Je mets en pause pour le moment, je n'ai pas trop le temps de m'en occuper :v
    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Lun 11 Mar 2019 - 8:16

    Salut!

    Je ne sais pas si tu avais vu que ce LS existe, mais bien que la première partie soit pour la bannière, la dernière partie est pour n'importe quel élément alors c'est facile à utiliser.



    Contenu sponsorisé


      La date/heure actuelle est Dim 21 Juil 2019 - 2:01