当选择不同的值时，setInterval不能正常工作。

Question

请大家帮忙。如何纠正代码。当你选择一个值按停止，再选择另一个值时，会立即显示上次停止的值，然后从新的值开始倒计时。而当有倒计时时，如何让它在时间用完或我们按停止键时，改变背景的div，初始总是保持绿色（当值为偶数时，最后保持红色），即当setInterval完成后，一切看起来都是原来的状态。

const amountOfRotation = document.querySelector('.feature-block-list');
const countdownNumbValue = document.querySelector('.countdown-numb-value');
const countdown = document.querySelector('.countdown');
const autoButton = document.querySelector('.auto-button');
const countdownTxt = document.querySelector('.countdown-txt');
const changeColor = document.querySelector('.change-color');

amountOfRotation.addEventListener('click', ({
  target: {
    dataset
  }
}) => {
  autoButton.classList.add('stop');
  countdown.classList.remove('stop');
  amountOfRotation.classList.add('disable-btn');

  let timerId = setInterval(() => {
    countdownNumbValue.innerHTML = dataset.count--;
    changeColor.classList.toggle('red');
    if (dataset.count < 0) {
      clearInterval(timerId);
      countdown.classList.add('stop');
      autoButton.classList.remove('stop');
      amountOfRotation.classList.remove('disable-btn');
    };
  }, 1500);

  countdownTxt.addEventListener('click', () => {
    clearInterval(timerId);
    countdown.classList.add('stop');
    autoButton.classList.remove('stop');
    amountOfRotation.classList.remove('disable-btn');
  })
});

.feature-block-paragraph {
  margin-left: 6px;
}

.feature-block-paragraph li {
  color: #ffd100;
}

.feature-block-paragraph ul li:hover {
  color: black;
  cursor: pointer;
}

.countdown-txt {
  color: #3d0000;
  cursor: pointer;
}

.countdown {
  display: flex;
  align-items: center;
  margin-left: 9%;
}

.countdown-numb {
  border: 1px solid black;
  border-radius: 50px;
  color: #ffd100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

.stop {
  display: none;
}

.disable-btn {
  pointer-events: none;
  opacity: 0.4;
}

.change-color {
  border: 1px solid black;
  border-radius: 100%;
  background: green;
  width: 20px;
  height: 20px;
}

.red {
  background: red;
}

<div class="feature-block-paragraph">
  <ul class="feature-block-list">
    <li class="sound-div" data-count="25">25</li>
    <li class="sound-div" data-count="20">20</li>
    <li class="sound-div" data-count="15">15</li>
    <li class="sound-div" data-count="10">10</li>
    <li class="sound-div" data-count="5">5</li>
  </ul>
</div>
<div class="auto-button">
  <span class="auto-button-txt">AUTO</span>
</div>
<div class="countdown stop">
  <div class="countdown-numb">
    <span class="countdown-numb-value"></span>
  </div>
  <span class="countdown-txt">STOP</span>
</div>
<div class="change-color">

</div>

Answer 1

为了解决第一个问题，将 data-count 值到点击处理程序中的DIV，而不仅仅是间隔函数。

我还修改了代码，以递减和检查 innerHTML 而非 dataset.count. 你这样做，你不能重复使用相同的计数，因为。data-count 是被减法代码永久改变的。

要解决第二个问题，只要把 red 计时器耗尽时，类。

const amountOfRotation = document.querySelector('.feature-block-list');
const countdownNumbValue = document.querySelector('.countdown-numb-value');
const countdown = document.querySelector('.countdown');
const autoButton = document.querySelector('.auto-button');
const countdownTxt = document.querySelector('.countdown-txt');
const changeColor = document.querySelector('.change-color');

amountOfRotation.addEventListener('click', ({
  target: {
    dataset
  }
}) => {
  autoButton.classList.add('stop');
  countdown.classList.remove('stop');
  amountOfRotation.classList.add('disable-btn');
  countdownNumbValue.innerHTML = dataset.count

  let timerId = setInterval(() => {
    countdownNumbValue.innerHTML--;
    changeColor.classList.toggle('red');
    if (countdownNumbValue.innerHTML <= 0) {
      clearInterval(timerId);
      countdown.classList.add('stop');
      autoButton.classList.remove('stop');
      amountOfRotation.classList.remove('disable-btn');
      changeColor.classList.remove('red');
    };
  }, 1500);

  countdownTxt.addEventListener('click', () => {
    clearInterval(timerId);
    countdown.classList.add('stop');
    autoButton.classList.remove('stop');
    amountOfRotation.classList.remove('disable-btn');
    changeColor.classList.remove('red');
  })
});

.feature-block-paragraph {
  margin-left: 6px;
}

.feature-block-paragraph li {
  color: #ffd100;
}

.feature-block-paragraph ul li:hover {
  color: black;
  cursor: pointer;
}

.countdown-txt {
  color: #3d0000;
  cursor: pointer;
}

.countdown {
  display: flex;
  align-items: center;
  margin-left: 9%;
}

.countdown-numb {
  border: 1px solid black;
  border-radius: 50px;
  color: #ffd100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

.stop {
  display: none;
}

.disable-btn {
  pointer-events: none;
  opacity: 0.4;
}

.change-color {
  border: 1px solid black;
  border-radius: 100%;
  background: green;
  width: 20px;
  height: 20px;
}

.red {
  background: red;
}

<div class="feature-block-paragraph">
  <ul class="feature-block-list">
    <li class="sound-div" data-count="25">25</li>
    <li class="sound-div" data-count="20">20</li>
    <li class="sound-div" data-count="15">15</li>
    <li class="sound-div" data-count="10">10</li>
    <li class="sound-div" data-count="5">5</li>
  </ul>
</div>
<div class="auto-button">
  <span class="auto-button-txt">AUTO</span>
</div>
<div class="countdown stop">
  <div class="countdown-numb">
    <span class="countdown-numb-value"></span>
  </div>
  <span class="countdown-txt">STOP</span>
</div>
<div class="change-color">

</div>