选择不同的值时，setInterval 无法正常工作

Question

请。帮助。如何更正代码。当您 select 一个值并按停止，然后 select 另一个值时，会立即显示上次停止的值，然后从新值开始倒计时。以及当有倒计时时，如何使当时间用完或当我们按下停止时，改变背景的 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 class。

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>

选择不同的值时，setInterval 无法正常工作

setInterval doesn't work correctly when choose different value

html

javascript

css

dom

setinterval