如今一个网页展现的内容是越来越丰富，其中不乏一些HTML5、CSS3的功能特效。那么如果客户端的浏览器支持HTML5。页面访问效果很好没有问题。如果不支持HTML5，还是IE6,7,8等浏览器的时候呢？这个时候往往是作为一个前段人员非常头痛的事情了，兼容。此时的兼容。无非是让用户能够尽可能的在所有的浏览器的里面看上去，使用上都是一致的。但是页面使用了HTML5标签，使用了CSS3样式。客户端浏览器不支持HTML5，怎么办呢?对于这样的问题...
前言 本章主要内容是Web Storage与本地数据库，其中Web Storage 是对cookie的优化，本地数据库是HTML5新增的一个功能，使用它可以在客户端建立一个数据库 大大减轻服务器端的负担，加快访问数据速度。 学习本章需要掌握Web Storage基本概念，了解sessionStorage与localStorage的使用与差别 掌握本地数据库的使用 什么是WebStorage？ 前面说过，webstorage是对cookie的优化而来，HTML4中使用cookie在客户端存储用户数据，长期使用发...
HTML5的video虽然可用controls来展示控件，并进行控制播放暂停等，但是不同的浏览器显示的效果可能不一样，所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。 当然效果不是很美观，若想好看的可以自己设置css样式等。 代码如下: 播放/暂停 大 中 小 您的浏览器不支持此HTML5 视频标签。 代码如下: var myVideo=document.getElementById("myVideo"); function playPause() { if (myVideo.pause...
首先来了解一下windows 8 的贴靠，在windows 8 中的Metro应用可以将屏幕很好的进行分割.如下图让用户在使用时可以非常方便的切换。 系统对贴靠也是有硬性规定的。最多两个屏幕，而且是一个大的一个小的。并且小屏的宽度是固定的 320像素。 所以当用户把网站贴成小屏幕，这个时候页面默认是等比例缩小的。如下图:那么怎么很好的解决这样的一个问题呢？让网站在windows 8的贴靠小屏幕下显示非常友好的效果呢？下面我有一个简单的示例...
原本效果拖拽之后效果代码如下 代码如下:[code]#div1, #div2{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));} [/code]它看...
首先在html页面中放置一个canvas元素，其中canvas元素应该具备三个属性ID、width、height。 代码如下: 取得canvas对象并取得上下文var cxt=document.getElementById('demo').getContext("2d");其中参数2d是确定的。 开始绘制，有两种形式，一种是描边（fill），一种是填充（stroke）。 javascript代码： 代码如下: var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath(); cxt.fillStyle="#F00";/*设置填充...
本文概述 长期以来,音频与视频信息的捕捉一直是Web开发中的一个难点。许多年来,我们一直依赖浏览器插件来实现这个需求。 在HTML 5中,出现了许多可以访问硬件设备的API,例如访问GPS设备的Geolocation API、访问accelerometer设备的Orientation API、访问GPU设备的WebGL API、访问音频播放设备的Web Audio API等等。这些API是非常强大的,因为开发者可以直接通过编写JavaSccript脚本代码来访问底层硬件设备。 本文介绍一种新的API,该A...
首先要说明的是这里不是用鼠标画画，而是在触摸设备上用手指，比如ipad。 做画图板，自然使用html5的canvas来实现了。在canvas中我们可以画圆，画矩形，画自定义的线条等等。这次主要使用的画圆跟画线条来实现。html中支持对触摸事件的响应。 onTouchStart 触摸开始 onTouchMove 触摸滑动 onTouchEnd 触摸结束 有了这些事件，我们实现用手指在浏览器里画画就很简单了。 IPAD上的效果：思路：当手指触摸到屏幕的时候在onTouchStart ...
IE 对html5的支持还得从IE9说起。在IE9时，就已经对HTML5和CSS3有着比较好的支持了，还有不得不说的硬件加速，以及全新的javascript解析引擎 Chakra（查克拉），Chakra在同行业中对javascript的解析速度排名第一。以下是在IE9时对HTMl5的支持列表如果在IE9上做过HTML5开发的，可能会感叹，效果和性能是很好但是支持的太少了。 对于这样的问题现在说 OK 现在IE10 全面支持HTML5，在ie9的基础上新加入了33个功能支持。并且都是遵从W3...
在做旋转操作之前一定要理解一句话：旋转的是画布的坐标系而不是图形本身，好了，理解了这一句话后，接下来的就很简单了。 首先认识一下画圆的坐标： 代码如下: var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath(); cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*绘制一段半圆弧线，圆心坐标是100,100；开始弧度是0.75，结束弧度是1.75，最后一个参数False = 顺时针，true = 逆时针，当然，这...
PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台。官方说有低成本，低开发周期，轻量化等优点，这些咱暂时也没法证明，略过不表。但是有一条跨平台，却是很明显的优势。因为它采用HTML5+JavaScript的模式来开发应用。PhoneGap用JavaScript统一封装了几大平台的本地api（Andriod，IOS，WP8/7，WINRT）等等。。这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去，打包一下...
HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y) 图示如下： 任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)。 代码演示： 代码如下: // translate is move the startpoint to centera and back to top left corner function renderText(width, height...
代码如下: 现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。 代码如下: HTML 5 视频 检测您的浏览器是否支持 HTML5 视频： Check
在IE10中新加入的对高级用户输入的识别支持，举例说明：注册一个点击操作，通过一句addEventListener 就能够知道当前用户的点击是哪种设备，是手指的点击，是鼠标的单击还是触控笔的点击（平板设备都会带有触控笔）。<canvas id="MyCanvas"></canvas> <script> MyCanvas.addEventListener("MSPointerDown", MyBack, false); function MyBack(e) { alert(e.pointerType.toString()); } </scr...
很多人在测试worker api的时候，总是会出现异常，根本测试不到效果。 在使用worker的时候有个必须注意的地方，就是单纯的文本文件是实现不了worker的，你写的实际代码 必须部署到服务器（tomcat.jBoss等）才能运行worker api。 下面写个简单例子 js代码test.js（worker） 代码如下: function messageHandler(e) { postMessage("worker says: " + e.data + " too"); } addEventListener("message", messageHandler, true); postMess...