我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放.页面的展示的状态的判断就需要用到html5新增的一个api:document.hidden. document.hidden属性:bool型,表示页面是否处于隐藏状态.页面隐藏包括页面在后台标签页或者浏览器最小化. visibilitychange事件:当文档的可见性改变时触发. 兼容性写法如下,当在浏览器里切换标签页或者最小化时就会console打印出状态的变化: var

拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转义键),应用在被拖拽元素上 3.dragenter:当一个被拖动的元素或者选中的文本进入一个有效的放置目标时触发,应用在目标元素上 4.dragexit:当元素不再是拖动操作的直接选择元素时触发(很少使用) 5.dragleave:当拖动元素或者选中的文本离开有效的放置区域时触发,应用在目标元素上

摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件 先讲怎么使用,具体的原理在后边补充 第一步:捕捉重力加速度 var acceleration = eventData.accelerationIncludingGravity; 第二步:监听函数并执行. var SHAKE_THRESHOLD = 800; var last_update = 0; var x, y, z, last_x, last_y, last_z; if ((window.DeviceMotionEv

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时

// 判断上下滑动 var startX = 0, startY = 0; function touchStart(evt){ try{ var touch = evt.touches[0], //获取第一个触点 x = Number(touch.pageX), //页面触点X坐标 y = Number(touch.pageY); //页面触点Y坐标 //记录触点初始位置 startX = x; startY = y; }catch(e){ console.log(e.message) } }

定义和用法 ondrag 事件在元素或者选取的文本被拖动时触发. 拖放是 HTML5 中非常常见的功能. 更多信息可以查看我们 HTML 教程中的 HTML5 拖放. 注意: 为了让元素可拖动,需要使用 HTML5 draggable 属性. 提示: 链接和图片默认是可拖动的,不需要 draggable 属性. 在拖放的过程中会触发以下事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户

弱鸡今天在写键盘事件,发生一个小bug,排查了1小时(">皿<)可恶的浏览器竟然还不报错!!原因是将e.ctrlKey写成了e.ctrLKey,o(ﾟДﾟ)っ 想想都要生气<(‵^′)> Anyway,在哪里跌倒就要在哪里爬起来!记录几个tips(๑•ᴗ•๑) 键盘码的兼容写法:var keyNum=window.event?e.keyCode : e.which; 若是不想浏览器出现滚动条,设置body{overflow:hidden}; 事件onkeyup和onkey

地址 https://www.w3.org/TR/DOM-Level-3-Events/#h3_interface-Event https://segmentfault.com/q/1010000000687977/a-1020000000688757 https://segmentfault.com/q/1010000000687977/a-1020000000688757 https://www.w3.org/TR/DOM-Level-3-Events/#h3_interface-Event

最近在一个群里看到,有人在探讨H5,也看到自己关注的大神使用过H5的画布(canvas),于是心血来潮,看了点教程,也算对的起自己吧. 一.H5的新特性: 1.用于绘画的canvas元素 2.用于媒介回放的video和audio元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比如article.footer.header.nav.section 5.新的表单控件:比如calendar.date.time.email.url.search 下面截图来自极客学院教程 二.一个基本的H5页

HTML5 虽然很多年了,但是真的了解不不够不够.主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐 说起. QQ音乐的主页是 https://y.qq.com , 而实际播放的页面是 https://y.qq.com/portal/player.html.你在其他里面点击播放或者添加的时候,你会发现 https://y.qq.com/portal/player.html 会实时的变化.当前我想,这个神奇啊, 当前想法是如下,可是怎么想都比较low啊. 1. 存入

1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添加.stop修饰符,如下: 我们发现再次点击按钮后,事件不再冒泡,控制台只打出 2.prevent取消默认事件 .prevent等同于JavaScript的event.preventDefault(),用于取消默认事件.比如我们页面的<a href="#">标签,当用户点击时,

<!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style> </style> <style> *{ padding: 0; margin: 0; list-s

由于H5的灵活多变,动态可配的特点,也为了避免冗长 的审核周期,H5页面在app上的重要性正日益突显. iOS应用于H5交互的控件主要是UIWebView及WKWebView WKWebView是14年随iOS8推出的,很好的解决了UIWebView加载速度慢,内存占用大的问题 WebViewJavaScriptBridge是一款轻量级的框架,使用它结合wkwebview能十分方便的实现源生与H5的交互 webviewJavaScrptBridge的基本使用 1.初始化需bind视图 [WebV

前言 ​ 所谓的 APP 和 H5 打通,是指 H5 集成 JavaScript 数据采集 SDK 后,H5 触发的事件不直接同步给服务器,而是先发给 APP 端的数据采集 SDK,经过 APP 端数据采集 SDK 二次加工处理后存入本地缓存再进行同步. 一.App 与 H5 打通原因 1.1 数据丢失率 ​ APP 端采集数据的丢失率一般在 1% 左右,而 H5 采集数据的丢失率一般在 5% 左右(主要是因为缓存,网络或切换界面等原因).因此,如果 APP 与 H5 打通,H5所有事件都可以先

平时写代码用到的方法,就给封装了一下.需要的拿走不谢... 1.数组去重 并判断一个元素出现的次数 handle(str){ let arr=str.split('') var newarr=[]; var obj={}; for(var i=0;i<arr.length;i++){ if(!obj[arr[i]]){ newarr.push(arr[i]); obj[arr[i]]=1; }else{ obj[arr[i]]++; } } console.log(obj);//{a: 3, b

一.SVG 1.svg与canvas的区别 canvas绘制的是位图,svg绘制的是矢量图 canvas使用JavaScript绘制,svg使用xml绘制 canvas不能给每个图形绑定事件,svg可以给每个图形绑定事件 canvas适合游戏等频繁操作的应用,svg适合图标 canvas需要支持H5标准的浏览器,svg的兼容到IE6 2.在html中使用svg <embed引入> <embed src="circle1.svg" type="image/sv

HTML 属性赋予元素意义和语境. 下面的全局属性可用于任何 HTML 元 属性 描述 accesskey 规定激活元素的快捷键. class 规定元素的一个或多个类名(引用样式表中的类). contenteditable    H5 规定元素内容是否可编辑. contextmenu    H5 规定元素的上下文菜单.上下文菜单在用户点击元素时显示. data‐*   H5 用于存储页面或应用程序的私有定制数据. dir 规定元素中内容的文本方向. draggable   H5 规定元素是否可拖

HTML5 HTML5和HTML事件 注意:行内代码的为H5新增事件 Window事件属性: 针对 window 对象触发的事件(应用到 标签) onafterprint 文档打印之后运行的脚本 onbeforeprint 文档打印之前运行的脚本 onbeforeunload 文档卸载之前运行的脚本 onerror 在错误发生时执行的脚本 onhaschange 当文档以改变时运行的脚本 onload 页面结束加载之后触发 onmessgae 在消息被触发时运行的脚本 onoffline 当文档

    <script type="text/javascript">        $(function () {            //每次隐藏的时候 删除页面数据 重新加载            $("#per_handler").on("hidden.bs.modal", function () { $(this).removeData("bs.modal"); });             $(&q

http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. Bootstrap modals dialog hidden removeData 目录[-] 1. Bootstrap 模态对话框和简单使用

H5拖放事件巩固实例: 1.简单布局一下,商品信息放入一个ul中:div为购物车,后续会创建元素 <ul> <li draggable="true"> <img src="img1.jpg" /> <p>javascript语言精粹</p> <p>￥</p> </li> <li draggable="true"> <img src=&