H5高级

lmxdawn 发布于2019-08-05 15:48 / 1889人阅读

摘要：方法查看地址拖放两个关键点源元素被拖放的元素，目标元素一个容器。对象保存拖放过程中的各种组件数据，通过事件对象获取。

HTML5 Core

新表单元素

新表单验证API

多媒体处理（视频、音频）

Canvas

新API（拖拽、web存储）

表单相关：

新元素datalist 、progress、 meter 、output

新api方法：定制验证消息、实现表单验证

setCustomValidity( ) ：h5有自带提示框（required），该方法可以修改提示种的文字；

无错误时需要调用setCustomValidity(‘’)，置空消息提示，否则无法提交表单；

checkValidity() ：返回验证是否通过。

res = ele.checkValidity(); // res为布尔值，通过为真

新事件：invalid事件，表单执行遇到错误即会触发；

formEle.addEventListener(‘invalid’,fn,false);//fn中通过事件获取出问题的第一个表单元素；

ValidityState对象：通过元素的validity属性获取，返回表单验证的各种状态；

ele.validity;

Canvas：

绘图元素，配合js，先用 getContext(“2d”) 得到画布上下文（理解为画笔），通过上下文调用api绘图。
方法api查看地址：http://www.w3school.com.cn/ht...

拖放API：

两个关键点：源元素（被拖放的元素），目标元素（一个容器）。

源元素事件：

dragstart：开始拖动时，触发

drag：拖动过程中触发

dragend：拖动结束时，触发

目标元素事件：

dragenter：拖动过程，鼠标第一次进入目标元素区域；

dragover：当对象拖动到目标对象时，悬浮在目标元素

drop：在目标元素投放时（松手）触发

dragleave：对象离开目标元素时触发

注意：执行上述方法时，通过 preventDefault 方法阻止默认事件。

dataTransfer对象：保存拖放过程中的各种组件数据，通过事件对象 e 获取。

dataTransfer = e.dataTransfer // 对象，常用的4个方法：
-setData("type", "data")：// 声明设置的数据和类型
-getData("type")：// 获取类型的数据
-clearData("type")：// 删除类型数据
-setDragImage(img, x, y)：// 拖放的过程中，鼠标指针指向一个虚图，该方法可以修改这个图。

私有云专线服务 h5 h5 直播 h5直播 h5官网

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58776.html

JS高级面试之hybrid部分

摘要：该文章主要记录前端客户端混合开发的一些知识点是什么，为何用是客户端与前端的混合开发存在的核心意义在意快速迭代，无需审核实现流程，以及和协议介绍一下更新和上线的流程掌握流程图要点一服务端的版本和包维护要点二更新包之前，先对比版本号要点三下载解该文章主要记录hybrid前端客户端混合开发的一些知识点 Hybrid 1. hybrid是什么，为何用hybrid？ hybrid是客户端与前端...

SimpleTriangle 2019-08-23 16:47 评论0 收藏0
移动端图片裁剪器，安装即用

摘要：移动端图片裁剪器，基于制作的简单裁剪器项目地址案例演示部分裁剪案例开始裁剪部分演示案例手机模式查看，效果更佳。 h5-cropper 移动端图片裁剪器，基于 cropperjs 制作的简单裁剪器项目地址 https://github.com/sayll/h5-cropper 案例演示 HTML部分：裁剪案例开始裁剪 JS...

Corwien 2019-08-05 17:23 评论0 收藏0
移动端图片裁剪器，安装即用

摘要：移动端图片裁剪器，基于制作的简单裁剪器项目地址案例演示部分裁剪案例开始裁剪部分演示案例手机模式查看，效果更佳。 h5-cropper 移动端图片裁剪器，基于 cropperjs 制作的简单裁剪器项目地址 https://github.com/sayll/h5-cropper 案例演示 HTML部分：裁剪案例开始裁剪 JS...

MASAILA 2019-08-23 18:14 评论0 收藏0
用自定义的拖放实现一个汉诺塔游戏

摘要：做这个汉诺塔游戏的想法，来自于几个月前做百度第一期的一个题目，题目要求在两个容器间实现子元素的相互拖拽效果。重构好的代码我放上了，实现的效果可见其，一起玩玩呗，觉得好玩记得给哈做这个汉诺塔游戏的想法，来自于几个月前做百度IFE第一期的一个题目，题目要求在两个容器间实现子元素的相互拖拽效果。当时我就突发奇想：容器看成柱子，子元素看成盘子，再加一点限制底下盘子移动的判断和胜负的判断，不就...

amc 2019-08-19 17:44 评论0 收藏0
优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0