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小栗子

源码地址

预览地址

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

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

源码地址

12. 自定义滚动条样式

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

源码地址

预览地址(chrome下有效)

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

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

源码地址

预览地址