面向初学者的 JavaScript 项目

大家好，本周的文章，在这篇简短的文章中，我将收集一些项目创意，供你们（如果你是 JS 新手并且渴望项目创意）参考，并在空闲时间进行创作，从我认为的基础项目开始，逐步过渡到稍微复杂一些的项目😄。

1. 身体背景更换器🖌

对于初学者来说，这绝对是学习 DOM 和使用 JS 进行 DOM 操作时最先可以上手实践的项目之一。

https://codepen.io/ShafSpecs/pen/mdrpZyJ

这个项目是我在早期学习 JavaScript 时做的，目标是创建一个带有嵌入式按钮的元素，按钮可以随机改变背景颜色，颜色由你决定。（喜欢紫色但讨厌粉色？那就别加。喜欢红色？没问题。一切由你决定。）

2. 十六进制颜色代码转换器🎨

这个和上一个类似，但更复杂一些。第一个例子中，我们预先定义了颜色。而在这个例子中，我们会随机生成一个6位数的十六进制颜色代码（#000000）。

https://codepen.io/ShafSpecs/pen/jOMZqZr

与上一个项目类似，但增加了一些挑战性和需要考虑的因素，您可以放心地将此作为您的第一个项目，如果您愿意，也可以跳过第一个项目。

3. 计数器应用🧮

一个简单的应用程序，只有一个“添加”按钮和一个“减去”按钮。很简单，对吧？也不尽然。你应该能够用“删除”按钮把数字减到零以下，用“添加”按钮把数字减到 100 以下。

https://codepen.io/ShafSpecs/pen/LYRQgEz

想要增加挑战性吗？不妨试试将数字颜色设置为：正数时设为绿色（或你喜欢的颜色），零时设为白色，负数时设为红色？

4. 随机数生成器 ⚡

这个任务有点复杂，但也很简单。做一个简单的应用程序，随机输出一句名言以及引用这句话的人。

https://codepen.io/ShafSpecs/pen/RwGQRNw

玩起来很有趣！

5. 保存这些信息！📬

这个项目需要稍微多一些解决问题的能力，但其实并不难。你需要创建一个文本输入框和一个按钮，点击按钮后，保存用户在文本输入框中的最后一次输入。如果没有提示信息，则需要向用户发出警告！

https://codepen.io/ShafSpecs/pen/BaLYLVq

6. 时钟应用⏰

这个项目很有意思，是用JS实现的模拟时钟。我个人非常喜欢这个项目（我从中学到了很多CSS知识），它确实很烧脑。这个项目是一个简单的模拟时钟，但它会根据实时时间滴答作响！

我没留着笔做这个项目😔

想要增加挑战性吗？那就给时钟加上“指针”移动时的滴答声吧。

7. 时钟应用（升级版 v2）

这个也是个JS时钟应用，不过有点不一样。它不是模拟时钟，而是数字时钟，而且还带闹钟！没错，闹钟！闹钟可以很简单，比如页面上的提示框或者控制台的日志消息；也可以很复杂，比如推送通知。一切由你决定！😄

又没笔了。我毫不怀疑以后还会有更多这样的事😩

8. 一款计时应用🌇

这可不是另一个时钟😆。好吧，它确实是时钟，但跟上面那两个不一样。在这个项目中，你需要创建一个应用程序，它可以记录一天中的时间，并根据这些数据向你问好。

例如，现在是下午吗？信息可以是“下午好”。现在是早上吗？信息可以是类似“早上好”之类的问候语。现在是中午吗？嗯，你自己想想该怎么问候吧。

https://codepen.io/ShafSpecs/pen/OJRQvEp

9. 用户评价应用👨‍⚖️

这个很简单。做一个应用，展示“客户”的评价。你可以在一些虚假的API网站上找到很多假的名字和照片。不过这个应用会有点问题，评价会像幻灯片一样，用户可以在不同的“客户”评价之间切换，但当看到最后一个“客户”的评价时，会自动跳转到第一个评价。

没有笔

10. 一款税务计算器应用💵

这个更有意思！做一个计算税款、增值税或其他任何税种（实际上是百分比）的应用程序。如果你不嫌麻烦，你甚至可以把它做成所有税种的混合体！

https://codepen.io/ShafSpecs/pen/gOrvzPd

11. 计算器🔢

这是一个正儿八经的计算器项目。做一个计算器，就这么简单。有趣的是，不。这个计算器会是一个数字计算器，可以进行加、减、乘、除运算，而且它的布局也应该像一个真正的计算器。它还带有一个数字显示屏。

https://codepen.io/ShafSpecs/pen/RwGyZzg

额外挑战：把它变成一个科学计算器，包含sin、cos、tan、Permutation等等Combination。

12.待办事项清单📓

创建一个待办事项清单。可以添加任务，也可以删除任务。很简单。其实没那么简单，但我相信你能做到😁。

https://codepen.io/ShafSpecs/pen/LYRrPRb

为了增加挑战的趣味性🌶，允许用户将任务存储在后台LocalStorage。这意味着即使用户刷新页面或退出浏览器，他的任务仍然安全且会被跟踪。

13. 一个 JS 过滤器系统 🗃

这个任务有点复杂。为了让目标更容易理解，请创建一个类似网店的应用程序，其中包含多个产品，每个产品都有自己的类别。添加按钮，允许用户选择类别并筛选产品。

https://codepen.io/ShafSpecs/pen/LYRdmqb

这里有个额外的挑战！添加一个搜索框，允许用户按名称搜索。

14. 话题标签格式化程序

我知道这个项目应该排在前面🤷‍♂️，但别问为什么。这个项目比上面一些项目要简单，但仍然很有挑战性。创建一个应用程序，其中包含一个用于输入长文本的文本框。当用户点击提交按钮时，应用程序会显示相同的消息，但在文本中最长的单词后面添加一个井号 (#)。不明白？如果你输入类似这样的内容：“你好，John Doe。我喜欢编程。 ”，那么应用程序会显示：“你好，John Doe。我喜欢编程。#编程”。

https://codepen.io/ShafSpecs/pen/ExZWXOv

各位，这周就到这里啦😄。你们以为我会只写15个项目就结束吗？没想到是14个！哈哈！尽情享受搭建的乐趣，尝试一下这些项目吧。说真的，这可不是新手专属，你完全可以试试。如果你有自己引以为傲的作品想要展示，那就一定要在评论区分享。和往常一样，享受学习、调试和开发者们常见的各种小脾气吧。外面的世界很疯狂，我们所在的行业更是疯狂，但只要你下定决心，你就能成就任何事！期待与你们在云端相遇！玩得开心，再见👋。