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 :

Afficher un chronomètre de 10 secondes


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Par défaut Afficher un chronomètre de 10 secondes
    Bonjour à tous,
    j'ai récemment créé et mis en ligne un questionnaire en javascript bien sûr (disponible sur yann.quentin.tf)
    je voudrais ajouter un compte à rebours de 10 secondes à la fin duquel alert est lancé, et on passe à la question suivante
    j'ai cherché sur le net, et j'ai trouvé ceci:
    html:
    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
    <!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>Questionnaire - Histoire de l'Art</title>
    		<script type="text/javascript" src="../scriptJS/jquery.js"></script>
    		<script src="../scriptJS/questionnaire.js"></script>
    		<!--définir script-->
    	</head>
     
    	<body id="b">  
    		<h1>QUESTIONNAIRE - HISTOIRE DE L'ART</h1>
    		<div id='QUEST'></div>
    		<button id="v" title="Une bonne/mauvaise réponse augmente/diminue votre score d'un point">VALIDER</button>
    		<button id="a" title="Retour à l'accueil">ABANDONNER</button>
    		<button id="p" title="Pas de réponse n'ajoute ni ne retire de point">PASSER</button>
     
    		<div id='time' style='text-align:right;'>
    		</div>
    	 </body> 
    </html>
    js
    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
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
     
    var r;
    var q;
     
    //var eaigu = '\xE9';
    //var egrave = '\xE8';
     
    var repOK = "Bonne réponse\xA0!";
    var repKO = "Mauvaise réponse\xA0!";
    var score;
    var i;
    var t;
     
    window.onload = function( ){
     
    	t = document.getElementById("time");
    	score = 0;
       i = 1;
     
    window.setTimeout("t.innerHTML='10'",1000);
    window.setTimeout("t.innerHTML='9'",2000);
    window.setTimeout("t.innerHTML='8'",3000);
    window.setTimeout("t.innerHTML='7'",4000);
    window.setTimeout("t.innerHTML='6'",5000);
    window.setTimeout("t.innerHTML='5'",6000);
    window.setTimeout("t.innerHTML='4'",7000);
    window.setTimeout("t.innerHTML='3'",8000);
    window.setTimeout("t.innerHTML='2'",9000);
    window.setTimeout("t.innerHTML='1'",10000);
    window.setTimeout(time,11000);
     
       q = document.getElementById("QUEST");
     
     
       afficherQuestion(i);
       document.getElementById("a").onclick = function( ){
          if (confirm("Vous avez choisi dâ&#128;&#153;abandonner ce jeu")) {
             location.href =  '../index.php';
          }
       };
       document.getElementById("v").onclick = function( ){
          switch (r) {
             case "r1":            
             	alert(repKO);
                score--;
                break;
             case "r3":
             	alert(repKO);
                score--;
                break;
             case "r1f":            
             	alert(repKO);
                score--;
                break;            
             case "r3f":
                alert(repKO);
                score--;
                break;
     
             case "r2":            
             	alert(repOK);
                score++;
                break;
             default:
                alert("Vous n'avez pas répondu!");
           	   i--;
                break;
          }
     
          i++;
          afficherQuestion(i);
          r = "";
       }
             document.getElementById("p").onclick = function( ){
             	alert("Vous avez choisi de passer \340 la question suivante");
             	i++;      
             	afficherQuestion(i);
             }
    }; // fin window.onload
     
    function reponse( rep ){
       r = rep;
    };
     
    function time ( ) {
     
    	t.innerHTML='0';
    	alert('Le temps imparti est écoulé.');
    	score--;
    	i++;
     
    	}
     
    function afficherQuestion( i ){
       q.innerHTML = "";
     
       var $h3 = document.createElement("h3");
       $h3.align = "center";
       $h3.textContent = "QUESTION\xA0: ";
       q.appendChild($h3);
     
       q.appendChild(document.createElement("hr"));
     
       var $ul = document.createElement("ul");
       $ul.style.listStyleType = "none";
       q.appendChild($ul);
     
       var $li1 = document.createElement("li");
       $ul.appendChild($li1);
       var $label1 = document.createElement("label");
       $li1.appendChild($label1);
       var $radio1 = document.createElement("input");
       $radio1.type = "radio";
       $radio1.name = "rd";
       $radio1.onclick = function( ){
          reponse(this.value);
       };
       $label1.appendChild($radio1);
       var $span1 = document.createElement("span");
       $label1.appendChild($span1);
     
       var $li2 = document.createElement("li");
       $ul.appendChild($li2);
       var $label2 = document.createElement("label");
       $li2.appendChild($label2);
       var $radio2 = document.createElement("input");
       $radio2.type = "radio";
       $radio2.name = "rd";
       $radio2.onclick = function( ){
          reponse(this.value);
       };
       $label2.appendChild($radio2);
       var $span2 = document.createElement("span");
       $label2.appendChild($span2);
     
       var $li3 = document.createElement("li");
       $ul.appendChild($li3);
       var $label3 = document.createElement("label");
       $li3.appendChild($label3);
       var $radio3 = document.createElement("input");
       $radio3.type = "radio";
       $radio3.name = "rd";
       $radio3.onclick = function( ){
          reponse(this.value);
       };
       $label3.appendChild($radio3);
       var $span3 = document.createElement("span");
       $label3.appendChild($span3);
     
       switch (i) {
       case 1:
          $h3.textContent += "Sur quelle période sâ&#128;&#153;étend lâ&#128;&#153;impressionnisme\xA0?";
          $radio1.value = "r1";
          $span1.textContent = "Seconde moitié du XVIIème";
          $radio2.value = "r2";
          $span2.textContent = "Première moitié du XIXème";
          $radio3.value = "r3";
          $span3.textContent = "Début du XXème";
          break;
     
       case 2:
          $h3.textContent += "Qui a peint le tableau Guernica\xA0?";
          $radio1.value = "r1";
          $span1.textContent = "Henri Salvador";
          $radio2.value = "r2";
          $span2.textContent = "Pablo Picasso";
          $radio3.value = "r3";
          $span3.textContent = "Francisco Goya";
          break;
     
       case 3:
          $h3.textContent += "Dâ&#128;&#153;où vient le nom impressionnisme\xA0?";
          $radio1.value = "r2";
          $span1.textContent = "Dâ&#128;&#153;un tableau de Monet";
          $radio2.value = "r1";
          $span2.textContent = "Du style de la peinture";
          $radio3.value = "r3";
          $span3.textContent = "Ce nom était joli";
          break;
     
       case 4:
          $h3.textContent += "Quâ&#128;&#153;est-ce que le David de Michel-Ange\xA0?";
          $radio1.value = "r3";
          $span1.textContent = "Un ange qui sâ&#128;&#153;appelle David";
          $radio2.value = "r1";
          $span2.textContent = "Une peinture de David";
          $radio3.value = "r2";
          $span3.textContent = "Une sculpture de David";
          break;
     
       case 5:
          $h3.textContent += "Quâ&#128;&#153;est-ce que le fauvisme\xA0?";
          $radio1.value = "r2f";
          $span1.textContent = "Un courant artistique reposant sur lâ&#128;&#153;utilisation des couleurs";
          $radio2.value = "r1f";
          $span2.textContent = "Lâ&#128;&#153;art de manier la faux";
          $radio3.value = "r3f";
          $span3.textContent = "Un film documentaire centré sur la vie des fauves";
          break;
     
       default:
          alert("Le jeu est terminé. Votre score est de " + score);
          document.location.href = '../index.php';
       }
    };
    Mais le problème est que rien ne marche à part le premier alert.
    Une idée, svp?

  2. #2
    Membre éprouvé
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 125
    Par défaut
    Beurk c'est vraiment vraiment sale xO.

    Je te propose plutôt quelque chose comme ça :

    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
     
    var chrono = {
        secondsLeft: 0,
        timer: undefined,
     
        Start: function(secondsLeft) {
            //Initialisation du nombre de secondes selon la valeur passée en paramètre
            this.secondsLeft = secondsLeft;
            //Démarrage du chrono
            this.timer = setInterval(this.Tick.bind(this), 1000);
        },
     
        Tick: function() {
            //On actualise la valeur affichée du nombre de secondes
            document.getElementById("time").innerHTML = --this.secondsLeft;
            if(this.secondsLeft === 0)
            //Tps écoulé -> arrêt du timer
                this.Stop()
        },
     
        Stop: function() {
            //quand le temps est écoulé, on arrête le timer
            clearInterval(this.timer);
            //Et on appelle la fonction qui gère la fin du temps imparti et poursuit le traitement
            //Ici, pour le test, simplement une fonction alert
            alert('Vous avez perdu');
        }
     
    };
    Pour tester :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <button onClick="chrono.Start(10);">Démarrer le chrono</button>
    <br/>
    <em id="time">10</em>
    Si quelqu'un peut me dire pourquoi chez moi ça marche mais pas sur JS fiddle par contre, merci xS


    Si tu comprend pas quelque chose, hésite pas :O

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Par défaut
    Eh bien chez moi non plus, ça ne marche pas, il m'affiche un bouton et 10 en-dessous, mais lors d''un clic, rien ne passe.

  4. #4
    Membre éprouvé
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 125
    Par défaut
    Citation Envoyé par aertys Voir le message
    Eh bien chez moi non plus, ça ne marche pas, il m'affiche un bouton et 10 en-dessous, mais lors d''un clic, rien ne passe.
    http://jsfiddle.net/RVqDe/3/
    Ca fonctionne pourtant bien

  5. #5
    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 659
    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 659
    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 !

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Par défaut
    Je n''y comprend rien ça a bien marché dans le lien que vous m'avez donné, mais chez moi, toujours rien.
    J'ai pensé que cela pouvait être dû à mon serveur qui n'était pas démarré, mais je n'ai toujours rien.

Discussions similaires

  1. [TASM] Comment afficher un message après 5 secondes ?
    Par S.H dans le forum x86 16-bits
    Réponses: 8
    Dernier message: 26/08/2008, 15h59
  2. Comment afficher une fenêtre pendant 30 secondes ?
    Par samia13 dans le forum Composants VCL
    Réponses: 5
    Dernier message: 05/01/2008, 01h42
  3. Comment afficher un message durant quelques secondes?
    Par slyfer dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 09/12/2007, 16h24
  4. afficher une image pendant X seconde ?
    Par weldoo dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 21/11/2007, 16h56
  5. afficher un chronomètre dans une page
    Par ashash dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 03/04/2007, 20h05

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