html判断输入数字的数量_20?个?JavaScript+Html+CSS?练手的小项目

前言:

最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基础入门到深入学习。这些项目原本是 Udemy20 Web Projects With Vanilla JavaScript 课程的一部分,但是如果你已经拥有了一些基础,不妨试着看一下源码,然后模仿实现吧

1. Form Validator 表单验证

判断输入的表单字段是否合法

2c643e118650c71b2625124c1c952640.png

2. Movie Seat Booking 预定电影座位

一个简单的电影座位预定演示项目

e3111682188369e218573e8eaf7a971c.png

3. Custom Video Player 定制视频播放器

一个简单的网页视频播放器

ecbb817532bf8f7c361c4a2ff84c2245.png

4. Exchange Rate Calculator 汇率计算器

计算不同货币的兑换汇率

13be538183d63d1ca96f9f3847a8fc93.png

5. DOM Array Methods Project DOM 数组方法

练习如何操作 DOM 数组

6b76e018cd36bd4941805fbb04b78e32.png

6. Menu Slider & Modal 动态菜单以及弹窗

练习如何弹出登录注册窗口,以及滑动弹出菜单

a48add94ebc88789b33e4fe8cfff4d4b.png
6fce4291627589cdbd1e670c05e8fb0e.png

7. Hangman Game 字符侦探游戏

练习如何判断隐藏字符是否正确

7bfd738a0ade49f6b54a81fd1ad9f668.png

8. Mealfinder App 点餐应用

简单的点餐查询应用

f710008fea0e11e4f5480fbad3b326a3.png

9. Expense Tracker 购物结算应用

简单的购物车结算应用

9e612f1725f98427ba79fa1aceba91d7.png

10. Music Player 音乐播放器

简单的网页音乐播放器

cffefa846d7c29a0d0d882a95318ef76.png

11. Infinite Scrolling 网页无限滚动演示

网页无限向下滚动实现

edcd417df76a59ba732dea564656a2dc.png

12. Typing Game 打字游戏

简单的打字输入游戏

2ac554dd5cc774085154a56b5fe91ea5.png

13. Speech Text Reader 文本阅读器

文本阅读器

2441c365d396033947db71c95952ddff.png

14. Memory Cards 记忆卡片

测试记忆的记忆卡片

238929120c4c5fb4ca74eb911f2edbf4.png

15. LyricsSearch App 歌词搜索应用

网页歌词搜索器

7e9028f4c6faea6de4ec5502bc376a4a.png

16. Relaxer App 休闲呼吸应用

模拟呼吸的节奏

4396e96616f27a28ba3f67706396d4c3.png

17. Breakout Game 弹跳破冰游戏

简单的网页破冰游戏

34a6a24b103add693a0ce0c2068a192f.png

18. New Year Countdown 新年倒计时

网页新年倒计时

868f78af3d49591830ee018402283d30.png

19. Sortable List 榜单应用

网页财富榜单

2ca81e5c0fd216638890adb7dc7f9c93.png

20. Speak Number Guessing Game 猜数字游戏

说出数字,猜测数字

c07f0bb3703cd9ce79f12a12c8201939.png

今天我们给大家分享了,20 个 JavaScript+Html+CSS 练手小项目,大家觉得哪个最简单,哪个最复杂呢?赶紧去 Github 仓库拉取项目,码上行动吧

欢迎关注公众号:KnowHub 知识加油站!

参考资料

[1]

vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值