时间戳

首页 > 解决方案 > 计时器未正常运行 - Javascript

javascript - 计时器未正常运行 - Javascript

问题描述

我很抱歉问这个问题。我对 Javascript 比较陌生。我在构建倒数计时器方面得到了帮助，但它突然分成两部分运行。我可能做错了什么？我想我错过了一个小细节，但我就是找不到。请问有什么问题。

    $("#coinbtn1").click(function() {
      var fiveMinutes = 60 * 5,
        display = document.querySelector('#time1');
      startTimer1(fiveMinutes, display);
    });
    
    function startTimer1(duration, display) {
      var timer = duration,
        minutes, seconds;
        
      var intervalFn = function() {
    	  
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);
    
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
    
        display.textContent = minutes + ":" + seconds;
    	
    	if(--timer != 0){
    		document.getElementById('coinbtn1').disabled = true;
    	}
    	
    	if (--timer === 0) {
    		  clearInterval(myVar);
    		  document.getElementById('coinbtn1').disabled = false;
    		}
        
      };
      
      myVar = setInterval(intervalFn, 1000);
      
      intervalFn();
      

    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
    						<div>Timer : <span  id="time1">05:00</span></div>
                                <div class="mdl-grid">
    							
    							<div class="mdl-layout-spacer"></div>
    							
                                    <button id="coinbtn1" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
    							50 coins 
    							</button>
    							<div class="mdl-layout-spacer"></div>
                                </div>
    							
                            </div>

请帮忙。

标签： javascripthtml

解决方案

问题是您有两个在其条件if中使用的语句。--timer

--timertimer无论if条件是否true存在（--是“减量”运算符） ，都会导致减少。

相反，只需检查timer-1（不会导致timer修改），然后在这两个测试之后手动减少一次计时器。

$("#coinbtn1").click(function() {
  var fiveMinutes = 60 * 5,
  display = document.querySelector('#time1');
  startTimer1(fiveMinutes, display);
});
    
function startTimer1(duration, display) {
  var timer = duration, minutes, seconds;
  var intervalFn = function() {
    	  
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    
    display.textContent = minutes + ":" + seconds;
    	
    // Don't decrease the timer in the test
    if(timer-1 != 0){
      document.getElementById('coinbtn1').disabled = true;
    }
    	
    // Don't decrease the timer in the test      
    if (timer-1 === 0) {
      clearInterval(myVar);
      document.getElementById('coinbtn1').disabled = false;
    }
  
    --timer; // Decrease the counter just once.
  }
 
  myVar = setInterval(intervalFn, 900);
      
  intervalFn();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span  id="time1">05:00</span></div>
  <div class="mdl-grid">						
    <div class="mdl-layout-spacer"></div>					
    <button id="coinbtn1" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">50 coins</button>
    <div class="mdl-layout-spacer"></div>
  </div>
</div>

推荐阅读