如何用HTML/CSS/JS实现符合奇偶增减规则的计数器功能

你只需要修改JavaScript代码中的增减逻辑即可，无需调整HTML和CSS代码，修改后的完整JavaScript代码如下：

let counterElement = document.getElementById("counterValue");

function onIncrement() {
  let previousCounterValue = parseInt(counterElement.textContent);
  let updatedCounterValue;
  // 判断当前值奇偶性
  if (previousCounterValue % 2 !== 0) {
    // 奇数加10
    updatedCounterValue = previousCounterValue + 10;
  } else {
    // 偶数加5
    updatedCounterValue = previousCounterValue + 5;
  }
  counterElement.style.color = "black";
  counterElement.textContent = updatedCounterValue;
}

function onDecrement() {
  let previousCounterValue = parseInt(counterElement.textContent);
  let updatedCounterValue;
  if (previousCounterValue % 2 !== 0) {
    // 奇数减1
    updatedCounterValue = previousCounterValue - 1;
  } else {
    // 偶数减2
    updatedCounterValue = previousCounterValue - 2;
  }
  counterElement.style.color = "black";
  counterElement.textContent = updatedCounterValue;
}

function onReset() {
  let counterValue = 0;
  counterElement.textContent = counterValue;
  counterElement.style.color = "black";
}

核心修改说明 #

• 调整了onIncrement函数的加法逻辑：根据当前计数值的奇偶性分别执行加10、加5操作
• 调整了onDecrement函数的减法逻辑：根据当前计数值的奇偶性分别执行减1、减2操作
• 原有重置逻辑完全符合要求，无需修改

内容的提问来源于stack exchange，提问作者Hari nadh babu