15 个初级 JavaScript 项目可提升您的前端技能！

成为一名优秀 Web 开发者的最快方法就是不断练习。练习的最佳方式是尽可能多地构建初学者项目。这是因为每个项目都代表着独特的问题和解决方案，所以你解决的项目越多，你获得的知识就越多。把你完成的每个项目都想象成你赢得的奖牌。你获得的奖牌越多，你就越有准备去应对下一个难度更大的项目。

为了帮助你入门，我整理了一份包含 15 个 JavaScript 初学者项目的清单。实际上，这 15 个项目正是我刚开始学习 JavaScript 时创建的 25 个项目中的 15 个（点击此处查看全部 25 个项目）。

如果您在尝试解决其中一个问题时遇到困难，请不要担心，我在每个项目旁边都附上了视频教程，逐步向您展示如何解决问题。不过，在观看解决方案之前，我建议您先自己尝试一下。这是成为一名优秀开发人员的关键。编程没有捷径，所以如果您不努力，无论看多少教程，都不会看到进步。如果您感到不知所措，请休息一下，放松一下，即使是最优秀的人也会遇到这种情况。记住，即使是最好的计算机科学老师也需要大量的时间和练习才能开始掌握这些知识。

我还在每个项目旁边留了一个“先试后建”的版块。每个项目都免费托管在 GitHub Pages 上，所以在你完成第一个项目后，可以通过阅读这份超级易懂的指南来学习如何以相同的方式托管它。

最后，自创建教程以来，我对每个项目都进行了改进，因此缩略图中的项目（最新版本）可能与视频中的项目略有不同（但大多数项目相同）。如果您想要项目的最新版本，请查看我的GitHub。

1. CSS渐变生成器

你将构建什么？
使用这个简单的 CSS 渐变生成器应用，让网页更漂亮。只需点击一下按钮，即可更改背景颜色并在屏幕上显示该颜色的十六进制代码。

构建之前先试用（托管于 GitHub Pages）
梯度生成器应用程序

使用 JavaScript

• DOM 操作
• 数据结构
• 功能

总结和思考：
构建这个项目教会了我如何使用 onclick，它用于将一个函数附加到按钮上。在本例中，该函数生成一个随机的十六进制颜色，并将其作为背景颜色。学习这个功能非常有用，因为几乎所有现代 Web 应用程序都使用按钮。我感觉我会反复使用这项技术。

2. 随机引言

你将构建什么？
如果你需要一点激励，我可以帮你。在这个项目中，我们将构建一个随机名言生成器，其中包含大量励志名言。

先试后建（托管于 GitHub Pages）
随机报价应用程序

使用 JavaScript

• DOM 操作
• 对象
• 功能

总结和思考：
这个应用程序可以用多种方式创建，但有趣的是，它使用字典这种经常被低估的数据结构来解决。我还学习了一个简单的算法，它负责在用户每次点击按钮时生成一个随机的引言。

3. 图片轮播

你将构建什么
？需要一个应用程序来展示你所有精彩的图片？太棒了，在第三个项目中，我们将创建一个应用程序，只需点击按钮即可浏览图片。在编程中，我们称之为照片轮播或图片滑块。

先试后建（托管于 GitHub Pages）
图片轮播应用

使用 JavaScript

• DOM 操作
• 控制结构
• 功能

总结和思考：
了解这类项目的实现方式非常有趣。起初，我们使用 CSS 遮挡屏幕上的所有图像。然后，我们使用 JavaScript 来操作 CSS 样式，使其一次显示一张图片。在完成这个项目之前，我不确定是否可以直接用 JavaScript 更改 CSS 样式，结果发现是可以的。

4. 数字时钟

你将构建什么？
想买个数字时钟吗？不用了，在本项目中，你将学习如何构建自己的数字时钟。

先试后建（托管于 GitHub Pages）
数字时钟应用程序

使用 JavaScript

• DOM 操作
• 数据结构
• 功能
• 对象

总结和思考：
在构建这个项目的过程中，我了解到 JavaScript 可以创建一个内置对象，并使用内置函数从中获取时间。这很棒，因为它省去了像 Python 或 C++ 那样添加额外库的麻烦。我还学习了一个名为 setTimeout 的内置函数，它可以反复调用另一个函数。对于这个项目来说，使用 setTimeout 来确保时间正确更新至关重要。

5.计算器

你将构建
一个计算器。JavaScript 初学者项目列表里没有它就不完整，我们这里也不例外。

先试用后构建（托管于 GitHub Pages）
计算器应用程序

使用 JavaScript

• DOM 操作
• 功能

总结和感想：
这款应用的构建过程如此简单，简直令人难以置信。在构建之前，我以为每个表达式都需要用某种复杂的函数手动求解。结果发现，内置的 JavaScript 函数 eval 可以帮我们处理这个问题。我非常享受构建这款应用的过程，甚至还修改了它的风格，赋予它自己的风格。

6.购物清单

饿了，你会做什么
？让我们用这个购物清单应用去杂货店吧。

先试用后构建（托管于 GitHub Pages）
购物清单应用程序

使用 JavaScript

• DOM 操作
• 功能
• 控制结构
• 事件监听器

总结和感想：
这是一个非常酷炫的应用，也是我们清单上第一个使用事件监听器的项目。事实上，我们使用了一个事件监听器，当用户点击“Enter”键时，它会向购物清单中添加一个新商品；另一个事件监听器则在用户点击该商品时，它会从清单中删除该商品。了解负责删除 div 中所有元素的函数是如何编写的非常有用。在本例中，这个函数删除了我们购物清单中的所有商品。

7. 小费计算器

您将构建什么
使用此小费计算器，您无需再环顾餐桌来查看谁在负责小费。

先试用后构建（托管于 GitHub Pages）
小费计算器应用程序

使用 JavaScript

• DOM 操作
• 功能

总结和思考：
开发确定每个人小费金额的功能相当容易。或许最大的挑战在于使用 CSS 来模仿应用的设计。它看起来设计起来相当简单，但如果不先看教程的话，实际上还是有点难度的。

8. 待办事项清单

您将构建什么
让我们利用这款出色的待办事项列表应用程序充分利用我们的一天。

先试后建（托管于 GitHub Pages）
待办事项列表应用程序

使用 JavaScript

• DOM 操作
• 事件监听器
• 控制结构
• 数据结构
• 功能

总结和思考：
这个问题的解决方案与购物清单应用程序非常相似。我发现自己会回顾购物清单应用程序的代码，以帮助解决这个问题。然而，有一个不同之处，那就是可以更改列表中每个项目的背景颜色的功能。我认为这对项目来说是一个非常好的补充，因为它让项目看起来更加美观。总的来说，我认为这更像是一个复习项目，但无论如何，它仍然是一次很棒的练习。

9. 抽认卡（带本地存储）

您将构建什么
这是一个允许您创建抽认卡的应用程序，因此请把那些纸质抽认卡收起来，因为城里来了一位新老板。

先试后建（托管于 GitHub Pages）
Flashcards 应用程序

使用 JavaScript

• DOM 操作
• 功能
• 控制结构

总结和感想
首先，这款应用看起来真棒。它可以帮助学生学习，还能省去他们花钱买纸质卡片的麻烦。这是我们清单上第一个使用弹性盒子的项目，所以一开始有点难。不过，一旦我掌握了它，它其实很容易上手，而且让项目更具活力。我尤其喜欢 align-item、flex-wrap 和 justify-content 选项，因为它们让卡片更具响应性。

10.便利贴

你将构建什么？
让我们构建一个便签应用程序。没错，你现在可以把所有纸质便签都扔掉了。

先试用后构建（托管于 GitHub Pages）
便签应用程序

使用 JavaScript

• DOM 操作
• 事件监听器
• 功能
• 数据结构

总结和感想：
这个项目的代码和抽认卡项目非常相似，但这没关系，因为练习是必不可少的。事实上，如果没有那个项目的代码作为参考，我可能得再看一遍抽认卡的教程视频，才能确定我做的是否正确。当然，这个项目确实有一些独特的功能，所以弄清楚如何编写这些部分的代码很有挑战性。总的来说，我从这个项目中学到了很多，因为它结合了我们目前学到的所有知识。

11.计时器

你将构建什么？
让我们来构建一个计时器。预备，开始！

构建之前先试用（托管于 GitHub Pages）
计时器应用程序

使用 JavaScript

• DOM 操作
• 事件监听器
• 功能
• 对象

总结和思考
事实证明，构建一个简单的计时器比想象中要难得多。有人会认为使用数字时钟项目中的 setInterval 函数就足以显示正确的时间。但事实证明，这种方法根本行不通。在本项目中，我们创建了变量来保存关于时间的不同信息，例如，计时开始的时间、计时停止的时间以及计时停止的时长。如果没有这些变量以及我们对它们进行的计算，我们的数字时钟根本无法正确显示经过的时间。

12. 儿童数学

您将构建
一个很酷的应用程序，教孩子们基本的算术运算。

先试后建（托管于 GitHub Pages）
Math 4 Kids 应用程序

使用 JavaScript

• DOM 操作
• 事件监听器
• 控制结构
• 数据结构

收获和感想：
在这个项目中，我学习了如何从一个网页切换到另一个网页以及如何播放声音文件。事实证明，这两个任务都相当简单。最难的部分是如何将答案随机地放在不同的框中，这样正确答案就不会总是出现在同一个位置。我尽力自己想办法，但最终还是看了教程才找到答案。

13.Unsplash API（图像生成器）

你将构建什么
？你的新网站需要一些图片吗？让我们来构建一个图片生成器。

先试后建（托管于 GitHub Pages）
Unsplash API 应用程序

使用 JavaScript

• DOM 操作
• 承诺
• 拿来
• 功能
• 控制结构
• 事件监听器

完成这个项目的收获和感想：
我学会了如何使用 JavaScript 内置的 fetch 来发出 API 请求。在构建这个项目之前，我完全不知道 Unsplash API 的存在。有趣的是，许多知名公司都把这个 API 集成到了他们的网站中。而且，每当我需要新的桌面壁纸时，有个图片生成器就很方便了。

14. 引用 API（打字机）

您将构建
一个应用程序，该应用程序从 API 中获取随机报价并以打字机效果将其显示在屏幕上。

先试后建（托管于 GitHub Pages）
打字机应用程序

使用 JavaScript

• DOM 操作
• 事件监听器
• 控制结构
• 数据结构
• 承诺
• 功能
• 拿来

学习和思考：
学习如何编写打字机脚本真是太棒了。我实际上已经在电子游戏中看到过这种效果的实现。现在我可以用它来制作自己的游戏了。就代码而言，有趣的是，我们了解到制作酷炫的动画并不总是需要 CSS。在这个项目中，我们使用了 JavaScript 内置的 substring 函数来制作打字机效果。

15. 方形卡片（模板）

您将构建什么
以时尚的方式显示数据或仅仅是一张方形卡片。

先试后建（托管于 GitHub Pages）
Square Cards 应用程序

使用 JavaScript

• 事件监听器
• 功能

收获和感想：
在这个项目中，我学会了如何直接用 JavaScript 打开 YouTube 视频和网页文章。这极大地丰富了我作为一名 Web 开发者的工具库（这要感谢之前 15 个初级项目！）。