JavaScript - 關閉倒數時間的點擊功能

所以我有一個基本的倒數計時器，從點擊事件（'START CLOCK'）開始的5分鐘內倒數。我想在倒計時開始之前禁用此功能，直到倒計時結束。有什麼建議麼？JavaScript - 關閉倒數時間的點擊功能

<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>

來源

2016-05-05 mellows

既然你是通過HTML屬性，來實現自己的目標將是簡單全局標誌的最簡單的方法安裝事件偵聽器 - 提高它啓動功能時，它下降時，函數執行完畢。
如果函數已經在運行，並且用戶正在嘗試再次運行它（標誌被提出），請立即返回。

來源

2016-05-05 03:40:35

我基本上在你的函數中添加了一個標誌變量。

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


    }

每當時鐘滴答滴答時，標記都會置位。當計數器達到0時，它將被重置爲原始值。

這是一個DEMO時間設置爲1分鐘。

來源

2016-05-05 03:40:57

JavaScript - 關閉倒數時間的點擊功能

回答

相關問題