20个无库无框架的小型web项目(中文版)

前言

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

表单验证

效果如下图所示:

在线示例。 github源码地址。

挑选电影座位

效果如下图所示:

在线示例。 github源码地址。

视频播放器

效果如下图所示:

在线示例。 github源码地址。

汇率计算器

效果如下图所示:

 

在线示例。 github源码地址。

DOM数组方法

效果如下图所示:

 

在线示例。 github源码地址。

弹窗与滑动菜单

效果如下图所示:

 

在线示例。 github源码地址。

猜单词的双人小游戏

效果如下图所示:

 

在线示例。 github源码地址。

查找膳食

效果如下图所示:

 

在线示例。 github源码地址。

费用追踪器

效果如下图所示:

在线示例。 github源码地址。

音乐播放器

效果如下图所示:

在线示例。 github源码地址。

无限滚动

效果如下图所示:

在线示例。 github源码地址。

打字游戏

效果如下图所示:

在线示例。 github源码地址。

文本阅读器

效果如下图所示:

在线示例。 github源码地址。

记忆卡片

效果如下图所示:

在线示例。 github源码地址。

歌词搜索器

效果如下图所示:

在线示例。 github源码地址。

呼吸调节器

效果如下图所示:

在线示例。 github源码地址。

打砖块小游戏

效果如下图所示:

 

在线示例。 github源码地址。

新年倒计时

效果如下图所示:

 

在线示例。 github源码地址。

拖拽排序列表

效果如下图所示:

 

在线示例。 github源码地址。

猜数字小游戏

效果如下图所示:

在线示例。 github源码地址。

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