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

前言

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

表单验证


效果如下图所示:

 

在线示例。 github源码地址

挑选电影座位

效果如下图所示:

 

 

在线示例github源码地址

视频播放器

效果如下图所示:

 

 

在线示例github源码地址

汇率计算器

效果如下图所示:

 

 

 

 

在线示例github源码地址

DOM数组方法

效果如下图所示:

 

 

 

在线示例github源码地址

弹窗与滑动菜单

效果如下图所示:

 

 

 

在线示例github源码地址

猜单词的双人小游戏

效果如下图所示:

 

 

 

在线示例github源码地址

查找膳食

效果如下图所示:

 

 

 

在线示例github源码地址

费用追踪器

效果如下图所示:

 

 

 

在线示例github源码地址

音乐播放器

效果如下图所示:

 

 

 

在线示例github源码地址

无限滚动

效果如下图所示:

 

 

 

在线示例github源码地址

打字游戏

效果如下图所示:

 

 

 

在线示例github源码地址

文本阅读器

效果如下图所示:

 

 

 

在线示例github源码地址

记忆卡片

效果如下图所示:

 

 

 

在线示例github源码地址

歌词搜索器

效果如下图所示:

 

 

 

在线示例github源码地址

呼吸调节器

效果如下图所示:

 

 

 

在线示例github源码地址

打砖块小游戏

效果如下图所示:

 

 

 

在线示例github源码地址

新年倒计时

效果如下图所示:

 

 

 

在线示例github源码地址

拖拽排序列表

效果如下图所示:

 

 

 

在线示例github源码地址

猜数字小游戏

效果如下图所示:

 

 

在线示例github源码地址

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

posted @ 2020-07-15 15:27  eveningwater  阅读(190)  评论(0编辑  收藏