作者：夕水

转发链接：https://segmentfault.com/a/1190000023213609

前言

前一阵子看到了大火的github项目vanillawebprojects，对其中的实现有些好奇，于是研究了写法，但是对英文有些不太熟悉的我，无法忍受这样的纯英文项目，于是花了二周时间，潜心研究了项目的实现思路，然后自己实现了这20个web项目的中文版。虽然思路来源于原项目，但是很多功能我做了扩展，相信细心的人一定会发现有哪些不同之处，让我们来一一看一下吧。

表单验证

效果如下图所示:

github ：https://github.com/eveningwater/my-web-projects/tree/master/js/1

挑选电影座位

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/2

视频播放器

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/3

汇率计算器

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/4

DOM数组方法

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/5

弹窗与滑动菜单

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/6

猜单词的双人小游戏

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/7

查找膳食

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/8

费用追踪器

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/9

音乐播放器

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/10

无限滚动

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/11

打字游戏

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/12

文本阅读器

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/13

记忆卡片

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/14

歌词搜索器

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/15

呼吸调节器

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/16

打砖块小游戏

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/17

新年倒计时

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/18

拖拽排序列表

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/19

猜数字小游戏

效果如下图所示:

github：https://github.com/eveningwater/my-web-projects/tree/master/js/20

如果有人能发现bug,欢迎提issue,如果这些项目能够帮助到您，希望您能点个star。

作者：夕水

转发链接：https://segmentfault.com/a/1190000023213609