IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[Débutant] Mettre plusieurs horloges avec Javascript


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de Adakhum
    Homme Profil pro
    Ingénieur Mécanique Numérique
    Inscrit en
    Mars 2014
    Messages
    125
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur Mécanique Numérique

    Informations forums :
    Inscription : Mars 2014
    Messages : 125
    Par défaut [Débutant] Mettre plusieurs horloges avec Javascript
    Bonjour,

    je suis navré par avance de la naïveté de ma question.
    Peut-on mettre plusieurs horloges faites en JS sur une même page ?

    Je me doute de la réponse mais si je me la pose c'est à cause d'un étrange comportement de mon site...

    Lorsque je met ce code dans un gadget html/JS (qui fonctionne !) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <script type="text/javascript">
     
    function Jour(){this[0] = "Dimanche";this[1] = "Lundi";this[2] = "Mardi";this[3] = "Mercredi";this[4] = "Jeudi";this[5] = "Vendredi";this[6] = "Samedi";}
     
    function Mois(){this[0] = "janvier";this[1] = "février";this[2] = "mars";this[3] = "avril";this[4] = "mai";this[5] = "juin";this[6] = "juillet"; this[7] = "août";this[8] = "septembre"; this[9] = "octobre";this[10] = "novembre"; this[11] = "décembre";}
     
    function date(){var jour=new Jour();var mois=new Mois();
     
    var myDate=new Date();
    annee = myDate.getFullYear();
    var result=jour[myDate.getDay()]+" "+myDate.getDate()+" "+mois[myDate.getMonth()]+" "+annee+" -&nbsp;";
     
    document.writeln(result);}
     
    </script>
     
    <div style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
     
    <script language="JavaScript" type="text/JavaScript">
    date();
    </script></div>
     
    <div id="aff_heure2" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
     
    <script type="text/javascript">
     
    function test_heure2(){var mydate = new Date();
     
    var heure = mydate.getHours();
    var minute = mydate.getMinutes();
     
    if (heure <= 9) heure = "0" + heure;
    if (minute <= 9) minute = "0" + minute;
     
    document.getElementById("aff_heure2").innerHTML = heure+":"+minute;}
     
    function aff_heure2(){intervalId = setInterval(test_heure2, 1000);}
     
    aff_heure2()
     
    </script></div>
    et que je rajoute celui-ci dans un autre gadget (qui fonctionne!) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div id="aff_heure" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
     
    <script type='text/javascript'>
     
    function test_heure(){var mydate = new Date();
     
    var year = mydate.getFullYear();
    var day = mydate.getDay();
    var daym = mydate.getDate();
    var mois = mydate.getMonth(); 
    mois=mois+1;
     
    var heures = mydate.getHours();
    var minutes = mydate.getMinutes();
     
    if (heures <= 9) heures = "0" + heures;
     
    if (minutes <= 9) minutes = "0" + minutes;
     
    document.getElementById("aff_heure").innerHTML =" " France "+daym+"."+mois+"."+year+" - "+heures+":"+minutes;}
     
    function aff_heure(){intervalId = setInterval(test_heure, 1000);}
     
    aff_heure()
     
    </script></div>

    ... Là, ça ne fonctionne plus. Les deux marchent séparément, mais pas en même temps. Pourquoi ? Et comment résoudre le problème ?

    Je me dit qu'il ne gère peut être pas plusieurs appel de "new Date();" mais pourtant j'ai un 3ème compteur qui lui marche très bien avec un des deux autres ?
    Bref, j'y comprend rien et je suis très nul en JS (ce n'est pas moi qui est fait ces lignes), j'aurais besoin d'un petit coup de main ... Au cas où, mon site : http://lenormanditinerant.blogspot.fr/

    D'avance merci.


    EDIT: Et je viens de m'apercevoir que si je met deux fois le 1er code dans 2 gadgets différents, les dates s'affiche (dimanche 22 novembre) mais pas l'heure. :o ?

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour,
    ton questionnement est proche de celui de cette discussion : Affichage depuis heure système différents horaires en fonction des décalages.

  3. #3
    Membre confirmé Avatar de Adakhum
    Homme Profil pro
    Ingénieur Mécanique Numérique
    Inscrit en
    Mars 2014
    Messages
    125
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur Mécanique Numérique

    Informations forums :
    Inscription : Mars 2014
    Messages : 125
    Par défaut
    C'est gentil je n'avaispas vu ce topic.

    Néanmoisn ce n'est pas tant le code en lui même qui merde, mais plutôt une sorte de bug qui fait que quand je met un code (pour avoir l'heure ou la date ou les deux) dans un gadget et le même ou presque dans un autre gadget, l'un des deux ne s'affiche pas ...

    Alors en utilisant des codes complètement différents (surtout avec des variables différentes) ça marche, mais du coup je n'ai pas le même format et je n'arrive pas à afficher la même chose parce que je suis nul en JS ..


    La question surtout c'est pourquoi ça bug ..?

    Deux gadgets différents, le même code, sur un même footer, avec des variables différentes ça bug ? et avec les mêmes variables ?

  4. #4
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 744
    Par défaut
    jour

    si c'est pour affiché plusieurs fois l'heure le mieux c'est de cree une fonction constructeur et d'instancié des objets

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
     
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
     
     
    function test_heure(decalage,pays,conteneur){
     
    this.pays=pays;
     
    this.el=document.getElementById(conteneur);
    this.plus=decalage;
    this.ftc();
    }
     
    test_heure.prototype.ftc=function(){
     
    var mydate = new Date();
     
    var year = mydate.getFullYear();
    var day = mydate.getDay();
    var daym = mydate.getDate();
    var mois = mydate.getMonth(); 
     
    var heures = mydate.getHours()+this.plus;
    var minutes = mydate.getMinutes();
     
    heures = heures <= 9 ? "0" + heures :heures;
     
    minutes =minutes <= 9 ? "0" + minutes :minutes;
     
    this.el.innerHTML =this.pays+" "+daym+"."+mois+"."+year+" - "+heures+":"+minutes;
     
    var that = this;
     
    setTimeout(function(){that.ftc()},1000)
    }
     
     
     window.addEventListener('load',function(){
     
    new test_heure(0,"france","aff_heure1");
    new test_heure(1,"engleterre","aff_heure2");
    new test_heure(2,"groland","aff_heure3")
     
    }, false)
     
     
    </script>
     
    </head>
    <body>
    <div id="aff_heure1" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold"></div>
    <div id="aff_heure2" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold"></div>
    <div id="aff_heure3" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold"></div>
     
     
    </body>
    </html>

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Regarde les erreurs que tu peux avoir dans la console ou en utilise la coloration syntaxique qui indique que sur cette ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("aff_heure").innerHTML =" " France "+daym+"."+mois+"."+year+" - "+heures+":"+minutes;}
    il manque à minima un + ou il y a un " de trop

  6. #6
    Membre confirmé Avatar de Adakhum
    Homme Profil pro
    Ingénieur Mécanique Numérique
    Inscrit en
    Mars 2014
    Messages
    125
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur Mécanique Numérique

    Informations forums :
    Inscription : Mars 2014
    Messages : 125
    Par défaut
    Tout d'abord merci beaucoup pour vos réponses ! Je me suis penché dessus jusqu'à 1h du mat' hier et j'ai enfin trouvé ... bon je ne sais pas pourquoi ça ne marchait pas, mais maintenant ça marche ^^

    Je propose donc ici deux belles horloges ! Une française et une thaïlandaise (le résultat ici en bas de page)

    Hormis que pour le décalage horaire de la thaïlandaise, il se peut qu'elle affiche à un moment "31 novembre" ou encore "32 décembre" mais ça disparait si tôt qu'on est passé minuit ^^


    Alors d'un côté j'ai mit ce code pour l'horloge française :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <div id="HorlogeFr" style="height: 70px; padding-top: 20px;">
     
    <div style="color:#135d7c; text-align:center; font-size: 14pt; font-weight:bold;">France &nbsp; &nbsp;<img border="0" height=13 width=20 src="http://2.bp.blogspot.com/-Q2SLiZOgI2Y/VlJMOPbmzOI/AAAAAAAAAUU/x8ezw_IrfUM/s200/Flag_of_France.png" /></div> 
     
    <script type="text/javascript">
     
    function Jour(){this[0] = "Dim";this[1] = "Lun";this[2] = "Mar";this[3] = "Mer";this[4] = "Jeu";this[5] = "Ven";this[6] = "Sam";}
     
    function Mois(){this[0] = "Janv";this[1] = "Fév";this[2] = "Mars";this[3] = "Avr";this[4] = "Mai";this[5] = "Juin";this[6] = "Jui"; this[7] = "Août";this[8] = "Sept"; this[9] = "Oct";this[10] = "Nov"; this[11] = "Déc";}
     
    function date(){
    var jour=new Jour();
    var mois=new Mois();
     
    var myDate=new Date();
    annee = myDate.getFullYear();
    var result=" " + jour[myDate.getDay()]+" "+myDate.getDate()+" "+mois[myDate.getMonth()]+" "+annee+" &nbsp;";
     
    document.writeln(result);}
     
    </script>
     
    <div style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
    <script language="JavaScript" type="text/JavaScript">
    date();
    </script></div>
     
     
     
    <div id="Display_Hour" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
    <script type='text/javascript'>
     
    function Gadget_Hour(){var mydate = new Date();
     
    var year = mydate.getFullYear();
    var day = mydate.getDay();
    var daym = mydate.getDate();
    var month= mydate.getMonth(); 
    month = month+1;
     
    var hour = mydate.getHours();
    var minute = mydate.getMinutes();
     
    if (hour<= 9) hour= "0" + hour;
     
    if (minute <= 9) minute = "0" + minute;
     
    document.getElementById("Display_Hour").innerHTML =" "+hour+":"+minute;}
     
    function Display_Hour(){intervalId = setInterval(Gadget_Hour, 1000);}
     
    Display_Hour()
     
    </script></div></div>

    et dans l'autre gadget j'ai mit ce code pour l'horloge thaïlandaise :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <div id="HorlogeEtr" style="height: 70px; padding-top: 20px;">
     
    <div style="color:#135d7c; text-align:center; font-size: 14pt; font-weight:bold;">Thaïlande &nbsp; &nbsp;<img border="0" height=13 width=20 src="http://3.bp.blogspot.com/-f-E126tjVM0/VlJIX_UYzMI/AAAAAAAAAUM/y9FT7d8xyO0/s200/Flag_of_Thailand.svg.png" /></div> 
     
     
    <script type="text/javascript">
     
    function Jour(){this[0] = "Dim";this[1] = "Lun";this[2] = "Mar";this[3] = "Mer";this[4] = "Jeu";this[5] = "Ven";this[6] = "Sam";this[7] = "Dim";}
     
    function Mois(){this[0] = "Janv";this[1] = "Fév";this[2] = "Mars";this[3] = "Avr";this[4] = "Mai";this[5] = "Juin";this[6] = "Jui"; this[7] = "Août";this[8] = "Sept"; this[9] = "Oct";this[10] = "Nov"; this[11] = "Déc";}
     
    function date(){
    var jour=new Jour();
    var mois=new Mois();
     
    var myDate=new Date();
     
    annee = myDate.getFullYear();
    numerodate = myDate.getDate();
    jourJ = jour[myDate.getDay()];
     
    var heureNow = myDate.getHours()+6;
    if (heureNow >= 24) {
    numerodate = (myDate.getDate() + 1);
    jourJ = jour[myDate.getDay()+1];
    }
     
    var result=" " +jourJ+" "+numerodate+" "+mois[myDate.getMonth()]+" "+annee+" &nbsp;";
     
    document.writeln(result);}
     
    </script>
     
    <div style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
    <script language="JavaScript" type="text/JavaScript">
    date();
    </script></div>
     
    <div id="aff_heure2" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
     
    <script type="text/javascript">
     
    function test_heure2(){var mydate = new Date();
     
    var heure = mydate.getHours()+6;
    var minute = mydate.getMinutes();
     
    if (heure <= 9) heure = "0" + heure;
    if (minute <= 9) minute = "0" + minute;
    if (heure >= 24) heure = "0" + (heure - 24);
     
    document.getElementById("aff_heure2").innerHTML = heure+":"+minute;}
     
    function aff_heure2(){intervalId = setInterval(test_heure2, 1000);}
     
    aff_heure2()
     
    </script></div></div>

    J'en suis plutôt fier, ça a de la gueule pour quelqu'un qui y connait rien et qui fait tout avec le hasard comme moi ^^

    Encore merci ! tchuss

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. mettre plusieur valeurs avec un IF
    Par Yepazix dans le forum Débuter
    Réponses: 7
    Dernier message: 12/04/2010, 18h36
  2. Désactiver plusieurs SELECT avec javascript
    Par Agité dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 12/10/2007, 17h00
  3. Réponses: 7
    Dernier message: 15/11/2006, 14h23
  4. vérification champs d'e plusieurs forms avec javascript
    Par dolf13 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 11/11/2006, 00h35
  5. mettre à jour plusieurs tables avec un formulaire
    Par kangourou_agile dans le forum Access
    Réponses: 6
    Dernier message: 07/08/2006, 15h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo