History API在各浏览器下的支持情况： 不支持 4.0+ 5.0+ 8.0+ 不支持 比较典型的是GitHub，在点击代码文件夹和文件时，会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了...history在HTML4的时代里，有如下几个方法和属性，应该很熟悉： length、back()、forward()、go([delta]) 在HTML5中又添加了两个方法： pushState(data... HTML5__History API...History API not supported 最后一次触发的事件: (none) <p...'当前浏览器支持HTML5 History API'; 73: } 74: })(); 75: 76: addEvent(examples, 'click', function (
说到File API，比如有意思就是图片上传了。国外有一个网站叫min.us 用户只需要把图片拖到网页面中，然后自己进行排序就OK了，很方便。...而HTML5中的FileReader对象与as3中的很像，只不过目前as3中的方法比这个多(有兴趣可以自己去看看adobe的lives docs，对比一下两者的区别与共同点)。...讲了这么多，回到正题：File API，拿图片上传为例（File、FileReader）： 1、首先，如何控制用户单选、多选。...HTML5中允许选择多个文件： 只允许上传一个文件： 2、如何让用户只能上传指定的文件格式...关于定义的配置规则，可以参考这一篇文章：nginx下php获取自定义请求头参数的方法 搜索了很多关于html5 upload的例子，有人用.net、ruby写了，但没有找到用php写的（有是有，不过是使用提交
Geolocation API用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。...IE6~IE8外，其它最新的浏览器基本上都支持，包括最新的移动手机。...DOCTYPE html> HTML5 Geolocation body {background-color...核心的javascript脚本： <script type="text/javascript" src="http://maps.google.com/maps/<em>api</em>/js?...<em>的</em>更多参考： W3C geolocation <em>API</em> Gears BlackBerry geolocation <em>API</em> Nokia geolocation <em>API</em> Palm geolocation <em>API</em>
HTML5 File API ? 在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。...通过文件 API，我们可以访问 FileList，包含了代表用户所选文件的对象 File。...上传文件 使用 FormData对象或者 FileReader可以实现文件上传，或者使用 HTML5 提供的 FormData 来实现。下面一一介绍这三个方法。...对于上传文件，可以使用 FileReader API 中的一个方法来实现文件上传的目的 —— readAsBinaryString(blob) 或者 readAsArrayBuffer(blob)。...的一个 API。
HTML5就是牛，可以直接播放音视频，还可以作图； 一、HTML5中播放视频和音频： 加载时直接播放音频的方式：new Audio("BY2.mp3").play(); <...} g>text{ font-family: sans-serif;font-size: 6pt; } js: 三、HTML5...的 IE9之前版本的浏览器不支持； 修改绘制的图形就必须把当前的擦除在重新绘制，而使用SVG绘制的图形，可以通过简单的移除相应的元素来修改图片；...setTimeout setInterval()等；测试时发现不支持doucment.get*等函数,可能还不支持文档交互，但是已经支持log输出(chrome)； 六、二进制数据Blob和文件系统API...: 1、Blob对象是JavaScript中代表二进制数据的对象；提供了操作二进制数据的接口，在其基础上，实现了FielList对象、File对象、FileReader对象等操作文件的API；在支持
H5 提供了一组简洁有效的文件操作接口：File API 主要涉及： FileList：用户通过file控件或拖拽选择的一组文件； File：FileList里面放的就是File; Blob：代表一段二进制数据...，File就是继承自Blob； FileReader：用于从File、Blob中读取数据； FormData：用Ajax实现上传、进度显示时会用到； 特别注意： H5 的 File API 虽然可以让我们访问本地文件系统...，但只能被动地读取，也就是说只有用户主动触发了文件读取行为（比如通过file控件选择选择文件或拖拽文件），才能访问到File API； 浏览器兼容性（意料之中...IE必然不靠谱...）： ?...(Blob|File)： 用于将 Blob 或 File 对象，转换为一个基于base64编码的Data URL对象。...示例3：文件上传时展示进度 XMLHttpRequest 在 HTML5 规范中引入了几个新特性： 上传或者下载中的进度事件（onprogress）； 支持上传文件（File、Blob、FormData
HTML5 的 performance timing API 统计了一个浏览器窗口从卸载当前页面开始到加载完毕目标页面的整个流程中，每个节点的时间戳 通过这些节点的时间戳，我们可以计算出很多有用的信息...例如 DNS 查询耗时 TCP连接耗时 request请求耗时 解析dom树耗时 …… 在GitHub上找到一个很实用的JS代码，统计出了各项耗时数据 地址是：https://github.com.../CraryPrimitiveMan/performance-tool 下面列出其中的各项数据计算方式 准备新页面时间耗时 timing.fetchStart - timing.navigationStart
什么是 Canvas API? Canvas API（画布）提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式。...每个 canvas 元素都有一个对应的 context 对象（上下文对象），Canvas API 定义在 context 对象上，使用 getContext 方法来获取对象。...绘图方法 canvas 画布提供了一个画图的平面空间范围，每个点都有自己的坐标，原点位于画布的左上角，x表示横坐标，y表示纵坐标。...，x,y 是文字的位置，需要注意的是 y 坐标是以文字的基线处开始算距离的，并非是文字顶部。...DOM 元素，x,y 表示绘制图片的起始位置，也是图片的左上角。
HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。...HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。...新的 HTML5 canvas 是一个原生 HTML 绘图簿，用于 JavaScript 代码，不使用第三方工具。...跨所有 web 浏览器的完整 HTML5 支持还没有完成，但在新兴的支持中，canvas 已经可以在几乎所有现代浏览器上良好运行了，但 Windows® Internet Explorer® 除外。...-- 如果浏览器不支持这个API，则就会显示canvas标签中间的文字——“您的浏览器不支持canvas！”。
但是HTML5 Canvas出来之后，很多动态生成或者展示图形、图表、图像或者动画的功能都由Canvas来完成。...Canvas的缺点：用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间 Canvas的优点: 1.不需要将所有绘制的图像中的每个元素当做对象存储，因此执行性能非常好 2.Canvas API...通过获取上下文(context)，执行一些动作，可以完成图形的绘制和动画功能。canvas只是一个标签，后面强大的功能是通过Javascript API完成。...处理老的浏览器不支持HTML5 Canvas元素的问题，可以在canva标签里面添加内容，当然也可以使用Modernizr 类库进行不同浏览器之间的兼容操作。... 您的浏览器不支持HTML5 Canvas，请升级您的浏览器 . 3.一个简单的Canvas Demo
计时API可以测量两个预定义标记之间的性能，仅需要分别定义测量的开始和结束标记 例如 var start = performance.now(); ... var start = performance.now...(); 这个方式和我们通常使用Date获取时间戳的方式很像，他们的主要区别有两个 （1）now能够精确到千分位小数的毫秒值，Date时间戳得到的是毫秒 （2）now是从浏览器浏览开始事件触发时到现在的毫秒数...，时间戳是当前时间的毫秒数 示例 - 分析一个图片的加载时间 var start
DOCTYPE html> html5文件API <script type="text/javascript...// 返回 FileList对象 var files = file.files; for(i=0;i<files.length;i++){ //获取文件<em>的</em>名称...类型 限制 上传<em>的</em>类型 ,用正则表达式验证 */ var type =file.files[0].type;//文件<em>的</em>类型 image/png,image/jpeg,text/plain...-- <em>html5</em>为文件域添加multiple="multiple"支持多文件上传，用逗号分隔 --> 附件:<input type="file" id="file" multiple="multiple...-- 添加accept属性 限制要选择<em>的</em>文件<em>的</em>类型，但只是在打开文件选择那一刻筛选出符合条件<em>的</em>文件 ,例如:下面要求文件类型为图片,打开文件选择框时只会列出所有的图片文件; 具体情况各大浏览器支持不一样
发表于2017-08-152019-01-01 作者 wind 使用方法主要为两个步骤： 1、给可以拖动的元素添加属性 draggable=‘true’，绑定dragstart事件，用于给传输对象保存内容...DataTransfer.setDragImage() Set the image to be used for dragging if a custom one is desired. 2、给接收的元素添加...drop事件阻止默认行为防止页面跳转，用来接收传输对象带来的数据，添加dragover事件阻止默认行为表示接收处理拖拽。
在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。...通过文件 API，我们可以访问 FileList，包含了代表用户所选文件的对象 File。...上传文件 使用 FormData对象或者 FileReader可以实现文件上传，或者使用 HTML5 提供的 FormData 来实现。下面一一介绍这三个方法。...对于上传文件，可以使用 FileReader API 中的一个方法来实现文件上传的目的 —— readAsBinaryString(blob) 或者 readAsArrayBuffer(blob)。...的一个 API。
以下是之前学习的一些HTML5 API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。...--link Prefetching Page Visibility 页面可见性API 该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。...Full Screen API全屏API 该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。十分简单有用的api....全屏api目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的api getUserMedia API 该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的...这样的话我们就可以使用本地的播放器来播放。 电池API（Battery API） 这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。
Jeff 在第一次看到的时候就知道这种效果是通过HTML5 的Page Visibility API 实现的（不是吹牛）。 ?...直到现在我还没去查看36kr 的源代码看其是如何实现的（也不打算去一个个查看它繁杂的js 文件了），HTML5 的Page Visibility API 以前看过，看到36kr 实现了这个的时候一时兴起...”；虽然我一直认为好的技术文不应该过多复制API 文档的内容，但在这里还是从自己的角度为没接触过这个Page Visibility API 的同志们解析下。...HTML5 的那帮搞标准的也适时提出了这个Page Visibility API——以期更好地利用这个“时隐时现”的动作。...Page Visibility API使用方法 Page Visibility API 有两个相关的属性：document.visibilityState及document.hidden。
本文作者：IMWeb coverguo 原文出处：IMWeb社区 未经同意，禁止转载 以下是之前学习的一些HTML5 API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。...--link Prefetching Page Visibility 页面可见性API 该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。...Full Screen API全屏API 该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。十分简单有用的api....全屏api目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的api getUserMedia API 该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的...这样的话我们就可以使用本地的播放器来播放。 电池API（Battery API） 这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。
抛开兼容性，HTML5 提供的一系列 API 可以简化很多代码量。...function addDnDHandlers(elem) { elem.addEventListener('dragstart', handleDragStart, false); //拖拽元素开始被拖拽的时候触发的事件...，此事件作用在被拖曳元素上 elem.addEventListener('dragenter', handleDragEnter, false) //当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上...('dragleave', handleDragLeave, false); //拖拽元素离开目标元素上移动的时候触发的事件，此事件作用在目标元素上 elem.addEventListener('drop...，利用拖拽事件添加class 并设置css就能有“响应”式的效果。
timing API统计了一个浏览器窗口从 卸载当前页面开始 到 加载完毕目标页面的整个流程中，每个节点的时间戳 具体都有哪些时间节点呢？...下面是很详细的示意图 各个节点的示意图 各个节点的含义 navigationStart 当访问一个新页面时，当前页面卸载完成所返回的时间点，如果没有当前页面，则返回fetchStart时间点 unloadEventEnd...如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart 如果是HTTP重定向，如果跳转都是同源的，则返回开始获取发起重定向的时间点...，否则返回0 redirectEnd 如果是同源重定向，返回重定向请求接收完最后一字节的时间点，否则返回0 fetchStart 如果请求是用http get发起的，返回浏览器查缓存之前的时间点...load事件执行之前的时间点，否则为0 loadEventEnd 返回浏览器触发load事件执行完成的时间点
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
