如何实现带±1按钮的计数器应用？求LocalStorage之外的简便方案

无需持久化的简易实现（页面刷新重置） #

如果不需要保留页面刷新后的计数，直接用内存变量存储当前值即可，这是最简便的方式：

<div id="counter-display">0</div>
<button id="minus-btn">-1</button>
<button id="plus-btn">+1</button>

<script>
// 初始化计数器值
let counterValue = 0;
const display = document.getElementById('counter-display');
const minusBtn = document.getElementById('minus-btn');
const plusBtn = document.getElementById('plus-btn');

// 更新显示函数
function updateDisplay() {
  if (counterValue < 0) {
    display.textContent = `0-${Math.abs(counterValue)}`;
  } else if (counterValue > 0) {
    display.textContent = `0+${counterValue}`;
  } else {
    display.textContent = '0';
  }
}

// 绑定按钮事件
minusBtn.addEventListener('click', () => {
  counterValue--;
  updateDisplay();
});

plusBtn.addEventListener('click', () => {
  counterValue++;
  updateDisplay();
});

// 初始显示
updateDisplay();
</script>

需要持久化的简化实现（页面刷新后保留计数） #

如果需要页面刷新后仍保留计数，不用记录每次点击操作，直接存储当前的计数器数值即可，比记录每次点击更高效：

<div id="counter-display">0</div>
<button id="minus-btn">-1</button>
<button id="plus-btn">+1</button>

<script>
// 从localStorage读取初始值，不存在则设为0
let counterValue = parseInt(localStorage.getItem('counterValue')) || 0;
const display = document.getElementById('counter-display');
const minusBtn = document.getElementById('minus-btn');
const plusBtn = document.getElementById('plus-btn');

// 更新显示并同步到localStorage
function updateDisplay() {
  // 更新显示文本
  if (counterValue < 0) {
    display.textContent = `0-${Math.abs(counterValue)}`;
  } else if (counterValue > 0) {
    display.textContent = `0+${counterValue}`;
  } else {
    display.textContent = '0';
  }
  // 同步到localStorage
  localStorage.setItem('counterValue', counterValue);
}

// 绑定按钮事件
minusBtn.addEventListener('click', () => {
  counterValue--;
  updateDisplay();
});

plusBtn.addEventListener('click', () => {
  counterValue++;
  updateDisplay();
});

// 初始显示
updateDisplay();
</script>

补充：闹钟功能扩展 #

如果后续要添加闹钟功能，可以利用浏览器的setTimeout API实现，比如设置目标时间、计算时间差后触发提示，这部分逻辑和计数器完全独立，可按需开发。

内容的提问来源于stack exchange，提问作者Alan Min