HTML5(二)
2017-01-06 本文已影响39人
lilyping
![](https://img.haomeiwen.com/i2602441/1c9836d744b96a66.png)
一、data自定义数据
![](http://upload-images.jianshu.io/upload_images/2602441-5c8377eea6cfe710.png)
例子
data-name:
![](http://upload-images.jianshu.io/upload_images/2602441-e6a2367f943f8764.png)
![](http://upload-images.jianshu.io/upload_images/2602441-5cfb48ec8f2df45b.png)
data-name-first:
![](http://upload-images.jianshu.io/upload_images/2602441-027ec85a6d5ed784.png)
![](http://upload-images.jianshu.io/upload_images/2602441-7d230faab4f19dba.png)
二、延迟加载JS
![](http://upload-images.jianshu.io/upload_images/2602441-f6306480338aa6a3.png)
defer=”defer”:等所有加载完后再去加载它
![](http://upload-images.jianshu.io/upload_images/2602441-4e968d3417ca5507.png)
三、历史管理
![](http://upload-images.jianshu.io/upload_images/2602441-bd30f27fd9a7d3a5.png)
![](http://upload-images.jianshu.io/upload_images/2602441-e1c0d9555b78fc8a.png)
随机取数的例子:
![](http://upload-images.jianshu.io/upload_images/2602441-55336ec7e6b50543.png)
![](http://upload-images.jianshu.io/upload_images/2602441-1c5890bbece366e8.png)
使用历史事件需要这样:(第一种方法)(substring减法)
![](http://upload-images.jianshu.io/upload_images/2602441-e0386dd6c63bab63.png)
现在的随机数
![](http://upload-images.jianshu.io/upload_images/2602441-e0652f849cd4e9b1.png)
后退一步的随机数
![](http://upload-images.jianshu.io/upload_images/2602441-d2f0055691e15543.png)
另外一种方法:(pushstate输出、onpopstate输入)
![](http://upload-images.jianshu.io/upload_images/2602441-26b64bc5d4ec3ca4.png)
现在的随机数
![](http://upload-images.jianshu.io/upload_images/2602441-3e7bce1495463e0a.png)
后退一步的随机数
![](http://upload-images.jianshu.io/upload_images/2602441-0e003bc156f7a2fa.png)
拖放事件
![](http://upload-images.jianshu.io/upload_images/2602441-b3d69dc7209cc312.png)
![](http://upload-images.jianshu.io/upload_images/2602441-fbe4aca381c88a3f.png)
例子
(拖放事件)
![](http://upload-images.jianshu.io/upload_images/2602441-1fb4898a8181de1a.png)
![](http://upload-images.jianshu.io/upload_images/2602441-98df06ffb5e5f704.png)
(目标元素事件)
![](http://upload-images.jianshu.io/upload_images/2602441-649df94bab09074a.png)
![](http://upload-images.jianshu.io/upload_images/2602441-bb0700347eecaefc.png)
注意事项
![](http://upload-images.jianshu.io/upload_images/2602441-f6378ebef4fb28bd.png)
拖放事件,解决火狐下的问题
![](http://upload-images.jianshu.io/upload_images/2602441-5cb14069af64ec77.png)
(ev.dataTransfer.setData(‘name’,’hello’);设置信息)
(ev.dataTransfer.getData(‘name’);获取数据)
![](http://upload-images.jianshu.io/upload_images/2602441-493cbb9c02d52685.png)
![](http://upload-images.jianshu.io/upload_images/2602441-5a9e695a428f77ca.png)
(删除事件:removeChild();)
![](http://upload-images.jianshu.io/upload_images/2602441-e14970342de0dae8.png)
![](http://upload-images.jianshu.io/upload_images/2602441-3ff09f348c0af3f4.png)
往后还会继续更新h5知识,谢谢阅读本人的文章,若有什么需要改正的,请指正,本人乐意改善
本文作者lilyping
越努力,越幸运
原文链接:https://www.jianshu.com/u/3908e601f4ec
微信公众号:BestLilyPing
github:https://github.com/lilyping
Demos源码地址:https://github.com/lilyping