“启动定时器”按钮单击“不工作Javascript”

Question

我试着实现一个按钮，当它被点击时启动一个定时器，但它似乎不起作用。这是我使用的代码。它只在页面加载时启动，但我希望设置按钮单击以激活计时器。我做错了什么？

​

$("#startClock").click(function() {
  startTimer();
});

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  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.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
};

<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="startClock" 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>

​

Answer 1

您只需确保将参数传递给startTimer()，在本例中是fiveMinutes和display

​

$("#startClock").click(function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
});

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  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.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

<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="startClock" 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>

​

此外，您可能希望在单击该按钮后立即重新工作您的interval函数，以启动它(并且在开始计数之前不要等待一秒钟)：

​

$("#startClock").click(function() {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer(fiveMinutes, display);
});

function startTimer(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) {
      timer = duration;
    }
  };
  
  
  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="startClock" 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>

​