必须用 JavaScript 绑定 click 事件，读取并转为数值后加 1 再写回 DOM；防重复点击需禁用按钮并立即更新显示；刷新保留数据用 localStorage；多人场景必须依赖服务端接口并处理幂等性。
点击按钮时数字加一但不刷新页面
必须用 JavaScript 操作 DOM，不能靠表单提交或跳转。核心是给 button 绑定 click 事件，读取当前显示的数字、转成数值、加 1，再写回页面。常见错误是把数字当字符串拼接（比如“10”+1 变成“101”），所以务必用 parseInt() 或一元加号 + 转类型。
示例结构：
<button id="likeBtn">?</button> <span id="count">0</span>
对应 JS：
document.getElementById('likeBtn').addEventListener('click', () => {
const el = document.getElementById('count');
const current = +el.textContent; // 用 + 号隐式转换，比 parseInt 更简洁
el.textContent = current + 1;
});
防止重复点击导致计数错乱
用户快速连点、或网络延迟下多次触发，可能让计数跳变（比如点两下只加 1）。这不是 UI 问题，而是 JS 执行时机和状态同步问题。最直接的解法是禁用按钮 + 立即更新显示，避免视觉与状态脱节。
立即学习“前端免费学习笔记（深入）”；
- 点击后立即将
button.disabled = true，阻止重复触发 - 更新完数字再恢复
button.disabled = false（如果需要支持反复点赞） - 若需防抖，可用
setTimeout延迟恢复，但简单场景没必要
注意：不要用 event.preventDefault()——按钮默认不提交，它没作用；也不要依赖 CSS 的 pointer-events: none，它不阻止 JS 事件监听。
页面刷新后保留上次点赞数
纯前端累加在刷新后归零，除非存到持久化位置。localStorage 是最轻量的选择，适合单机演示或低频场景；别用 sessionStorage，关掉标签页就丢数据。
读取和保存都要处理非数字情况：
const countEl = document.getElementById('count');
let count = parseInt(localStorage.getItem('likeCount')) || 0;
countEl.textContent = count;
document.getElementById('likeBtn').addEventListener('click', () => {
count++;
countEl.textContent = count;
localStorage.setItem('likeCount', count); // 字符串存储，但 parseInt 已兼容
});
坑点：localStorage 只存字符串，且跨域名隔离；如果多个按钮共用一个 key，得加前缀区分，比如 likeCount_post_123。
多人协作时不能只靠前端计数
只要涉及真实用户、多设备或多人，前端累加完全不可信——谁都能打开控制台改 count++。此时必须走服务端接口，按钮点击发 fetch('/api/like', {method: 'POST'})，后端校验权限、去重、落库，再返回最新总数。
前端这时只做三件事：
- 点击时禁用按钮并显示加载态（如文字变“点赞中…”）
- 成功后更新
textContent并恢复按钮 - 失败时提示错误，但不修改本地计数（避免脏数据）
很多人卡在“为什么我点了五次，后台只加了两次”，其实是没处理接口幂等性或重复请求拦截——这已经不是 HTML+JS 能解决的问题了。
