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实现网页中元素拖拽及本地资源显示在网页中等小栗子，具体原理请移步至详解

源码地址

预览地址1

预览地址2

预览地址3

09. 简易在线网页便筏

• 使用本地存储实现简易的在线网页便筏，基本功能已实现，还有点小问题。。。

源码地址

预览地址

10. requestAnimationFrame小栗子

• 使用requestAnimationFrame实现简单动画，要了解更多请移步关于动画，你需要知道的

源码地址

预览地址

11. Web Animations API (JS动画利器)

• 使用wappi的基本属性及方法，实现与css3动画同样的效果，其中waapi中有更丰富的方法来控制动画过程，但浏览器的支持度不高，玩玩小栗子还是可以的额

源码地址

12. 自定义滚动条样式

• 使用scrollbar的一些伪类实现自定义滚动条的样式，但兼容性是不存在的，所以就当随便耍耍~

源码地址

预览地址（chrome下有效）

17. 网易前端微专业的最终大作业

• 这是一个网易微专业的最后的大作业，为一个完整的应用页面，涉及到向后台请求数据，使用cookie及宽窄屏效果切换等，doc中给出了相关视觉稿及数据文档。

源码地址

预览地址