在颤动中更改步进器输入文本的颜色

<div class="stepper-container">
  <button onclick="decrement()">-</button>
  <input type="text" id="stepperValue" value="0" readonly>
  <button onclick="increment()">+</button>
</div>

.stepper-container input {
  width: 50px;
  text-align: center;
  transition: color 0.3s; /* 添加过渡效果 */
}

.color-red {
  color: red;
}

.color-blue {
  color: blue;
}

function increment() {
  let value = parseInt(document.getElementById('stepperValue').value);
  value++;
  document.getElementById('stepperValue').value = value;
  changeColor(value);
}

function decrement() {
  let value = parseInt(document.getElementById('stepperValue').value);
  value--;
  document.getElementById('stepperValue').value = value;
  changeColor(value);
}

function changeColor(value) {
  const inputElement = document.getElementById('stepperValue');
  if (value % 2 === 0) {
    inputElement.classList.remove('color-blue');
    inputElement.classList.add('color-red');
  } else {
    inputElement.classList.remove('color-red');
    inputElement.classList.add('color-blue');
  }
}