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 :

Compteur en javascript (Affichage sur une page html)


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Juin 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2019
    Messages : 22
    Par défaut Compteur en javascript (Affichage sur une page html)
    Bonjour,

    j'ai un compteur (de population) en javascript qui est dans un fichier php(car je dois récupérer des données d'une base de données), mais quand je veux afficher ces compteurs sur une page html, ils restent bloqués à 0 et ne démarrent pas

    Voici mon code html
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script src ="../envoi.php">
     
     
    </script>
     
    <p id="timer"> 0 </p>
     
    Population française || French population || Franse bevolking
     
    <p id="timerFr"> 0 </p>
     
    </body>

    Et voici le code des fonctions pour les compteurs :

    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
    function augmenterMonde() //on crée une fonction pour incrémenter/augmenter la population mondiale
    {
        populationActuelleMondiale += 1; //on rajoute une naissance à la population actuelle
     
        document.getElementById("timer").innerHTML = new Intl.NumberFormat().format(Math.round(populationActuelleMondiale));
        //on joint le compteur à la variable populationActuelle qui va s'incrémenter, on rajoute Math.round(i) pour avoir un chiffre entier sans virgules
    }
     
    setInterval("augmenterMonde()", 1000/2.7); // Pour trouver quel temps il y a entre chaque naissance on fait un produit en croix c'est-à-dire (1000*1/0.02)
    function augmenterFr() //on crée une fonction pour incrémenter/augmenter la population française
    {
        populationActuelleFr += 0.02; //on rajoute une naissance à la population actuelle française
     
        document.getElementById("timerFr").innerHTML = new Intl.NumberFormat().format(Math.round(populationActuelleFr));
        //on joint le compteur à la variable populationActuelle qui va s'incrémenter, on rajoute Math.round(i) pour avoir un chiffre entier sans virgules
    }
     
    setInterval("augmenterFr()", 1000); // Pour trouver quel temps il y a entre chaque naissance on fait un produit en croix c'est-à-dire (1000*1/2.7)
    Je ne comprend pas pourquoi les compteurs restent à 0

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut


    Erreur sur l'utilisation de setInterval, on passe simplement le nom de la fonction qui doit être appelée.

    Le JS ne comprend pas le PHP : <script src ="../envoi.php">

    Voici les codes corrigés :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <p>
        Population mondiale = <span id="timer"> 0 </span>
    </p>
    <p>
        Population française = <span id="timerFr"> 0 </span>
    </p>


    Code JavaScript : 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
    window.addEventListener('load', ev => {
        // le DOM est construit et la page web est visible
     
        // début code du test
     
        const
            elemTimer = document.querySelector('#timer'),
            elemTimerFr = document.querySelector('#timerFr');
     
        let
            populationActuelleMondiale = 1000,
            populationActuelleFr = 1;
     
        function augmenterMonde() {
            populationActuelleMondiale += 1;
            elemTimer.textContent = Math.floor(populationActuelleMondiale);
        }
     
        function augmenterFr() {
            populationActuelleFr += 0.02;
            elemTimerFr.textContent = Math.floor(populationActuelleFr);
        }
     
        setInterval(augmenterMonde, 1000 / 2.7);
        setInterval(augmenterFr, 1000);
     
        // fin code du test
     
    }, {
        capture: false,
        passive: true,
        once: false
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Juin 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2019
    Messages : 22
    Par défaut Les compteurs ne démarrent toujours pas :/
    Après changement du code html et du code js, les compteurs restent toujours à 0 :/

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Juin 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2019
    Messages : 22
    Par défaut
    Voici le code complet
    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
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
     
    <?php
    $nbdeces=$_POST['nbdeces'];
    $req = $pdo->prepare('INSERT INTO nombre_deces(nbdeces) VALUES(:nbdeces)');
    $req->execute(array(
        'nbdeces' => $nbdeces,
    ));
     
    echo 'Le nombre a bien été ajouté !';
     
     
    $SQL=$pdo->query("SELECT SUM(nbdeces) as totalnbdeces FROM nombre_deces");
    $data = $SQL->fetch();
    $variable = $data['totalnbdeces'];
     
    echo "Total : ".$data['totalnbdeces'];
     
     
     
    ?>
     
        <script>
     
            var nbdeces = <?php echo $variable; ?>;
            var populationJanvierMondiale = 7672000000 - nbdeces; //La population mondiale au 1er janvier 2019
            var nbNaissanceJourMonde = 233280; //il y a 2.7 naissances par secondes(donc 1000 millisecondes) on multiplie 2.7 par 86400000 (nombre de millisecondes en une journée) et on le divise par 1000 pour obtenir le résultat c'est-à-dire le nombre moyen de naissances par jour(cf produit en croix)
            var populationJanvierFr = 67000000; //populat// ion fr au 1er janvier 2019
            var nbNaissanceJourFr = 1431.98; //Chaque jour la population de la france varie de +1431.98
     
     
            function getQuantieme()
            {
                //Déclaration des deux dates nécessaires.
                var dateCourante = new Date();
                var dateDebutAnnee = new Date();
                //On affecte à la date du début de l'année, le mois 1, le jour 1 et l'année courante
                dateDebutAnnee.setDate(1);
                dateDebutAnnee.setMonth(0);
                dateDebutAnnee.setFullYear(dateCourante.getFullYear());
                //On calcule la différence entre les deux dates. Le résultat étant en millisecondes, il faut convertir les mllisecondes en jours
                quantieme = (dateCourante.getTime() - dateDebutAnnee.getTime()) / (24 * 3600 * 1000) + 1;
                return Math.round(quantieme);
            }
     
          /*  function augmenterMonde() //on crée une fonction pour incrémenter/augmenter la population mondiale
            {
                populationActuelleMondiale += 1; //on rajoute une naissance à la population actuelle
     
                document.getElementById("timer").innerHTML = new Intl.NumberFormat().format(Math.round(populationActuelleMondiale));
                //on joint le compteur à la variable populationActuelle qui va s'incrémenter, on rajoute Math.round(i) pour avoir un chiffre entier sans virgules
            }
     
            setInterval("augmenterMonde()", 1000/2.7); // Pour trouver quel temps il y a entre chaque naissance on fait un produit en croix c'est-à-dire (1000*1/0.02)
            function augmenterFr() //on crée une fonction pour incrémenter/augmenter la population française
            {
                populationActuelleFr += 0.02; //on rajoute une naissance à la population actuelle française
     
                document.getElementById("timerFr").innerHTML = new Intl.NumberFormat().format(Math.round(populationActuelleFr));
                //on joint le compteur à la variable populationActuelle qui va s'incrémenter, on rajoute Math.round(i) pour avoir un chiffre entier sans virgules
            }
     
            setInterval("augmenterFr()", 1000); // Pour trouver quel temps il y a entre chaque naissance on fait un produit en croix c'est-à-dire (1000*1/2.7)
    */
           window.addEventListener('load', ev => {
                // le DOM est construit et la page web est visible
     
                // début code du test
     
                const
                    elemTimer = document.querySelector('#timer'),
                    elemTimerFr = document.querySelector('#timerFr');
     
                let
                    populationActuelleMondiale = 1000,
                    populationActuelleFr = 1;
     
                function augmenterMonde() {
                    populationActuelleMondiale += 1;
                    elemTimer.textContent = Math.round(populationActuelleMondiale);
                }
     
                function augmenterFr() {
                    populationActuelleFr += 0.02;
                    elemTimerFr.textContent = Math.round(populationActuelleFr);
                }
     
                setInterval(augmenterMonde, 1000 / 2.7);
                setInterval(augmenterFr, 1000);
     
                // fin code du test
     
            }, {
                capture: false,
                passive: true,
                once: false
            });
     
            var maintenant=new Date(); //date d'aujourd'hui
            var jour=maintenant.getDate(); //jour
            var mois=maintenant.getMonth()+1; //mois
            var an=maintenant.getFullYear(); // année
     
            if(an === 2019)
            {
                populationActuelleMondiale = populationJanvierMondiale + (nbNaissanceJourMonde * getQuantieme()); //On calcule la population de la journée par rapport au 1er janvier 2019
                populationActuelleFr = populationJanvierFr + (nbNaissanceJourFr * getQuantieme()); //pareil mais pour la population frnaçaise
            }
            else if(an%4 === 0 || an%100 === 0 && an%400===0) //si c'est une année bissextile
            {
                if (jour > 28 && mois >= 2) //si on passe au 29 février d'une année bissextile on rajoutera 366 jours par rapport à l'année précédente
                {
                    numeroAnnee = (an - 2019);
                    //on prend comme année 0 : 2019
                    populationActuelleMondiale = populationJanvierMondiale + (nbNaissanceJourMonde * (getQuantieme() + (366 ** numeroAnnee))); //On calcule la population de la journée par rapport au 1er janvier 2019
                    populationActuelleFr = populationJanvierFr + (nbNaissanceJourFr * (getQuantieme() + (366**numeroAnnee)));
                }
                else //si on est avant le 29 février d'une année bissextile
                {
                    numeroAnnee = (an - 2019);
                    populationActuelleMondiale = populationJanvierMondiale + (nbNaissanceJourMonde * (getQuantieme()+(365**numeroAnnee)));
                    populationActuelleFr = populationJanvierFr + (nbNaissanceJourFr * (getQuantieme() + (365**numeroAnnee)));
                }
            }
            else
            {
                numeroAnnee = (an - 2019);
                populationActuelleMondiale = populationJanvierMondiale + (nbNaissanceJourMonde * (getQuantieme()+(365**numeroAnnee))); //On calcule la population de la journée par rapport au 1er janvier 2019
                populationActuelleFr = populationJanvierFr + (nbNaissanceJourFr * (getQuantieme() + (365**numeroAnnee)));
            }
     
     
        </script>
    J'ai mis le code js dans un fichier php car je devais recuperer une variable php pour la mettre dans le code js, et donc les compteurs restent toujours bloqués à 0 :/

  6. #6
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Bonjour,
    pour que le navigateur reconnaisse le contenu envoyé par PHP comme du code JavaScript, tu dois faire deux choses :
    1. ajouter un en-tête de type de contenu avec header() : header('Content-Type: text/javascript'); (tu peux également préciser le charset) ;
    2. supprimer les balises <script>.


    Tu peux utiliser les onglets « console » et « réseau » du panneau F12 pour vérifier que le script arrive sous la bonne forme, et est correctement interprété.

    Pour tirer parti du cache, l’idéal serait de servir un fichier JS entièrement statique (pas de code PHP dedans), et d’avoir un autre script PHP qui servirait uniquement la donnée $data['totalnbdeces'], que tu récupèrerais avec une requête ajax.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

Discussions similaires

  1. insérer une image sur une page html sans joindre son fichier
    Par fidji dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 03/02/2006, 10h15
  2. Récupérer des données sur une page HTML
    Par rupeni dans le forum VB 6 et antérieur
    Réponses: 11
    Dernier message: 18/11/2005, 17h22
  3. comment rediriger sur une page html en fonction de la langue
    Par pierrot10 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 10/08/2005, 11h42
  4. Marge sur une page HTML
    Par wollverine dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 28/04/2005, 13h56
  5. Problème de chaine sur une page HTML
    Par Kerod dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 23/11/2004, 16h23

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