适合JavaScript新手的3个基础实战练习项目

作者：竹影

时间：2026-10-30

适合JavaScript新手的3个基础实战练习项目：交互式计数器、动态待办清单与简易单位换算器。本文提供完整可运行源码、核心API深入剖析、DOM树生命周期与输入校验防错逻辑，帮助初学者快速掌握前端核心编程思维。

文章目录

学习了 JavaScript 的基础语法、变量声明、条件分支与循环之后，初学者往往会遇到一个瓶颈：脱离了语法教程的单行练习，面对空白的网页编辑器，不知如何将零散的知识点拼装成具备完整交互功能的网页应用。要跨越这个阶段，最直接有效的路径并不是盲目跟风去啃复杂的现代前端框架，而是动手完成几个代码量控制在百行以内、目标专注且直击核心原理的小型实战练习。

本文挑选了 3 个专为 JavaScript 新手设计的基础实战项目：交互式数字计数器、动态待办事项清单与简易单位换算器。这三个练习项目分别对应了前端开发中最核心的三个技能梯度：单一状态与事件驱动闭环、DOM 节点的动态生命周期管理与事件委托机制，以及表单实时数据流处理与边界防错。掌握这三个项目，不仅能帮初学者巩固纯原生 JavaScript（Vanilla JS）的核心 API，更能建立起标准的前端交互思维。

图 1：JavaScript 新手三大实战练习项目的能力演进路径全景

项目一：交互式数字计数器（掌握事件监听与状态驱动）

1. 练习目标与技术核心

数字计数器是所有前端交互的最小可用模型。在这个项目中，页面上会显示一个初始值为 0 的数字展示牌，以及“增加（+1）”、“减少（-1）”和“重置（归零）”三个操作按钮。当数值发生变化时，页面上的数字同步刷新；同时，若数值大于 0 呈现绿色，小于 0 呈现红色，为 0 时恢复中性灰色。

完成这个练习，你将切实掌握以下关键能力：

使用 document.getElementById 获取文档中的特定元素节点；
使用 addEventListener('click', callback) 注册用户点击事件监听器；
在 JavaScript 作用域中声明并维护独立的变量状态（State），避免直接将 DOM 内容作为运算数据源；
通过修改 element.textContent 将数据映射到视图，并通过 classList.add/remove 动态控制视觉状态。

2. 完整实现代码

新建 index.html 文件，在同一文件中完整组织结构、样式与脚本：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>项目1：交互式数字计数器</title>
  <style>
    .counter-wrapper {
      width: 280px;
      margin: 40px auto;
      text-align: center;
      padding: 24px;
      border: 1px solid #D5DFE8;
      border-radius: 8px;
      background: #FFFFFF;
    }
    .counter-value {
      font-size: 56px;
      font-weight: bold;
      margin-bottom: 20px;
      transition: color 0.2s ease;
    }
    .counter-value.positive { color: #10B981; }
    .counter-value.negative { color: #EF4444; }
    .counter-value.zero { color: #456581; }
    .btn-group button {
      padding: 8px 14px;
      margin: 0 4px;
      font-size: 14px;
      border: 1px solid #CBD5E1;
      border-radius: 4px;
      background: #F8FAFC;
      cursor: pointer;
    }
    .btn-group button:hover { background: #EDF2F7; }
  </style>
</head>
<body>

  <div class="counter-wrapper">
    <div class="counter-value zero" id="counterDisplay">0</div>
    <div class="btn-group">
      <button id="btnDecrease">- 减少</button>
      <button id="btnReset">重置</button>
      <button id="btnIncrease">+ 增加</button>
    </div>
  </div>

  <script>
    // 1. 缓存需要操作的 DOM 节点引用
    const displayEl = document.getElementById('counterDisplay');
    const btnDecrease = document.getElementById('btnDecrease');
    const btnReset = document.getElementById('btnReset');
    const btnIncrease = document.getElementById('btnIncrease');

    // 2. 在内存中声明核心状态变量
    let count = 0;

    // 3. 封装视图渲染函数（保证状态与呈现的单一数据源）
    function renderView() {
      displayEl.textContent = count;
      displayEl.classList.remove('positive', 'negative', 'zero');
      
      if (count > 0) {
        displayEl.classList.add('positive');
      } else if (count < 0) {
        displayEl.classList.add('negative');
      } else {
        displayEl.classList.add('zero');
      }
    }

    // 4. 为操作按钮绑定独立的点击事件
    btnIncrease.addEventListener('click', () => {
      count++;
      renderView();
    });

    btnDecrease.addEventListener('click', () => {
      count--;
      renderView();
    });

    btnReset.addEventListener('click', () => {
      count = 0;
      renderView();
    });
  </script>
</body>
</html>

3. 核心机制拆解与原理分析

这个案例看似简单，却蕴含了现代前端工程最重要的思想：数据驱动视图（Data-Driven View）。

状态与视图绝对分离：新手最容易犯的错误是直接从 DOM 中读取当前文字（如 parseInt(displayEl.innerText)），计算完毕再写回去。这种做法把 DOM 当成了数据库，一旦界面文本包含单位符号（如“第 5 次”）或未完成渲染，解析逻辑就会彻底崩溃。正确的做法是将 count 保存在 JS 变量中，计算只在变量中发生，DOM 仅充当只读的“输出终端”。
使用 textContent 而非 innerHTML：更新纯文本节点时，必须优先使用 textContent。innerHTML 会强制浏览器启动 HTML 解析引擎，不仅性能损耗明显，而且在处理不可信外部内容时会埋下跨站脚本注入（XSS）隐患。

图 2：交互式计数器的事件监听与状态驱动闭环原理图

易错点提醒

切忌将 let count = 0; 声明在事件监听器回调函数的内部。如果声明在函数体内，每次点击按钮都会重新执行变量初始化，导致计数器永远只能显示 1 或 -1，无法持续累加。

项目二：动态待办事项清单（掌握 DOM 节点增删与事件委托）

1. 练习目标与技术核心

计数器项目只修改了静态页面中已经存在的 DOM 节点内容，而真实项目经常需要根据用户输入动态增删子节点。待办事项清单（To-Do List）是练习 DOM 树操作的不二之选。用户在输入框中键入待办任务并按下回车或点击提交后，清单下方新增一条待办项；每条待办项包含任务文本、“标记完成”按钮和“删除”按钮；点击完成能够切换删除线，点击删除能够将其从文档中移除。

通过这个项目，你将掌握以下核心能力：

使用 form 表单的 submit 事件，并使用 event.preventDefault() 拦截浏览器默认刷新跳转；
使用 document.createElement() 在内存中动态构造 DOM 节点；
使用 appendChild() 将子元素逐层组装并挂载至文档树中；
使用事件委托（Event Delegation）机制处理动态增添节点的点击，避免为每个新节点重复绑定事件监听器；
使用 Element.remove() 从 DOM 树中安全移除节点。

2. 完整实现代码

完整可运行的代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>项目2：动态待办事项清单</title>
  <style>
    .todo-app {
      max-width: 420px;
      margin: 40px auto;
      padding: 24px;
      border: 1px solid #D5DFE8;
      border-radius: 8px;
      background: #FFFFFF;
    }
    .todo-form {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
    }
    .todo-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #CBD5E1;
      border-radius: 4px;
      font-size: 14px;
    }
    .btn-add {
      padding: 8px 16px;
      background: #438A80;
      color: #FFFFFF;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .todo-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .todo-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-bottom: 1px solid #F1F5F9;
    }
    .todo-text {
      flex: 1;
      font-size: 14px;
      color: #334155;
    }
    .todo-item.done .todo-text {
      text-decoration: line-through;
      color: #94A3B8;
    }
    .btn-action {
      padding: 4px 8px;
      margin-left: 6px;
      font-size: 12px;
      border: 1px solid #E2E8F0;
      background: #F8FAFC;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn-del { color: #EF4444; border-color: #FECACA; }
  </style>
</head>
<body>

  <div class="todo-app">
    <form class="todo-form" id="todoForm">
      <input type="text" class="todo-input" id="todoInput" placeholder="输入待办事项并回车..." autocomplete="off">
      <button type="submit" class="btn-add">添加</button>
    </form>
    <ul class="todo-list" id="todoList"></ul>
  </div>

  <script>
    const todoForm = document.getElementById('todoForm');
    const todoInput = document.getElementById('todoInput');
    const todoList = document.getElementById('todoList');

    // 1. 表单提交：创建并挂载新节点
    todoForm.addEventListener('submit', (event) => {
      event.preventDefault(); // 阻止默认表单提交刷新页面

      const text = todoInput.value.trim();
      if (!text) {
        alert('请输入待办事项内容！');
        return;
      }

      // 动态构造元素
      const li = document.createElement('li');
      li.className = 'todo-item';

      const span = document.createElement('span');
      span.className = 'todo-text';
      span.textContent = text;

      const toggleBtn = document.createElement('button');
      toggleBtn.type = 'button';
      toggleBtn.className = 'btn-action btn-toggle';
      toggleBtn.textContent = '完成';

      const delBtn = document.createElement('button');
      delBtn.type = 'button';
      delBtn.className = 'btn-action btn-del';
      delBtn.textContent = '删除';

      // 组装结构并挂载到主 DOM 树
      li.appendChild(span);
      li.appendChild(toggleBtn);
      li.appendChild(delBtn);
      todoList.appendChild(li);

      // 清空输入框并重设焦点
      todoInput.value = '';
      todoInput.focus();
    });

    // 2. 事件委托：统一在父容器 ul 上监听点击事件
    todoList.addEventListener('click', (event) => {
      const target = event.target;
      const item = target.closest('.todo-item');
      if (!item) return;

      if (target.classList.contains('btn-del')) {
        item.remove(); // 从 DOM 树直接销毁节点
      } else if (target.classList.contains('btn-toggle')) {
        item.classList.toggle('done');
        target.textContent = item.classList.contains('done') ? '取消' : '完成';
      }
    });
  </script>
</body>
</html>

3. 核心机制拆解与原理分析

必须使用 event.preventDefault()：在浏览器规范中，<form> 元素在用户点击提交按钮或按下回车时，默认会发起 HTTP GET/POST 请求并刷新整张页面。由于我们的应用完全由客户端 JavaScript 驱动，必须在提交事件的第一行调用该方法，阻止浏览器的原生刷新行为。
为什么绝不能为每个新增按钮单独绑定事件？如果每新增一条待办事项，就执行一次 btn.addEventListener(...)，当用户添加几十上百条记录时，内存中就会残留大量重复的回调函数；更严重的是，当节点被删除时，新手往往忘记解绑事件监听，极易造成浏览器内存泄漏。
事件委托原理（Event Delegation）：浏览器具有“事件冒泡机制”（Event Bubbling），子元素上触发的点击事件会自动向上传播给父容器。我们只需在永久存在的 <ul id="todoList"> 上注册一次监听器，通过检查 event.target 的类名，就能精准获知用户点中的是哪个子项，代码简洁且天然支持未来新增的任意子元素。

图 3：动态待办清单的 DOM 生命周期与事件委托机制对比

工程化小技巧

使用 const item = target.closest('.todo-item') 可以安全稳妥地从被点击的具体按钮向上回溯到包裹它的 <li> 容器，即便按钮内部嵌套了图标元素（如 <i> 标签），也不会因为点击穿透导致获取不到正确的目标节点。

项目三：简易单位换算器（掌握表单实时监听与防错计算）

1. 练习目标与技术核心

前两个项目主要聚焦于 DOM 节点的控制与事件响应，而数据型工具的核心在于用户输入的清洗、类型安全转换、数学计算以及异常边界防护。本项目以“摄氏度（°C）与华氏度（°F）双向实时换算器”为例：用户在摄氏度输入框键入数值时，华氏度输入框实时显示换算结果；反之在华氏度输入框键入数值时，摄氏度也实时同步；当输入非法内容（如非数字字符）或清空时，系统给出明确提示或重置对应结果，避免出现 NaN 乱象。

完成这个练习，你将切实掌握以下关键能力：

理解 input 实时输入事件与 change 失焦事件的本质差异；
掌握 parseFloat() 与 Number() 进行显式类型转换的细节；
使用 isNaN() 和空字符条件判断构建严格的输入防错拦截流程；
使用 Number.prototype.toFixed(2) 解决 JavaScript 浮点数计算产生的长尾小数精度问题。

2. 完整实现代码

完整可运行的代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>项目3：简易温度双向换算器</title>
  <style>
    .converter-card {
      max-width: 380px;
      margin: 40px auto;
      padding: 24px;
      border: 1px solid #D5DFE8;
      border-radius: 8px;
      background: #FFFFFF;
    }
    .field-group {
      margin-bottom: 16px;
    }
    .field-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #456581;
      margin-bottom: 6px;
    }
    .field-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #CBD5E1;
      border-radius: 4px;
      font-size: 15px;
      box-sizing: border-box;
    }
    .exchange-indicator {
      text-align: center;
      color: #438A80;
      font-size: 16px;
      font-weight: bold;
      margin: 12px 0;
    }
    .feedback-msg {
      font-size: 12px;
      color: #64748B;
      min-height: 18px;
      margin-top: 8px;
    }
    .feedback-msg.warn { color: #EF4444; }
  </style>
</head>
<body>

  <div class="converter-card">
    <div class="field-group">
      <label class="field-label" for="celsius">摄氏温度 (°C)</label>
      <input type="number" id="celsius" class="field-input" placeholder="输入摄氏度数值，如 25" step="any">
    </div>

    <div class="exchange-indicator">⇅ 双向实时换算</div>

    <div class="field-group">
      <label class="field-label" for="fahrenheit">华氏温度 (°F)</label>
      <input type="number" id="fahrenheit" class="field-input" placeholder="输入华氏度数值，如 77" step="any">
    </div>

    <div class="feedback-msg" id="feedback">提示：在上方任意输入框键入数值即可实时换算。</div>
  </div>

  <script>
    const celsiusInput = document.getElementById('celsius');
    const fahrenheitInput = document.getElementById('fahrenheit');
    const feedbackEl = document.getElementById('feedback');

    // 换算核心公式纯函数（纯函数便于测试与维护）
    const cToF = (c) => (c * 1.8) + 32;
    const fToC = (f) => (f - 32) / 1.8;

    // 1. 监听摄氏度输入
    celsiusInput.addEventListener('input', () => {
      const raw = celsiusInput.value.trim();

      if (raw === '') {
        fahrenheitInput.value = '';
        feedbackEl.className = 'feedback-msg';
        feedbackEl.textContent = '提示：在上方任意输入框键入数值即可实时换算。';
        return;
      }

      const val = parseFloat(raw);
      if (isNaN(val)) {
        fahrenheitInput.value = '';
        feedbackEl.className = 'feedback-msg warn';
        feedbackEl.textContent = '输入错误：请输入合法的数字！';
        return;
      }

      const result = cToF(val);
      fahrenheitInput.value = result.toFixed(2);
      feedbackEl.className = 'feedback-msg';
      feedbackEl.textContent = `${val} °C = ${result.toFixed(2)} °F`;
    });

    // 2. 监听华氏度输入
    fahrenheitInput.addEventListener('input', () => {
      const raw = fahrenheitInput.value.trim();

      if (raw === '') {
        celsiusInput.value = '';
        feedbackEl.className = 'feedback-msg';
        feedbackEl.textContent = '提示：在上方任意输入框键入数值即可实时换算。';
        return;
      }

      const val = parseFloat(raw);
      if (isNaN(val)) {
        celsiusInput.value = '';
        feedbackEl.className = 'feedback-msg warn';
        feedbackEl.textContent = '输入错误：请输入合法的数字！';
        return;
      }

      const result = fToC(val);
      celsiusInput.value = result.toFixed(2);
      feedbackEl.className = 'feedback-msg';
      feedbackEl.textContent = `${val} °F = ${result.toFixed(2)} °C`;
    });
  </script>
</body>
</html>

3. 核心机制拆解与原理分析

必须绑定 input 事件而非 change 事件：change 事件仅在用户修改内容后按下回车或鼠标点击别处使输入框失去焦点（Blur）时才会被触发；而 input 事件在键盘敲击、文本粘贴或删除字符的瞬间立刻触发，能够达成平滑即时的“边打字边出结果”体验。
防御加法字符串拼接陷阱：从 HTML 输入框读取到的 input.value 始终是字符串类型（String）。如果不做转换直接进行数学加法（例如 val + 32），JavaScript 会执行字符串拼接，导致 '25' + 32 变成 '2532'。必须在第一步通过 parseFloat() 强制转型。
精度截断与 toFixed(2)：在 IEEE 754 浮点数规范下，JavaScript 计算诸如 (100 - 32) / 1.8 时会得到 37.77777777777778 这种冗长的浮点尾数。调用 toFixed(2) 可以将其规范格式化为保留 2 位小数的易读字符串。

图 4：简易换算器的数据流向与防错校验处理流程

易错点提醒

Number.prototype.toFixed() 的返回值是字符串（String）而非数字。如果后续还需要拿计算结果做二次数学运算，切记不能直接拿 toFixed() 的结果相加，否则又会掉入字符串拼接的隐蔽 Bug 中。

3个练习项目的综合技术对比与进阶路线

1. 核心技术点横向对比

这 3 个基础实战项目从简单到复杂，层层递进地覆盖了初学者必须攻克的前端开发基本功：

练习项目	主要 DOM API 与语法	核心前端思维	典型易错点
1. 交互式计数器	`getElementById`、`addEventListener`、`textContent`、`classList`	状态驱动视图、单向数据流动模型	直接从 DOM 读取数字计算；变量作用域写在监听器内
2. 动态待办清单	`preventDefault`、`createElement`、`appendChild`、`remove`	DOM 树生命周期、事件冒泡机制、事件委托	未拦截表单默认提交导致刷新；为每个动态节点绑定事件
3. 简易单位换算器	`input` 事件、`parseFloat`、`isNaN`、`toFixed`	用户输入防御、类型安全清洗、即时响应闭环	误用 `change` 事件；忽略字符串加法拼接隐患

图 5：3 个基础实战练习项目的核心技术对比与进阶方向总结

2. 后续实战拓展建议

当你能够不参考教程源码独立写出上述 3 个项目后，可以尝试在现有代码的基础上引入以下功能进行二期迭代练习：

引入 localStorage 持久化存储：在待办清单中，每次新增或删除项时，将 JavaScript 数组通过 JSON.stringify() 存入浏览器的 localStorage；页面重新加载时再通过 JSON.parse() 恢复列表。这是理解客户端持久化机制的最佳途径。
增加键盘快捷键交互：在计数器项目中监听全局 keydown 事件，让用户按下键盘上的 +、- 或 0 键时也能触发对应的计算，体验多输入源统一驱动状态的架构。
支持多种单位与联动选择：在换算器项目中加入 <select> 下拉选择框，支持长度（厘米/英寸/英尺）、重量（千克/磅）等多维度的动态换算，练习基于条件判断的策略模式。