Question

我正在开发一系列Javascript，CSS和HTML迷你游戏。在这些游戏中，我在进度/计时器栏上使用了一个计时器。在此，条形图移动到特定点。问题在于，在所有游戏中，除了其中一个游戏，它都能完美运行，而且代码在所有游戏中都相同。

这是进度/计时器栏的代码：

const leftTime = document.getElementById("leftTime");
const countDown = document.getElementById("countDown");
function initBarCount() {
  let startTimer = setInterval(barCount, 480); //width of bar is 250px
  console.log("start timer: " + startTimer);
  function barCount() {
    if (leftTime.clientWidth < countDown.clientWidth) {
      leftTime.style.width = leftTime.clientWidth + 1 + "px";
      console.log("1: " + leftTime.style.width);
    } else {
      leftTime.style.width = countDown.clientWidth + "px";
      console.log("2: " + leftTime.style.width);
      clearInterval(startTimer);
    }
  }
}

这是计时器的代码。（2分钟）

function startTimerGame() {
  setTimeout(function() {
    if (container.style.display == "none") { //open/close container
      container.style.display = "block";
    } else {
      container.style.display = "none";
    }
    guessField.value = ""; //reset input
    createGame(); //start game variables
    resultText.innerHTML = "El resultado final es: " + finalScore;
    playGameButton.disabled = false;
  }, 120000 /*300000*/);
}

这是您单击以开始游戏的按钮的代码。

playGameButton.onclick = function() {
  resultText.innerHTML = "";
  finalScore = 0;
  leftTime.style.width = 0 + "px";
  startTimerGame();
  initBarCount();
  if (container.style.display == "none" || playGameButton.disabled == false) {
    container.style.display = "block";
    playGameButton.disabled = true;
  } else {
    container.style.display = "none";
    playGameButton.disabled = false;
  }
};

我注意到有问题的游戏发生了一些奇怪的事情：有什么建议吗？如果您能告诉我问题出在哪里，那么我将不胜感激，因为我对如何进行操作和说实话一无所知，这是我的新语言。

Answer 1

这更多是逻辑上的哲学改变，可能会解决您的问题，但我将使用百分比作为进度指示器的宽度。

由于您有一个容器栏和一个进度栏，因此进度不必在乎它有多少像素宽，而只是在计时器总数中占一定百分比。不管容器宽度或计时器持续时间如何，这样的事情都会使进度宽度最终以容器宽度结束。

const progressEl = document.getElementById('progress');
const totalTime = 5000;
let elapsedTime = 0;
const tickInterval = 1000 / 60;

const interval = setInterval(elapse, tickInterval);

function elapse() {
  progressEl.style.width = (elapsedTime / totalTime * 100) + '%';
  elapsedTime = Math.min(Math.round(elapsedTime + tickInterval), totalTime);
  
  if (elapsedTime === totalTime) {
    clearInterval(interval);
  }
}

.container {
width: 250px;
border: 2px solid #95a5a6;
border-radius: 2px;
}

.progress {
background: #16a085;
height: 12px;
}

<div class="container">
  <div class="progress" id="progress"></div>
</div>

Answer 2

也许 clientWidth 属性花费的时间比调用下一个间隔的时间长。尝试将间隔设置得更长一些，以查看是否可以解决问题。

如果您仍然希望使用相同的短间隔，请尝试执行以下操作：

leftTime.style.width = (parseInt(leftTime.style.width,10) + 1) + 'px';

为什么计时器栏会在某个时刻停止？

2 个答案: