FrontEnd-examples
随便写写的小栗子
00.Html,css,js的基本结构与公共方法
- Html：最基础的文件结构参考
- css：样式的基础设置
- js：常用的公共js方法
01.省市区三级联动的三种实现的方式（原生js实现）
- 方式一：使用select的onchange事件及selectedIndex属性来完成，其中省市区（县）数据是在网上找的，不能保证真实性
- 方式二：按级选中省市区
- 方式三：此方法不属于联动，而是根据字母顺序来直接选中城市名称，使用的城市数据也是从网上找的，不能保证真实性
02. select表单详解及下拉列表模拟实现
- 介绍了select的一些属性
- 自定义select下拉按钮图标
- 原生js模拟select下拉列表的实现
03. 随机生成字母数字验证码
- 随机生成一串长度为4的字符串，作为随机验证码，然后跟用户输入的验证码进行判断是否一致。
04. angular4实现简易在线音乐播放
- 采用简易的观察者模式实现简易在线音乐播放
- 使用angular-cli创建的项目结构
- 数据来源：易源数据
(访问速度比较慢~)预览地址
05. 快速排序的js实现
- 根据百度百科中快速排序算法的原理完成js的实现。
06. 音乐可视化
- 摸索中……
07. 图片懒加载
- 注：我的图片体积较大，在线预览效果不是很好，直接预览demo打开network可以看到是出现在浏览器窗口中才加载，其中用到了一个较少人知道的
getBoundingClientRect()方法来获取元素边缘距浏览器顶部及左部的距离。详见MDN
08. HTML5拖放API小栗子
- 使用html5中的拖放API实现网页中元素拖拽及本地资源显示在网页中等小栗子，具体原理请移步至详解
09. 简易在线网页便筏
- 使用本地存储实现简易的在线网页便筏，基本功能已实现，还有点小问题。。。
10. requestAnimationFrame小栗子
- 使用requestAnimationFrame实现简单动画，要了解更多请移步关于动画，你需要知道的
11. Web Animations API (JS动画利器)
- 使用wappi的基本属性及方法，实现与css3动画同样的效果，其中waapi中有更丰富的方法来控制动画过程，但浏览器的支持度不高，玩玩小栗子还是可以的额
12. 自定义滚动条样式
- 使用scrollbar的一些伪类实现自定义滚动条的样式，但兼容性是不存在的，所以就当随便耍耍~
预览地址（chrome下有效）
17. 网易前端微专业的最终大作业
- 这是一个网易微专业的最后的大作业，为一个完整的应用页面，涉及到向后台请求数据，使用cookie及宽窄屏效果切换等，doc中给出了相关视觉稿及数据文档。