JavaScript 初学者实战项目：今天就动手！

阅读 JavaScript 教程和亲手完成一个教程，是完全不同的两种体验。

前者让你感觉收获满满，而后者才是你真正学到东西的时候。你是不是已经啃了很久的 JS 课程，但写出来的代码依然只能运行在别人的练习框里？别担心，这种日子马上就要结束了。

光知道什么是循环毫无用处，直到你用它做出实际运行的东西。教程教你词汇，而项目让你学会用这门语言交流。

因此，我们为你整理了 18 个适合初学者的 JavaScript 项目，每个项目都附带简短的实现指南，让你知道从何下手。挑一个，动手做，然后再挑战下一个。

先打牢 JavaScript 基础

所有初学者级别的 JS 项目都离不开变量、函数、条件语句、循环、数组、对象以及一些常用的 DOM 方法。如果这些基础还没变成你的肌肉记忆，你就会把大部分时间花在和语法死磕上，而不是在构建项目上。

Coddy 的 JavaScript 课程就是为此而设计的。五分钟一节的微课，带你循序渐进地掌握核心语言知识。你可以直接在浏览器中边学边写代码并运行。无需繁琐的安装，无需配置环境，更不用“先安装 Node”。

我们的内置 AI 助手 Bugsy 会在每堂课中陪伴着你，随时解答你的疑惑。

如果你能毫不犹豫地阅读、编写并解释以下内容，说明你已经准备好了。如果还不行，建议先去 Coddy 上温习一下 JS 基础知识。

• 变量和基本数据类型（string、number、boolean）
• if/else 和 switch 语句
• for、while 和 for...of 循环
• 函数和箭头函数
• 数组及常用方法（push、pop、map、filter、find）
• 对象以及点号/方括号表示法
• 基础 DOM 操作（querySelector、addEventListener、textContent）

都掌握了吗？太棒了。我们开始动手吧！

入门项目：你好，DOM

这些项目故意设计得很小。它们只侧重一两个概念，这样一旦代码出错，你就能快速找到原因。千万不要因为它们听起来简单就跳过哦！

1. 经典计数器

项目简介： 屏幕上显示一个数字，配有一个加号按钮和一个减号按钮。

推荐理由： 这是将 HTML、CSS 和 JavaScript 结合使用的最小应用。你将接触到状态（一个会发生变化的变量）、DOM 更新和事件监听器。代码大概只有二十行左右。

实现指南： 用一个 span 标签显示数字，再放两个按钮。定义一个 let count = 0。为每个按钮绑定点击监听器，用来增加或减少 count 的值，然后更新 span 的 textContent。进阶挑战： 添加一个重置按钮，并限制数字不能小于零。

2. 小费计算器

项目简介： 输入账单金额和小费比例，计算并显示小费金额及总金额。

推荐理由： 让你接触表单输入和 parseFloat，这几乎是每个初学者第一次都会踩坑的地方。你还会意识到，如果忘记处理 NaN（非数字），计算逻辑是多么容易崩溃。

实现指南： 准备两个数字输入框（账单金额、小费比例）、一个按钮和两个用于输出的 span。点击按钮时，解析这两个输入值，进行计算，使用 .toFixed(2) 保留两位小数，最后显示结果。进阶挑战： 增加一个多人平摊费用的功能。

3. 调色板生成器

项目简介： 点击按钮，随机生成一个新颜色，并以色块和十六进制（Hex）代码的形式展示出来。

推荐理由： 在一个微型应用中融合了随机数、模板字面量和行内样式。视觉效果立竿见影，非常有趣。

实现指南： 编写一个函数，生成三个 0 到 255 之间的随机整数，然后拼接成类似 rgb(${r}, ${g}, ${b}) 的字符串。将其设置为色块的背景颜色。进阶挑战： 生成一个包含五种颜色的完整调色板，而不仅仅是一个色块。

4. 随机名人名言生成器

项目简介： 点击按钮，从预设的数组中随机抽取一条名言并替换当前显示的内容。

推荐理由： 练习数组和 Math.random 的绝佳机会，而且这是一个可以轻松分享给朋友的实用小工具。

实现指南： 定义一个包含名言对象的数组，每个对象有 text（内容）和 author（作者）属性。点击按钮时，随机选择一个索引并更新页面上的两个元素。进阶挑战： 添加一个“分享到 Twitter”的链接，点击后自动填入该名言。

5. 数字时钟

项目简介： 在屏幕上显示当前时间，并每秒更新一次。

推荐理由： 你将在这里首次接触 setInterval 和 Date 对象，这两个工具在以后的开发中会经常用到。如何给个位数的分钟和秒数前面补零，也是一个很有意思的小挑战。

实现指南： 编写一个函数来获取 new Date()，格式化小时、分钟和秒，然后写入 span 标签中。使用 setInterval(updateClock, 1000) 来定时调用该函数。进阶挑战： 添加 12 小时制和 24 小时制的切换开关。

6. BMI 计算器

项目简介： 输入身高和体重，计算出 BMI 值并显示对应的健康区间标签。

推荐理由： 这是一个使用条件语句来决定显示哪个标签的实际案例。同时，这也是练习设计整洁表单布局的好机会。

实现指南： 准备身高（厘米）和体重（公斤）的数字输入框。提交时，使用标准公式计算 BMI，通过 if/else 链判断健康区间，最后显示这两个值。进阶挑战： 增加英制单位（磅/英寸）的切换功能。

中级项目：更复杂的交互

在完成了几个项目之后，你会发现一些重复的模式：点击按钮改变变量，函数根据该变量更新 UI，如此循环。这就是前端开发的核心逻辑。接下来的这些项目需要你同时管理更多的状态。

7. 待办事项清单 (To-do List)

项目简介： 输入任务，按下回车，任务就会出现在列表中。点击某项任务可以将其标记为已完成，点击“X”可以将其删除。

推荐理由： 它是前端框架界的“Hello World”，这并非没有原因。你将管理一个数组，将其渲染到 DOM 中，并处理两到三个事件。如果你能从零开始写出一个待办事项清单，说明你已经脱离了纯小白阶段。

实现指南： 维护一个包含任务对象的数组，每个对象有 id、text 和 done 属性。每次数据改变后，重新渲染 <ul> 列表。按下回车时，向数组中 push 一个新任务。点击时，切换 done 状态或使用 splice 删除该项。进阶挑战： 将数据持久化存储到 localStorage 中，这样即使刷新页面，任务也不会丢失。

8. 带计圈功能的秒表

项目简介： 一个具有开始、停止、重置和计圈（Lap）功能的秒表。

推荐理由： 比普通时钟更难，因为你需要自己管理已过去的时间变量，而不是直接向系统获取。你将接触到 Date.now()、定时器和暂停逻辑。

实现指南： 存储一个 startTime（开始时间）和一个 elapsed（已过时间）累加器。点击开始时，设置 startTime = Date.now() 并启动定时器。点击停止时，计算 elapsed += Date.now() - startTime。点击计圈时，将当前读数推入数组并渲染出来。进阶挑战： 优雅地格式化毫秒显示。

9. 番茄钟

项目简介： 工作 25 分钟，休息 5 分钟，循环往复。时间到时发出提示音。

推荐理由： 适合初学者的状态机练习。应用会处于“工作”、“休息”或“暂停”状态，UI 会根据当前模式进行切换。

实现指南： 采用与秒表类似的定时器模式，但进行倒计时。记录当前所处的模式。当倒计时归零时，切换模式并使用 new Audio('beep.mp3').play() 播放简短的提示音。进阶挑战： 记录当天完成的番茄钟个数。

10. 测验应用 (Quiz App)

项目简介： 一个多选题测验，并在最后给出你的得分。

推荐理由： 结合了数组遍历、条件判断以及简单的“屏幕状态”概念（当前问题界面、结果结算界面）。

实现指南： 定义一个包含问题对象的数组，每个对象有 text、options 和 correctIndex。一次只显示一个问题。点击答案时，比对 correctIndex，如果正确则加分，并进入下一题。所有问题回答完毕后，显示结果页面。进阶挑战： 为每个问题设置倒计时。

11. 密码生成器

项目简介： 选择密码长度和要包含的字符类型，生成一个随机密码。

推荐理由： 将字符串操作、随机数和复选框输入融为一体。而且它非常实用，这在练习项目中可不多见。

实现指南： 构建四个字符池（小写字母、大写字母、数字、符号）。根据勾选的复选框拼接启用的字符池。循环 n 次，每次从合并后的字符池中随机抽取一个字符。进阶挑战： 增加一个密码强度指示器，为生成的密码评级。

12. 表单验证器

项目简介： 一个注册表单，会将无效的输入框标红，并在下方显示错误提示信息。

推荐理由： 实际开发中会频繁遇到这种需求。它融合了正则表达式、焦点事件和 DOM 操作，全部围绕一个常见的表单布局展开。

实现指南： 为每个字段编写微型验证函数（邮箱格式、密码长度、两次密码是否一致）。在失去焦点（blur）时运行验证器，切换输入框的类名（Class），并更新对应的错误提示 span。提交表单时，只有所有验证都通过才允许继续。进阶挑战： 在首次失去焦点后，开启实时验证。

迷你游戏：趣味升级

游戏能让你的技能更上一层楼，因为它们涉及持续的状态、时序和交互。当你第一次让像素在画布（Canvas）上移动时，你会突然顿悟 JavaScript 的真正魅力。

13. 石头剪刀布

项目简介： 玩家选择石头、剪刀或布，电脑也随机选择，最后判定输赢。

推荐理由： 练习条件语句和随机数的绝佳项目，胜负判定带来的即时反馈非常爽快。

实现指南： 准备三个按钮供玩家选择。点击时，电脑从相同的三个选项中随机挑选一个。使用一个简单的查找表（或嵌套的 if/else）来判定输赢。记录多轮游戏中的胜负次数。进阶挑战： 采用五局三胜制，并加入最终的胜利画面。

14. 井字棋 (Tic-Tac-Toe)

项目简介： 经典的 3x3 网格游戏，两名玩家在同一屏幕上轮流落子。

推荐理由： 让你学会将一个长度为 9 的一维数组当作 2D 网格来处理，并练习如何检查获胜条件。亲手完成这样一个经典游戏会非常有成就感。

实现指南： 渲染九个格子。记录当前轮到哪位玩家。点击格子时，落下当前玩家的标记，并检查所有八种可能的获胜连线。一旦有人获胜，显示获胜横幅。进阶挑战： 编写一个简单的 AI，让它随机选择一个空位落子。

15. 记忆翻牌游戏

项目简介： 一个网格背面朝上的卡牌。点击翻开两张，如果图案相同则保持翻开状态；如果不同，则翻回去。

推荐理由： 涉及数组洗牌、定时器和明确的获胜条件。当你第一次实现“一秒后自动翻回去”的逻辑时，你会真正理解 setTimeout 的用法。

实现指南： 将一个数组复制一份以生成配对，使用 Fisher-Yates 算法进行洗牌。默认背面朝上渲染。点击时翻开卡牌。当翻开两张时进行比对：如果匹配，则锁定它们；如果不匹配，则在延迟后将它们翻回去。当所有卡牌配对成功时游戏结束。进阶挑战： 增加步数计数器，并在 localStorage 中记录历史最高分。

16. 猜数字游戏

项目简介： 电脑随机选择一个 1 到 100 之间的数字。你来猜，电脑会提示“高了”或“低了”，直到你猜中为止。

推荐理由： 简单直观，但它能教你如何处理输入、进行大小比较，以及在实际开发中无处不在的“循环直到正确”的逻辑模式。

实现指南： 生成一个目标数字。记录玩家猜测的次数。每次猜测时，与目标数字进行比较并更新提示信息。猜对后停止接受输入。进阶挑战： 限制玩家最多只能猜七次，次数用完则显示游戏结束画面。

17. 吊死鬼猜单词游戏 (Hangman)

项目简介： 电脑随机选择一个单词。你一次猜一个字母，猜错一次，吊死鬼的画像就会多画一笔。

推荐理由： 这个项目能让你彻底克服对字符串操作的恐惧。构建“已猜中字母”的显示逻辑，能让你一次性掌握 split、map 和 join 的用法。

实现指南： 从数组中随机选择一个单词。每个字母用一个下划线表示。当玩家选择一个字母时，显示匹配的位置，或者记录一次错误猜测。使用 CSS 或 Canvas 分阶段绘制吊死鬼（通常允许猜错六次）。进阶挑战： 从公开的词典 API 动态加载单词。

18. 贪吃蛇

项目简介： 经典的贪吃蛇游戏。吃掉食物，身体变长；如果撞到自己或墙壁，游戏结束。

推荐理由： 这是初学者阶段的“终极大 Boss”项目。你将接触到网格（Canvas 或 CSS）、键盘事件、游戏循环、碰撞检测以及蛇身增长机制。

实现指南： 使用 CSS 或 <canvas> 渲染网格。将蛇存储为坐标对象的数组。在每个游戏帧（Tick）中，让蛇朝着当前方向移动一格。如果新蛇头的位置与食物重合，则蛇身变长并生成新食物。如果蛇头撞到墙壁或自己的身体，则游戏结束。监听方向键来改变移动方向。进阶挑战： 随着得分增加，加快游戏运行速度。

加餐项目：天气应用

项目简介： 输入城市名称，获取并显示当前温度和天气状况描述。

推荐理由： 让你第一次真正体验公开 API 和异步代码。任何免费的天气 API 都足够你折腾了。

实现指南： 注册并获取一个免费的 API 密钥。提交表单时，使用 fetch 请求带有城市名称的 URL。等待响应，解析 JSON，然后用相关数据更新 DOM。使用 try/catch 包裹代码，防止输入的城市名无效时导致页面崩溃。进阶挑战： 增加未来五天的天气预报视图。

如何坚持完成你开始的项目

如果你每个项目都只做一半就放弃，那么上面这个清单就毫无意义。以下是几个能帮你坚持下去的实用建议：

• 选择最能让你兴奋的最小项目。 兴趣是开始的动力，而项目足够小则是顺利完成的保障。完成后，再重复这个过程。
• 限制时间，而不是限制范围。 给自己一两个小时的专注时间来做一个入门项目。如果没做完，这只是帮你找出自己卡在了哪里，而不是失败。
• 先构建，后美化。 在动手写 CSS 之前，先做出一个虽然难看但能跑通的版本。一个精致但有 Bug 的半成品，远不如一个难看但功能完备的成品。
• 不要在教程之间反复横跳。 针对同一个项目看三个不同的教程，意味着你光看没练。先不完美地写出来，然后再去查你不会的具体知识点。
• 在无法写项目的日子里温习基础。 在公交车上用 Coddy 学习五分钟也是一次有效的积累。连续学习的习惯会产生巨大的复利效应。

最后一项建议至关重要。项目能让你学到的知识落地，但它们高度依赖基础。每天的微课学习，能让这些项目不再显得高不可攀。

Coddy 能为你做些什么

这并不是在向你强推某款特定的开发工具。你可以使用任何你喜欢的编辑器，在浏览器中运行代码，或者托管在任何地方。

Coddy 解决的是更前置的问题：帮你打下坚实的 JavaScript 基础，这样当你准备“做一个测验应用”时，就不需要花两个小时去谷歌搜索 .map 是怎么用的了。

Coddy 已经帮助数百万学习者在网页端、iOS 和 Android 端学习了 JavaScript。无论你在哪里打开它，课程、进度和 Bugsy 都是同步的。

免费版涵盖了所有的 JS 课程，无需任何配置。唯一的限制是体力系统，不过体力会在几个小时后自动恢复。

想要无限次学习并在每次提问时都获得 Bugsy 的帮助？我们的付费版价格大约只有同类平台的一半。无论你选择哪种方式，请记住：基础第一，项目第二。