计数器

学习目标

• 用 document.querySelector 获取 DOM 元素
• 用 addEventListener 绑定按钮点击事件
• 用一个变量维护计数器状态，事件触发时更新
• 理解 DOM 操作和事件驱动编程的基本模式

前置要求

• 了解 HTML 基本标签
• 了解 JavaScript 变量和函数
• 会用 <script> 标签引入 JS

步骤

2. 1

   搭建 HTML 结构

   创建 index.html，放一个显示数字的 <span> 和两个按钮。给元素加 id 方便 JS 获取。

   代码复制

   <p>当前计数：<span id="count">0</span></p>
   <button id="increment">加一</button>
   <button id="decrement">减一</button>

   预期结果

   页面显示数字 0 和两个按钮，但点击没有反应。

   显示提示
4. 2

   获取 DOM 元素并初始化状态

   在 <script> 中用 querySelector 获取显示数字的 span 和两个按钮。声明一个变量 count = 0 保存当前计数。

   代码复制

   const countEl = document.querySelector('#count');
   const incBtn = document.querySelector('#increment');
   const decBtn = document.querySelector('#decrement');
   let count = 0;

   预期结果

   JS 成功获取三个 DOM 元素，count 初始化为 0。

   显示提示
6. 3

   绑定按钮点击事件

   给“加一”按钮绑定 click 事件：count 加一后更新 span 文本。给“减一”按钮绑定：count 大于 0 时才减一，防止负数。

   代码复制

   incBtn.addEventListener('click', () => {
     count++;
     countEl.textContent = count;
   });
   
   decBtn.addEventListener('click', () => {
     if (count > 0) {
       count--;
       countEl.textContent = count;
     }
   });

   预期结果

   点击“加一”数字递增，点击“减一”数字递减且不会小于 0。

   显示提示
8. 4

   测试边界情况

   测试：连续点击“减一”到 0 后再点不应变为 -1；连续点击“加一”数字应持续递增。确认逻辑正确。

   预期结果

   计数器在 0 处不会变为负数，加一正常递增。

   显示提示

相关资源