カウントダウンタイマーでクリック時にsetIntervalを一時停止する

クリック時にカウントダウンタイマーを起動するボタンがあります。タイマーボックスをクリックするとこのタイマーを一時停止し、もう一度クリックすると一時停止します。私はクリックでカウントダウンを止めることができましたが、私はそれをどのように元に戻すのか分かりません。カウントダウンタイマーでクリック時にsetIntervalを一時停止する

jQuery(function ($) { 
 

 
    var countdown; 
 
    
 
    function startTimer(duration, display) { 
 
    var timer = duration, minutes, seconds; 
 
    countdown = setInterval(function() { 
 
     minutes = parseInt(timer/60, 10); 
 
     seconds = parseInt(timer % 60, 10); 
 

 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
 
     seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
     display.text(minutes + ":" + seconds); 
 

 
     if (--timer < 0) { 
 
     clearInterval(countdown); 
 
     } 
 
    }, 1000); 
 
    } 
 
    
 
    $('.start-timer').on('click',function() { 
 
     $('body').append("<div id='countdown-timer'></div>"); 
 
     var fiveMinutes = 60 * 5; 
 
     var display = $('#countdown-timer'); 
 
     startTimer(fiveMinutes, display); 
 
    }); 
 
    
 
    // Want this function to be toggling the timer countdown 
 

 
    $('body').on('click', '#countdown-timer',function(){ 
 
    clearInterval(countdown); 
 
    countdown = null; 
 
    }); 
 
    
 
});

#countdown-timer { 
 
    position: absolute; 
 
    top: 20%; 
 
    cursor: pointer; 
 
    background: rgba(0,0,0,0.4); 
 
    color: white; 
 
    border-width: 1px; 
 
    border-color: #fed136; 
 
    font-size: 50px; 
 
    border-radius: 4px; 
 
}

<body> 
 
    <div id="countdown-timer"></div> 
 
<button class="start-timer">Start timer</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</body>

ここでフィドルです：ここでhttps://jsfiddle.net/wLnmk5dx/3/

出典

2016-08-13 followthemadhat

は/一時停止を解除タイマーを一時停止する機能をスニペットです。コードを少し変更しました。それを確認してください。
タイマーの最初のインターバル遅延をリセットすることもできます。

jQuery(function($) { 
 

 
    var paused; 
 
    var countdown; 
 

 
    function startTimer(duration, display) { 
 
    var timer = duration; 
 
    var minutes; 
 
    var seconds; 
 

 
    countdown = setInterval(function() { 
 
     minutes = parseInt(timer/60, 10); 
 
     seconds = parseInt(timer % 60, 10); 
 

 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
 
     seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
     display.text(minutes + ":" + seconds); 
 

 
     if (--timer < 0) { 
 
     clearInterval(countdown); 
 
     } 
 
    }, 1000); 
 
    } 
 

 
    $('.start-timer').on('click', function() { 
 
    if (countdown) { 
 
     clearInterval(countdown); 
 
    } 
 
    paused = false; 
 
    $('body').append("<div id='countdown-timer'></div>"); 
 
    var fiveMinutes = 60 * 5; 
 
    startTimer(fiveMinutes, $('#countdown-timer')); 
 
    }); 
 

 
    // Pause/Unpause timer 
 

 
    $('body').on('click', '#countdown-timer', function() { 
 
    if (paused) { 
 
     var timer = $(this).text().split(':'); 
 
     startTimer(Number(timer[0] * 60) + Number(timer[1]), $('#countdown-timer')); 
 
     paused = false; 
 
    } else { 
 
     clearInterval(countdown); 
 
     paused = true; 
 
    } 
 
    }); 
 
});

#countdown-timer { 
 
    position: absolute; 
 
    top: 20%; 
 
    cursor: pointer; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    color: white; 
 
    border-width: 1px; 
 
    border-color: #fed136; 
 
    font-size: 50px; 
 
    border-radius: 4px; 
 
}

<body> 
 
    <div id="countdown-timer"></div> 
 
    <button class="start-timer">Start timer</button> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</body>

出典

2016-08-13 13:35:03 hekta

カウントダウンタイマーでクリック時にsetIntervalを一時停止する

答えて

関連する問題