单击按钮时启动计时器不起作用 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>

此外，您可能希望对间隔函数进行一些修改，以便在您单击按钮时立即将其触发（并且在开始倒计时之前不会等待一秒钟）：

$("#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>

单击按钮时启动计时器不起作用 Javascript

Start timer on button click not working Javascript

html

javascript

material-design-lite