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 - カウントダウン期間中にクリック機能を無効にする

答えて

関連する問題