Question

我正在创建一个带有计时器倒计时的孩子游戏，该计时器会在用户点击按钮后开始。

我正在使用的代码启动倒计时没有问题，但我想倒计时才会在点击按钮后启动。

这是我的代码：

window.onload = function(){
(function(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);
})();
}

JSFiddle

谢谢！劳伦

Answer 1

使用点击事件操作链接 id =“startClock”

$("#startClock").click( function(){
   var counter = 5;
   setInterval(function() {
     counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
         alert('sorry, out of time');
         clearInterval(counter);
       }
     }, 1000);
});

Answer 2

创建一个函数并将click侦听器添加到按钮以调用该函数。做这样的事。

function startTimer(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);
}

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

FIDDLE

Answer 3

使用on method $(selector).on('click',callback);

Answer 4

您要在页面的onLoad附加您的功能，而是附加onClick

$('#startClock').click(function(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
      alert('sorry, out of time');
      clearInterval(counter);
    }
  }, 1000);

 });

请检查小提琴JsFiddle

Answer 5

当您点击并使用onload事件代码时，您希望该功能可以正常工作。

因此，请根据您的要求使用jQuery的click（）事件。

   $('#startClock').click(function(){
     var counter = 5;
     setInterval(function() {
      counter--;
      if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
   if (counter === 0) {
     alert('sorry, out of time');
     clearInterval(counter);
   }
  }, 1000);

 });

Answer 6

我只是建议您将其放在选择器的click处理程序中，而不是在window load上执行此操作：

jQuery(function($){
   $('#startClock').on('click', doCount);
});

function doCount(){
   var counter = 5;
   setInterval(function() {
      counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
      }
   }, 1000);
}

Demo @ Fiddle

另外我需要建议您使用$(function(){}); dom ready函数而不是window.onload = function(){};，因为dom ready不会等待dom完全加载以执行脚本。

单击按钮后开始倒计时

6 个答案:

Demo @ Fiddle