单击 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

如果你想要每次点击不同的计时器，你需要动态添加一个元素到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 2

首先您需要添加一个 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>

Answer 3

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

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>

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

how to do i fire this code on click of a button in javascript

html

javascript

timer

click

countdowntimer