适合初学者的 JavaScript 项目

这些面向初学者的 JavaScript 项目创意，是一些只需运用基本 JavaScript 技能（以及一些 HTML 和 CSS）即可编写的示例代码。通过查看每个简单 JavaScript 项目的源代码，您将开始了解如何构建同一创意的新版本，或者在原始开源代码的基础上添加您自己的创意和调整。

1. 构建 JavaScript 时钟 如果您访问的网站或使用带有自动更新时间功能（也就是时钟）的 Web 应用程序，那么它很可能是由 JavaScript 代码驱动的。这意味着 JavaScript 时钟不仅可以用于构建优秀的 JavaScript 项目，还能让您亲身体验 JavaScript 开发人员将要进行的实际工作。
2. 开发一个 JavaScript 小费计算器 每当我出去吃饭，不知道该给多少小费时，我就会笨手笨脚地拿出手机，在谷歌上搜索“小费计算器”。我没法告诉你我常用的那个计算器的名字和网址，但它是一个简单的 JavaScript 应用。所以，赶紧动手制作你自己的小费计算器吧。这个计算器是一个完美的 JavaScript 示例项目，它展示了用 JavaScript 以及少量 HTML 和 CSS 就能构建出哪些有趣的 JavaScript 项目。
3. 构建 JavaScript 动画导航切换按钮。如果仅使用 HTML 和 CSS 构建网站菜单，则只能创建将用户从一个静态页面移动到另一个静态页面的链接——JavaScript 可以在 Web 开发中实现下拉、折叠以及其他动画导航功能。动画导航切换按钮是互联网领域中另一个无处不在的功能，一旦您掌握了 JavaScript 编程语言，就能为客户和潜在雇主快速开发出动画导航切换按钮。
4. 构建 JavaScript 地图 如果您曾经使用过 Google 地图放大某个位置并更改视图模式，那么您使用的功能就是 JavaScript 构建的。JavaScript 能够创建动态对象，这使得它非常适合在网站或网络应用中创建创意交互式地图。虽然您无需在第一次使用时就重新创建 Google 地图，但尝试一些简单的 JavaScript 项目，例如 Sara B 的交互式 Codepen 地图（使用 JavaScript 框架 jQuery 构建，jQuery 是一个包含预先编写的可重用代码的 JavaScript 库集合），是熟悉 JavaScript 地图制作功能的有效方法。
5. 构建 JavaScript 游戏 HTML 和 CSS 是 Web 开发中重要的构建块，而 JavaScript 则是一种将网站从功能性提升到趣味性的编程语言。因此，游戏跻身趣味 JavaScript 项目榜单也就不足为奇了，这些项目可以让你练习技能，而无需在键盘前睡着。Martin 的 Codepen 迷宫就是一个将游戏作为简单 JavaScript 项目的完美范例。
6. 构建 JavaScript 鼠标悬停元素 你在网络上依赖的另一个 JavaScript 优点是鼠标悬停效果——将鼠标悬停在屏幕上的某个图标或区域上，会在悬停位置产生相应的动作或结果。鼠标悬停是 JavaScript 开发的常规部分，因此花点时间快速完成一个 JavaScript 鼠标悬停项目，是度过一个下午的宝贵方式。Roger Van Hout 在 CodePen 上发布的“快乐弹跳球”鼠标悬停项目展示了一片球体，类似于你小时候在口香糖机里得到的那种。将鼠标悬停在任意一个球体上，你会看到它逐渐扩大。
7. 构建 JavaScript 登录身份验证 网站的登录身份验证栏（输入邮箱和密码登录网站的区域）虽然简单，但也是 JavaScript 领域的一部分。这个面向初学者的 JavaScript 项目值得掌握，因为几乎每个网站都包含登录身份验证功能。Mike Tran 使用 AngularJS（另一个 JavaScript 框架）在 Codepen 上构建了身份验证栏，这是一个简洁明了的 JavaScript 示例项目。

8. 构建 JavaScript 绘图
   JavaScript 可以用作绘图工具，使 HTML 和 CSS 元素在 Web 浏览器屏幕上栩栩如生。能够利用图形元素使静态页面看起来更具吸引力是 Web 开发的关键，因此学习如何充分利用 JavaScript 的绘图功能至关重要。不妨尝试一下 Narayana 在 CodePen 上开发的 JavaScript 绘图项目，例如 Infinite Rainbow。

9. 用 JavaScript创建待办事项列表
   JavaScript 在编写交互式列表时非常方便，用户可以添加、删除和分组项目——而这些功能仅靠 HTML 和 CSS 是无法实现的。如果你和我一样，很想创建一个待办事项列表（但一直没动手），现在机会来了。不妨运用你的 JavaScript 技能，快速创建一个待办事项列表，就像 John Fichera 在 Codepen 上创建的这个 JavaScript 项目示例一样。

10. 编写 JavaScript 测验
    谁不喜欢测验？无论是告诉你最适合你的职业道路、你的政治信仰，还是测试你对 1980 年代 WWF 摔跤手的了解，测验既有趣又实用——我们甚至在 Skillcrush 上使用测验来帮助用户确定哪种编码路径最适合他们。如果你参加过在线测验，很有可能其中涉及一些 JavaScript 源代码，现在轮到你编写自己的测验了。在 CodePen 的 JavaScript 项目示例中，跟随 jksdk4 的脚步，看看你能做些什么。