效果图：提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。实现代码：复制代码代码如下:<!doctype html><html lang="zh"><head><meta charset="gbk"><title>锯齿图</title><script type="text/javascript">window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){var x,y;var theCanvas = document.getElementById("canvas");var context = theCanvas.getContext("2d");//Boxcon...
这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。 下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。 HTML代...
前言：因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传，而自己对java文件上传这一块未接触过，且对 Http 协议较模糊，故这次采用渐进的方式来学习文件上传的原理与实践。该博客重在实践。 一. Http协议原理简介 HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版...
一、indexedDB为何替代了Web SQL Database？跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样，在前端领域，也不是哪来先出来哪个就在日后引领风骚的。HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。未来一定是indexedDB的，从目前浏览器的兼容性来看，也表明...
如果你使用jQuery类库，那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性，方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险主要的方法如下：复制代码代码如下:.data( key, value ).data( obj ).data( key ).data()从jQuery 1.4.3起， HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。例如HTML：复制代码代码如下:<div data-role = "page" data-last-value = "43" data-hidden = "...
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/ by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=3432一、本文就是个实例展示三点：我就TM想找个例子，知道如何个使用，使用语法什么的滚粗跟搜索引擎搞基自己备忘精力总是有限的，昨天一冲动，在上海浦东外环之外订了个90米的房子，要借钱筹首付、贷款和领证什么的。HTML5 history相...
技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记23.3 响应鼠标动作图3-2的效果已经有了，需要鼠标来操作展示想看的照片，这就需要在相应的地方加上事件。3.3.1 响应小照片单击动作在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法，在单击小图片时要显示大图片，这需要调用eg.showBig...
技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记13.2 照片加载与定位 根据功能设计，可以先写好 HTML 结构基础，再配好 CSS 做出大致效果，最后用 JavaScript加上各种动作。首先请看 HTML 代码结构。 3.2.1 HTML 代码 CSS代码保存到 eg3.css 文件中，JavaScript代码保存到 eg3.js 文件中，...
这几天使用H5开发了一个仿微信聊天前端界面，尤其微信底部编辑器那块处理的很好，使用HTML5来开发，虽说功能效果并没有微信那么全，但是也相当不错了，可以发送消息、表情，发送的消息自动回滚定位到底部，另外可以对消息、图片、视频有不同的右键处理提示，还有打赏、占屏等操作。html代码片段：<!--BEGIN 打赏--><div class="js_dialog" id="J_Dialog_dashang" style="display: none;"><!--<div class="weui-mask"></div>--><div...
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-html5拖拽</title> <style> #drop{width:300px;height:200px;background-color:#f00;padding:5px;border:2px solid #000;} #item{width:100px;height:100px;background-color:#ff0;padding:5px;margin:20px;border:1px solid #000;} *[draggable=true]{-moz-user-select:none;-khtml-user-dr...
在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。 多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。 ff下效果图： 代码： 复制代码代码如下:<h...
清华大学出版社推出的《HTML5网页开发实例详解》是一本最全的HTML 5技术书，是一本最全的HTML 5案例书，由大众点评网资深前端工程师周遥和聚划算资深前端工程师李春城联袂奉献。所有的实例和框架在这里给读者做一个预览。 1、当前天气的APP 2、新闻阅读列表APP3、一个网站的用户增长曲线图 4、网页中的3D效果5、用Node.js搭建Web Server 6、销售数据图表7、带字幕的视频播放器 ...
一、概述 所谓断点续传，其实只是指下载，也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的，HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传，需要自己实现。 二、Range 用于请求头中，指定第一个字节的位置和最后一个字节的位置，一般格式： Range:用于客户端到服务端的请求，可以通过改字段指定下载文件的某一段大小及其单位，字节偏移...
html5第一章（概论）1 html5第一章（概论）2 html5第一章（概论）3 html5第一章（概论）4 html5第一章（概论）5 html5第一章（概论）6 html5第一章（概论）7 html5第一章（概论）8 html5第二章（工具及资料）1 html5第二章（工具及资料）2 html5第三章（标签、页面结构和... (1) html5第三章（标签、页面结构和... (2) html5第三章（标签、页面结构和... (3) html5第三章（标签、页面结构和... (4) html5第三章（标签、页面结构和....
一、HTML5 Notification 简介HTML5 Notification ，即桌面通知。目前浏览器依然是一个严格的沙盒工作模式，这种模式把浏览器和桌面的通信隔离开。Notification可以跨越沙盒能够让浏览器即使是最小化状态也能将消息通知给用户。二、桌面提醒API复制代码代码如下:window.webkitNotifications该API有3个方法：复制代码代码如下:requestPermission 请求桌面通知checkPermission 检查桌面通知许可（PERMISSION_ALLOWED = 0, PERMISSI...