FrontEnd-examples

秋天也是个好季节，不能说脏话啦啦啦啦啦

随便写写的小栗子（不断更新中。。。）

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实现网页中元素拖拽及本地资源显示在网页中等小栗子，具体原理请移步至详解
• 请在chrome中打开，其他浏览器未做兼容！！！

源码地址

预览地址1

预览地址2

预览地址3

09. 在线网页便筏

• 酝酿中额~

10. requestAnimationFrame小栗子

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

源码地址

预览地址

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

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

源码地址

12. 自定义滚动条样式

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

源码地址

预览地址（chrome下有效）