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

1 个答案: