Stellen Sie den countdown starten, wenn der Knopf geklickt wird

Ich bin die Schaffung einer Kinder-Spiel mit einem countdown, der startet, nachdem der Benutzer auf eine Schaltfläche klickt.

Den code, den ich verwende, startet den countdown, ohne ein problem, aber ich würde gerne den countdown zu starten, nur nachdem auf die Schaltfläche geklickt wird.

Hier ist mein 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

Danke!
Lauren

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

InformationsquelleAutor Lauren | 2014-02-10

  1. 6

    Verwenden Sie click-Ereignis der link mit 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 , für mich arbeiten
    Funktioniert Super. Danke an alle für Eure Hilfe!

    InformationsquelleAutor Sandy

  2. 2

    Erstellen Sie eine Funktion und klicken Sie auf hinzufügen lister Schaltfläche zum Aufruf dieser Funktion. Tun Sie etwas wie dieses.

    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();
});

    FIDDLE

    InformationsquelleAutor Subash Selvaraj

  3. 0

    Verwenden über die Methode $(selector).on('click',callback);

    InformationsquelleAutor Bhojendra Rauniyar

  4. 0

    Anfügen Ihre Funktion in onLoad von der Seite, stattdessen befestigen 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);

 });

    Bitte überprüfen Sie die Geige JsFiddle

    InformationsquelleAutor Navin

  5. 0

    Erwarten Sie, dass die Funktion funktioniert, wenn Sie auf und in Ihrem code, den Sie verwenden onload Veranstaltung.

    So zu verwenden, klicken Sie auf () - Ereignis von jQuery für Ihre Anforderung.

       $('#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);

 });

    InformationsquelleAutor Shoaib Chikate

  6. 0

    Ich möchte nur vorschlagen, dass Sie es im click - handler Ihres Selektor anstatt das zu tun, auf 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 @ Fiedel

    Außerdem muss ich schlage vor, Sie, zu verwenden $(function(){}); dom-ready-Funktion anstelle von window.onload = function(){}; nur weil dom bereit nicht warten, für den dom zu voll geladen, um das Skript auszuführen.

    InformationsquelleAutor Jai

Schreibe einen Kommentar