JavaScript - Klick-Funktion für die Dauer des Countdowns deaktivieren

So habe ich einen grundlegenden Countdown-Timer von 5 Minuten Countdown durch ein Klick-Ereignis ('START CLOCK') Countdown. Ich möchte diese Funktion deaktivieren, sobald der Countdown abgelaufen ist, bis der Countdown abgelaufen ist. Irgendwelche Vorschläge?JavaScript - Klick-Funktion für die Dauer des Countdowns deaktivieren

<html> 
<head> 


</head> 
<body> 

    <h1>Countdown Clock</h1> 

    <div onclick="startClock()">START CLOCK</div> 

    <div id="clockdiv"> 

     <div> 
      <span class="hours"></span> 
      <div class="smalltext">Hours</div> 
     </div> 
     <div> 
      <span class="minutes"></span> 
      <div class="smalltext">Minutes</div> 
     </div> 
     <div> 
      <span class="seconds"></span> 
      <div class="smalltext">Seconds</div> 
     </div> 
    </div> 


    <script> 
    function getTimeRemaining(endtime) { 
     var t = Date.parse(endtime) - Date.parse(new Date()); 
     var seconds = Math.floor((t/1000) % 60); 
     var minutes = Math.floor((t/1000/60) % 60); 
     var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
    //var days = Math.floor(t/(1000 * 60 * 60 * 24)); 
    return { 
    'total': t, 
    //'days': days, 
    'hours': hours, 
    'minutes': minutes, 
    'seconds': seconds 
    }; 
    } 

    function startClock() { 
    function initializeClock(id, endtime) { 
     var clock = document.getElementById(id); 
     //var daysSpan = clock.querySelector('.days'); 
     var hoursSpan = clock.querySelector('.hours'); 
     var minutesSpan = clock.querySelector('.minutes'); 
     var secondsSpan = clock.querySelector('.seconds'); 

     function updateClock() { 
     var t = getTimeRemaining(endtime); 

     //daysSpan.innerHTML = t.days; 
     hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
     minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
     secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 

     if (t.total <= 0) { 
      clearInterval(timeinterval); 
      } 
     } 

     updateClock(); 
     var timeinterval = setInterval(updateClock, 1000); 
     } 

     var timeInMinutes = 5; 
     var currentTime = Date.parse(new Date()); 
     var deadline = new Date(currentTime + timeInMinutes*60*1000); 
     initializeClock('clockdiv', deadline); 

     } 

     </script> 
     </body> 

     </html>

Quelle

2016-05-05 mellows

Da Sie Ereignis-Listener über HTML-Attribut Anbringen des einfachste Weg, um Ihr Ziel zu erreichen, einfach globalen Flag wäre - es erhöhen, wenn die Funktion gestartet wird, fallen, wenn die Funktion beendet ist.
Wenn die Funktion bereits ausgeführt wird und der Benutzer versucht, sie erneut auszuführen (Flag wird ausgelöst), kehren Sie sofort zurück.

Quelle

2016-05-05 03:40:35

Ich habe im Wesentlichen eine Flag-Variable in Ihrer Funktion hinzugefügt.

var flag=0; 
    function startClock() { 

    function initializeClock(id, endtime) { 
     if(flag==0) 
    { 
     var clock = document.getElementById(id); 
     //var daysSpan = clock.querySelector('.days'); 
     var hoursSpan = clock.querySelector('.hours'); 
     var minutesSpan = clock.querySelector('.minutes'); 
     var secondsSpan = clock.querySelector('.seconds'); 
flag=1; 
} 
     function updateClock() { 
     var t = getTimeRemaining(endtime); 

     //daysSpan.innerHTML = t.days; 
     hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
     minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
     secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 

     if (t.total <= 0) { 
      clearInterval(timeinterval); 
      flag=0; 
      } 
     } 

     updateClock(); 
     var timeinterval = setInterval(updateClock, 1000); 
     } 

     var timeInMinutes = 1; 
     var currentTime = Date.parse(new Date()); 
     var deadline = new Date(currentTime + timeInMinutes*60*1000); 
     initializeClock('clockdiv', deadline); 


    }

Jedes Mal, wenn die Uhr tickt, wird das Flag set.When der Zähler 0 trifft, wird es auf den ursprünglichen Wert zurückgesetzt.

Hier ist ein DEMO mit Zeit auf 1 Minute eingestellt.

Quelle

2016-05-05 03:40:57

JavaScript - Klick-Funktion für die Dauer des Countdowns deaktivieren

Antwort

Verwandte Themen