Question

我对这段代码有点麻烦。我目前有一个按钮，点击时启动一个计时器。然后它还会将按钮的图标从开始图标更改为停止图标。我想在再次点击按钮时停止此计时器并让它从开始到停止切换回图标。我已经被困了一段时间并尝试了很多东西但是无法让它工作并且会感激任何帮助。我确信它是一个简单的问题，我只是刚接触javascript。谢谢。

(function () {
"use strict";
  var minutesLabel = document.getElementById('t1-min'),
    secondsLabel = document.getElementById('t1-sec'),
    resetButton = document.getElementById('t1-reset'),
    startButton = document.getElementById('t1-play'),
    timer = null;


function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    return {
        'total': t,
        'minutes': minutes,
        'seconds': seconds
    };

}

function initializeClock(endtime) {
        var timeinterval = setInterval(function () {
            var t = getTimeRemaining(endtime);
            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
            minutesLabel.innerHTML = t.minutes;
            secondsLabel.innerHTML = pad(t.seconds);
        }, 1000);
}

startButton.onclick = function runClock() {
    var timeInMinutes = minutesLabel.innerHTML,
        currentTime = Date.parse(new Date()),
        deadline = new Date(currentTime + timeInMinutes * 60 * 1000);
    initializeClock(deadline);
    startButton.innerHTML = ('<i class="far fa-stop-circle fa-2x float-right">');
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    } else {
        return valString;
    }
}

}）（）;

Answer 1

首先，通过在startButton方法上添加一个函数，确保事件监听器正确放置在addEventLister元素上：

startButton.addEventListener("click", function() {
   //code goes here
});

然后初始化代码的全局范围中的timeinterval变量，以便可以从所有函数访问它，并添加const，您可以在其中保存startButton的初始文字：

(function () {
  "use strict";
  const START_BUTTON_INITIAL_TEXT = "Start";  // initial constant text of the start button
  var minutesLabel = document.getElementById('t1-min'),
  secondsLabel = document.getElementById('t1-sec'),
  resetButton = document.getElementById('t1-reset'),
  startButton = document.getElementById('t1-play'),
  timer = null,
  timeinterval; // declared in the global scope

然后为id图标元素添加等于t1-stop的{{1}}，以确保来自DOM的Javascript文件可以准确访问它：

stopButton

最后在startButton.innerHTML = ('<i id="t1-stop" class="far fa-stop-circle fa-2x float-right">'); addEventListener函数中添加此if语句，以检查点击startButton时DOM中是否存在停止按钮：

startButton

上面的代码会停止startButton.addEventListener("click", function() { if (document.getElementById("t1-stop") != null) { clearInterval(timeinterval); var stopButton = document.getElementById("t1-stop"); startButton.removeChild(stopButton); startButton.innerHTML = START_BUTTON_INITIAL_TEXT; }并从DOM中移除timeinterval，然后替换stopButton的{{1}}，并将初始文本设置为顶部变量的常量声明。

总而言之，innerHTML的事件监听器功能看起来应该是这样的：

startButton

尝试使用相同的按钮暂停和恢复计时器

1 个答案: