如何在JavaScript中為秒表制作播放和暫停按鈕-有解無憂

我正在嘗試在我的代碼中實作播放和暫停功能。但是暫停一次后就不會再開始了。我試圖將更新計時器函式存盤在一個物件中，然后從類外部呼叫它，以便我可以暫停它。如何改進我的實施？

var playPause = document.querySelector(".playpause");
var x = document.querySelector(".div");
var y = document.querySelector(".div1");
var countdown = document.querySelector(".countdown");
const initialTime = 20;
let time = 0;
let lala = 1;
let gate = false;

const timerClass = {
  updatecountDown: setInterval(function() {
    const min = Math.floor(time / 60);
    let sec = time % 60;
    sec = sec < 10 ? "0"   sec : sec;
    countdown.innerHTML = `${min}:${sec}`;
    let ini = (time * 100) / initialTime;
    let percentage = ini * (1 / 100) * y.offsetWidth;
    x.style.width = percentage   "px";
    if (time == initialTime) clearInterval(updatecountDown);
    time  ;
  }, 1000),
};
timerClass.updatecountDown;

playPause.addEventListener("mouseup", function() {
  if (gate == false) {
    clearInterval(timerClass.updatecountDown);
    playPause.innerHTML = `Play`;
    gate = true;
  } else {
    // Want to write something here so that timer start again
    timerClass.updatecountDown;
    playPause.innerHTML = `Pause`;
    gate = false;
  }
});

.div {
  background: orange;
  width: 60px;
  height: 20px;
}

.div1 {
  background-color: gray;
}

.dot {
  background-color: hotpink;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  left: 100px;
  display: inline-block;
}

.countdown {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
}

<body>
  <pc class='countdown'>10.10</pc>
  <div class="div1">
    <div class="div">
      <span class="dot">
      </span>
    </div>
  </div>
  <button class="playpause">Pause</button>
</body>

uj5u.com熱心網友回復：

為此，您需要提取傳入的函式setInterval。通過這樣做，您可以在需要重新啟動它時直接呼叫它。問題是一旦你清除了區間，它timerClass.updatecountDown就是空的并且沒有區間函式的概念。

var playPause = document.querySelector(".playpause");
var x = document.querySelector(".div");
var y = document.querySelector(".div1");
var countdown = document.querySelector(".countdown");
const initialTime = 20;
let time = 0;
let lala = 1;
let gate = false;

const intervalFn = function() {
  const min = Math.floor(time / 60);
  let sec = time % 60;
  sec = sec < 10 ? "0"   sec : sec;
  countdown.innerHTML = `${min}:${sec}`;
  let ini = (time * 100) / initialTime;
  let percentage = ini * (1 / 100) * y.offsetWidth;
  x.style.width = percentage   "px";
  if (time == initialTime) clearInterval(timerClass.updatecountDown);
  time  ;
};

const timerClass = {
  updatecountDown: setInterval(intervalFn, 1000),
};

playPause.addEventListener("mouseup", function() {
  if (gate == false) {
    clearInterval(timerClass.updatecountDown);
    playPause.innerHTML = `Play`;
    gate = true;
  } else {
    // Want to write something here so that timer start again
    timerClass.updatecountDown = setInterval(intervalFn, 1000);
    playPause.innerHTML = `Pause`;
    gate = false;
  }
});

.div {
  background: orange;
  width: 60px;
  height: 20px;
}

.div1 {
  background-color: gray;
}

.dot {
  background-color: hotpink;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  left: 100px;
  display: inline-block;
}

.countdown {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
}

<body>
  <pc class='countdown'>10.10</pc>
  <div class="div1">
    <div class="div">
      <span class="dot">
      </span>
    </div>
  </div>
  <button class="playpause">Pause</button>
</body>

uj5u.com熱心網友回復：

我假設你想updatecountDown成為一個函式。目前，它是一個保存計時器 ID（由回傳setInterval）的屬性。

我建議像這樣創建兩個函式 start 和 stop

const timerClass = {
  // holds the timer Id
  updatecountDown: null,
  // start/resume timer
  start: function() {
    this.updatecountDown = setInterval(function() {
      const min = Math.floor(time / 60);
      let sec = time % 60;
      sec = sec < 10 ? "0"   sec : sec;
      countdown.innerHTML = `${min}:${sec}`;
      let ini = (time * 100) / initialTime;
      let percentage = ini * (1 / 100) * y.offsetWidth;
      x.style.width = percentage   "px";
      if (time == initialTime) this.stop();
      time  ;
    }.bind(this), 1000);
  },
  // pause timer
  stop: function() {
    clearInterval(this.updatecountDown);
  }
};

// Starting timer
timerClass.start();
// timerClass.updatecountDown;

// changing from mouseup to click
playPause.addEventListener("click", function() {
  
  if (gate == false) {
    // clearInterval(timerClass.updatecountDown);
    timerClass.stop();
    playPause.innerHTML = `Play`;
    gate = true;
  } else {
    // Want to write something here so that timer start again
    // timerClass.updatecountDown;
    timerClass.start();
    playPause.innerHTML = `Pause`;
    gate = false;
  }
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390284.html

標籤：javascript html css

上一篇：為什么img元素在它是行內塊元素時不允許文本環繞它？

下一篇：如何在影片發生后修改:hover值并更改h1的字體大小？