自总结 HTML5 新添加编程及特点.docx
《自总结 HTML5 新添加编程及特点.docx》由会员分享,可在线阅读,更多相关《自总结 HTML5 新添加编程及特点.docx(12页珍藏版)》请在冰豆网上搜索。
![自总结 HTML5 新添加编程及特点.docx](https://file1.bdocx.com/fileroot1/2023-1/30/ed45c7bc-bd00-4a7c-b116-066e4c035aed/ed45c7bc-bd00-4a7c-b116-066e4c035aed1.gif)
自总结HTML5新添加编程及特点
HTML5特性
表单输入新类型:
一般网页点击拖拽后释放,会在新的浏览器页面打开类似搜索词条之类的情况。
H5中任何元素都能拖放。
Step设置后(其实就是从Min起以step为增加等差的数才有效)
可添加属性同Number一样
允许从日历中选取一个日期
也可直接设定为只能选取month,week,time,datetime,datetime-local(IE中无效)
表单新元素:
表单新属性:
可以一次选择多个文件加入
即输入前背景提示语
表单提交时输入框不能为空
视屏块:
音屏块:
点击拖放(Drag和Drop):
一般网页点击拖拽后释放,会在新的浏览器页面打开类似搜索词条之类的情况。
H5中任何元素都能拖放。
首先设置元素的draggable=‘true’,ondragstart=‘调用JS函数’。
再设置目标区域元素块的ondrop=‘JS函数’,ondragover=‘JS函数’。
再在JS相关函数里添加功能:
Ondragstart:
利用dataTransfer.setData(“Text”,ev.target.id)以键值对存入拖动的元素ID。
Ondragover:
利用preventDefault()屏蔽浏览器拖动后自动开新窗口搜索词条的情况。
Ondrop:
preventDefault()屏蔽,通过getData获取拖拽的元素ID,并target.appendChild(getById)将元素控件放进此区域。
SVG矢量块:
WEB页面定位块:
点击按钮浏览器下方会出现:
跟踪移动时的位置:
WEB存储块:
本地不过期Localstorage存储方法(清空浏览器缓存则消失):
sessionStorage存储方法(session过期则消失):
WEB缓存块:
如果编辑图片或者修改JS函数不会被重新缓存,可以通过修改注释的方式让浏览器更新缓存。
WEBWORKER对象:
JS中可以写:
变量名=new…(“文件名”);
变量名.onmessage=function(event){执行功能};
获取对应New文件名的postMessage(i)传递过来的消息,利用event.data获取i值。