您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

20个无库无框架的小型web项目

时间:2020-07-17 14:52:35  来源:  作者:
20个无库无框架的小型web项目

 

作者:夕水

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

前言

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

表单验证

效果如下图所示:

20个无库无框架的小型web项目

 

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

挑选电影座位

效果如下图所示:

20个无库无框架的小型web项目

 

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

视频播放器

效果如下图所示:

20个无库无框架的小型web项目

 

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

汇率计算器

效果如下图所示:

20个无库无框架的小型web项目

 

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

DOM数组方法

效果如下图所示:

20个无库无框架的小型web项目

 

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

弹窗与滑动菜单

效果如下图所示:

20个无库无框架的小型web项目

 

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

猜单词的双人小游戏

效果如下图所示:

20个无库无框架的小型web项目

 

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

查找膳食

效果如下图所示:

20个无库无框架的小型web项目

 

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

费用追踪器

效果如下图所示:

20个无库无框架的小型web项目

 

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

音乐播放器

效果如下图所示:

20个无库无框架的小型web项目

 

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

无限滚动

效果如下图所示:

20个无库无框架的小型web项目

 

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

打字游戏

效果如下图所示:

20个无库无框架的小型web项目

 

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

文本阅读器

效果如下图所示:

20个无库无框架的小型web项目

 

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

记忆卡片

效果如下图所示:

20个无库无框架的小型web项目

 

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

歌词搜索器

效果如下图所示:

20个无库无框架的小型web项目

 

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

呼吸调节器

效果如下图所示:

20个无库无框架的小型web项目

 

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

打砖块小游戏

效果如下图所示:

20个无库无框架的小型web项目

 

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

新年倒计时

效果如下图所示:

20个无库无框架的小型web项目

 

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

拖拽排序列表

效果如下图所示:

20个无库无框架的小型web项目

 

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

猜数字小游戏

效果如下图所示:

20个无库无框架的小型web项目

 

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

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

作者:夕水

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



Tags:web项目   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
人员层面1.在上线(迁移)前须邮件通知运营以及相关人员告知服务器停掉的消息。2.项目上线,相关业务人员必须在场处理线上的紧急bug和上线后的验收 。3.测试配合相关的测试 。4....【详细内容】
2021-04-21  Tags: web项目  点击:(190)  评论:(0)  加入收藏
作者:夕水转发链接:https://segmentfault.com/a/1190000023213609前言前一阵子看到了大火的github项目vanillawebprojects,对其中的实现有些好奇,于是研究了写法,但是对英文有些...【详细内容】
2020-07-17  Tags: web项目  点击:(126)  评论:(0)  加入收藏
1创建web服务器:使用cmd命令进入到存放项目的目录中执行以下命令:python django-admin.py startproject mysite成功后会在目录中出现 mysite 目录,此处创建的为开发服务器2创...【详细内容】
2019-11-12  Tags: web项目  点击:(70)  评论:(0)  加入收藏
▌简易百科推荐
今天我们来聊一下北京地区的《ICP经营许可证》有多好办,现在的互联网上提供的商机越来越多,增值电信业务十分火爆,企业通过互联网突破地域的限制,把公司产品卖到更远的地方,同时...【详细内容】
2021-12-17  梦想理应飞翔Yy    Tags:《ICP经营许可证》   点击:(12)  评论:(0)  加入收藏
转自: https://blog.kermsite.com/p/blog-intro/由于格式问题,部分链接、表格可能会失效,若失效请访问原文此专题将详细介绍如何从零开始搭建一个个人博客。Dec 01, 2021阅读时...【详细内容】
2021-12-17  LaLiLi    Tags:个人博客   点击:(7)  评论:(0)  加入收藏
SP证是第二类增值电信业务经营许可证的简称。分为全网SP证和地网SP证。申请经营许可证是在工信部申请,全网SP经营许可证的有效期是5年,全网SP许可证在工信部办理全网SP续期,地...【详细内容】
2021-11-01  s陳述    Tags:sp证书   点击:(39)  评论:(0)  加入收藏
现在还有许多人不知道EDI许可证是什么东西今天我就来给大家讲解一下.EDI许可证就是一种增值电信业务经营许可证。是针对在线数据处理和交易处理业务需求的专业资格证书。 《...【详细内容】
2021-10-28  soberXx    Tags:edi许可证   点击:(75)  评论:(0)  加入收藏
元素的化学概念,如周期表中的化学元素,一切物质都是由元素构成的。对程序员而言,网站建设制作就是代码构成网站。企业网站设计者也收集了各种各样的元素,但并非所有元素都需要运...【详细内容】
2021-10-26  南宁云尚网络    Tags:企业网站   点击:(40)  评论:(0)  加入收藏
在运营网站的过程中,有一件不可忽略的事情。那就是网站上线之前需要完成 ICP 备案。说到这里,很多朋友就提出疑问了~· 什么是 ICP 备案呢?· ICP 备案需要哪些材...【详细内容】
2021-10-22  启测云    Tags:ICP备案   点击:(46)  评论:(0)  加入收藏
最近有朋友问我,我公司有外资就不能申请ICP许可证了么?外资的定义是什么?其实是可以的,但有一个特定条件必须满足,外资公司是指公司有外资股东,比如香港、加拿大、美国、韩国等等,...【详细内容】
2021-10-21  小白速看Z    Tags:ICP   点击:(51)  评论:(0)  加入收藏
自互联网出现以来,超文本传输协议http协议被广泛用于在Web浏览器和网站服务器之间传递信息,但随着互联网的发展,另一种协议——https出现,并与http一同服务于这个互联...【详细内容】
2021-10-20  我是FEIYA    Tags:https   点击:(44)  评论:(0)  加入收藏
Grafana Loki 是一个日志聚合工具,它是功能齐全的日志堆栈的核心。图片来自 包图网先看看结果有多轻量吧: Loki 是一个为有效保存日志数据而优化的数据存储。日志数据的高效索...【详细内容】
2021-09-14    51CTO  Tags:Loki日志   点击:(97)  评论:(0)  加入收藏
背景最近做微信小程序开发比较多,大家知道线上微信小程序为了安全起见,要求后端通信协议必须是HTTPS,这就要求需要安装证书。为了测试预发布线上环境,特地买了个最便宜的域名,为...【详细内容】
2021-09-14  小李子说程序    Tags:HTTPS证书   点击:(125)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条