如何在javascript中单击按钮时触发此代码

Question

我是JavaScript的新手，我希望这段代码以一个按钮的单击开始，并且在每次单击中，它都应该从零开始一个新的不同计时器。任何人在这里帮助！

// add a count-down timer
 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);
}
var butt = window.document.getElementById('button');
window.onload = function () { //i tried using ' butt.onclick' but this did not work
  var fiftenMinutes = 60 * 15,
      display = document.querySelector('#time');
  startTimer(fiftenMinutes, display);
};

<h3 id="time" class="divTime"></h3>

Answer 1

只需将事件监听器添加到按钮上，并清除已设置的计时器（如果已设置）。运行以下代码段。

function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        
        return 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 + ' Click to Restart';
      
            if (--timer < 0) {
                timer = duration;
            }
        }, 1000);
    }
    
    var timerID = null;
    
    // replace 'time' if the h3 element isn't the button.
    document.getElementById( 'time' ).addEventListener( 'click', function() {
        if ( timerID ) {
            clearInterval( timerID );
        }
    
        var fiftenMinutes = 60 * 15,
            display = document.querySelector('#time');
    
        timerID = startTimer(fiftenMinutes, display);
    })

<h3 id="time" class="divTime">Click To Start Timer</h3>

Answer 2

如果每次单击都需要一个不同的计时器，则需要向DOM中动态添加一个元素以保存它。

// add a count-down timer
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() { //i tried using ' butt.onclick' but this did not work
  var fiftenMinutes = 60 * 15,
    display = document.querySelector('#time');
  startTimer(fiftenMinutes, display);
};
var butt = window.document.getElementById('button');
butt.addEventListener("click", function() {
  var new_h3 = document.createElement("h3");
  document.body.appendChild(new_h3);
  startTimer(60*15, new_h3);
})

<h3 id="time" class="divTime"></h3>
<button id="button">Start timer</button>

Answer 3

首先，您需要添加一个ID为“ button”的按钮，以使代码正常工作：

<button id="button">Button Text</button>

接下来，每次单击按钮，您要取消上一个间隔，否则最终将有越来越多的间隔更改h3的内容：

var intervalId

...

if (intervalId) clearInterval(intervalId)

intervalId = setInterval(function() {})

这给我们留下了以下内容：

var intervalId;

// add a count-down timer
 function startTimer(duration, display) {
 if (intervalId) clearInterval(intervalId);
  var timer = duration, minutes, seconds;
  intervalId = 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);
}
var butt = window.document.getElementById('button');
butt.onclick = function () { //i tried using ' butt.onclick' but this did not work
  var fiftenMinutes = 60 * 15,
      display = document.querySelector('#time');
  startTimer(fiftenMinutes, display);
};

<h3 id="time" class="divTime"></h3>
<button id="button">Button Text</button>