sd445419855 / demo

平时学习练习的一些小Demo的仓库

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

前言

从库的名字就能看出来,这库是用来存放我平时学习时候的小练习用的,这些小demo我会在下面列出来

NEXT学位Demo

这是参加腾讯课堂NEXT学位10天训练营时候建立的项目,最后有一个作业的大项目,还有一些零零碎碎的小demo,可以说这是一个对新手来说挺不错的项目,10天时间对前端大致有一个了解,还做了一个小项目。新手入门推荐

有兴趣的可以去看一下我的笔记:传送门

下面是学习时零零碎碎实验做的小Demo

大作业-滚动简历

很有意思的一个项目,做一个滚动简历。本来想用原生再实现一次的,结果发现jQ动画用原生没法儿弄只好暂时放下。

零碎小Demo

圣杯和双飞翼布局

做IFE的时候遇到的,挺经典的两种布局就整理了一波。两种布局达到效果上基本相同,都是两边两栏宽度固定,中间栏宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染中间提升性能(因为这两种布局都比较老,我认为在现代浏览器中这点儿性能优化效果并不是很大),并且兼容性良好。

具体分析看这里:传送门

Demo和代码

PSD到HTML切图练习

本来看到这个课是想自己直接切的,因为之前也切过几个。后来想想还是跟着视频的思路走吧,果然还是学到了不少,自己之前毕竟是摸索的野路子,很不正规。不过跟着视频来切的真心累,现在想来还是应该先看一遍然后自己照着思路实现可能会更好。总结一下学到的东西吧:

  • reset重置样式单独放,不要用通配符

  • 要考虑一个页面的公共样式,单独写出来方便以后维护

  • 清除浮动和固定块居中这样常用的单独写一个类出来,用的时候直接添加会更方便,减少代码冗余

  • 先搭好页面框架再填样式

  • Demo

  • 代码地址

CSS实现Tab页切换 Demo地址 查看代码

切图的时候碰到的,想着切图就尽量先不谢js试试能不能实现效果,搜了一些办法之后选择了利用label和radio的绑定关系和radio选中时的:checked来实现效果

2018进度条 Demo地址

突发奇想想要做的一个东西,有空看看也能给自己来点儿紧迫感,实现起来还是很容易的获取当前时间和今年开始的时间算出百分比设置width就好了。

Flexbox演示站 Demo地址 查看代码

可以通过动态的点击flexbox属性可以实时看到各个属性的效果,有助于理解各个属性。

友好的提示,鼠标放在选项上面悬停显示各个属性效果。

Canvas系列

学习Canvas的时候制作的一些小Demo,后续补上系列教程(先给自己挖个坑)

初学Vue的产物,把IFE基础学院做完等待新学期的过程中就去看了Vue的文档,看完文档按照惯例做了这么一个Demo,好像学Vue的都推荐做这么一个东西。用上Vue确实很方便,甚至说写页面样式耗费的功夫要超过逻辑本身,最终利用loaclstorage把实现数组本地存取。实现的功能有:

  • 回车或点击按钮添加一条
  • 右边按钮可以删除当前条目
  • 左边按钮标记为已完成
  • 上边箭头一键全部完成
  • 双击可编辑
  • 添加为空时不添加,编辑后为空则删除
  • 下方显示待完成数量
  • 可按照全部、未完成、已完成分类显示
  • 可一键删除所有完成项目
  • 正常刷新和关闭页面时,将数据保存到loaclstorage中。
  • 打开时如果loaclstorage存有数据,则自动加载loaclstorage中的数据

3D banner视差滚动效果 演示地址 查看代码

这个是在学CSS 3D的时候看到的一个网站,感觉效果很有趣就简单模仿一下,原站地址在这里

使用了transform.js方便的控制transform属性

这里有制作思路点这里

没有做兼容,Chrome系列之外的可能没有效果

Canvas动画之霓虹雨 演示地址 查看代码

在网上看到的一个Canvas动画,感觉比较炫酷就照着写了一个,原地址codepan

详细解析看这里

快餐店管理系统

因为涉及到后台和数据库暂无演示地址,独立仓库看这里AwesomePOS

利用Canvas进行数字图像处理 演示地址 查看代码

不想直接用老师的MATLEB代码,因为自己是前端方向的,想到了以前看过canvas有相关操作像素的Api就用js把相关算法进行了重写,好处就是不再需要以来相关的环境直接在浏览器上就可以运行,缺点也是因为在浏览器中性能不是那么好,大图片会有一两秒的卡顿。

WebSocket

简单的体验了一下websocket,需要服务端配合。

React相关 查看代码

学习React留下的记录,没什么好看的

挖财前端笔试题 点击进入

要求都在相关目录下面README里面,虽然写的框架不限,由于第二个基本上是现成的组件,交过去之后要求我重写。但是挖财面试周期太长了,那时候已经收到好几个offer了很遗憾只能放弃挖财了。

AI贪吃蛇 查看项目 Demo

说是AI其实就是各种搜索策略,用来自动跑贪吃蛇,大部分代码都是贪吃蛇的游戏代码。寻路部分的代码在findpath.js文件 策略还不是很完美,目前只能吃95%的方块

About

平时学习练习的一些小Demo的仓库


Languages

Language:TypeScript 36.5%Language:JavaScript 30.3%Language:HTML 25.1%Language:Vue 4.6%Language:CSS 3.4%Language:Shell 0.0%