Rendre compte à rebours à commencer une fois que le bouton est cliqué

Je suis de la création d'un mini-jeu avec un compte à rebours qui commence une fois que l'utilisateur clique sur un bouton.

Le code que j'utilise lance le compte à rebours sans problème, mais j'aimerais que le compte à rebours commence qu'après que le bouton est cliqué.

Voici mon code:

window.onload = function(){
(function(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);
})();
}

JSFiddle

Merci!
Lauren

developer.mozilla.org/en-US/docs/Web/API/...
api.jquery.com/click

OriginalL'auteur Lauren | 2014-02-10

  1. 6

    Utilisation événement click d'action en lien avec id= "startClock"

    $("#startClock").click( function(){
   var counter = 5;
   setInterval(function() {
     counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
         alert('sorry, out of time');
         clearInterval(counter);
       }
     }, 1000);
});
    yeaah , le travail pour moi
    Fonctionne très bien. Merci à vous tous pour votre aide!

    OriginalL'auteur Sandy

  2. 2

    De créer une fonction et ajouter cliquez sur lister sur le bouton pour appeler cette fonction. Faire quelque chose comme ça.

    function startTimer(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);
}

$("#startClock").click(function(){
    startTimer();
});

    VIOLON

    OriginalL'auteur Subash Selvaraj

  3. 0

    Utilisation sur la méthode $(selector).on('click',callback);

    OriginalL'auteur Bhojendra Rauniyar

  4. 0

    Vous attachez votre fonction dans onLoad de la page, au lieu de joindre onClick

    $('#startClock').click(function(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
      alert('sorry, out of time');
      clearInterval(counter);
    }
  }, 1000);

 });

    Veuillez vérifier le violon JsFiddle

    OriginalL'auteur Navin

  5. 0

    Vous attendons à ce que la fonction de travail lorsque vous cliquez sur et dans votre code que vous utilisez onload événement.

    Donc utiliser événement click() de jQuery pour votre condition.

       $('#startClock').click(function(){
     var counter = 5;
     setInterval(function() {
      counter--;
      if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
   if (counter === 0) {
     alert('sorry, out of time');
     clearInterval(counter);
   }
  }, 1000);

 });

    OriginalL'auteur Shoaib Chikate

  6. 0

    Je veux juste vous proposons de vous mettre dans click gestionnaire de votre sélecteur au lieu de le faire sur window load:

    jQuery(function($){
   $('#startClock').on('click', doCount);
});

function doCount(){
   var counter = 5;
   setInterval(function() {
      counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
      }
   }, 1000);
}

    Demo @ Violon

    Aussi j'ai besoin de vous suggérer que l'utilisation d' $(function(){}); dom ready fonction au lieu de window.onload = function(){}; juste parce que dom ready ne pas attendre pour les dom d'être complètement chargé d'exécuter le script.

    OriginalL'auteur Jai