HTML5新特性

本章的主要内容有：

---

[1] 用于媒体回放的 video 和audio 元素

[2] HTML5拖放

[3] canvas简单应用

[4] Web存储: localStorage 和 SessionStorage

[5] Input输入类型

[6] 表单类型

[7] 表单属性

[8] 地理定位 (geolocation)

[9] Web Workers: Worker

[10] 服务器发送事件 EventSource

---

[1] 用于媒体回放的 video 和audio 元素

• video 支持格式：ogg/mp4/webm; audio 支持格式：ogg/mp3/wav

• audio 和 vedio 的用法基本相同, 只不过 audio 没有 width 和 height 属性

• controls 属性向用户显示控件, 比如播放按钮; autoplay 属性自动播放

• 根据 source 标签浏览器将使用第一个可识别的格式

视频/音频.png

[2] HTML5拖放

1. 把拖放元素的 draggable 属性设置为 true
2. 拖放元素的属性 ondragstart 调用一个函数, 通过 event 的 dataTransfer.setData() 方法设置被拖数据的数据类型和值
3. ondragover 属性规定在何处放置被拖动的数据, 这里必须要通过 event 的 preventDefault() 方法阻止对元素的默认处理方式
4. ondrop 属性设置被拖动的数据

** [注] IE 不支持 **

    

          /* 这里我就无能为力了，会把我的img替换成它的图片格式，为了防止自动转化，我把img和src中间空格去了 */
    
    


    

拖放.gif

[3] canvas简单应用

• canvas 元素本身是没有绘图能力, 所有的绘制工作必须在 JavaScript 内部完成

    
        坐标原点 (0, 0) 从左上角开始, 宽代表 x 轴, 高代表 y 轴
       
    
    

canvas绘图.png

[4] Web存储: localStorage 和 SessionStorage

1. localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后, 数据依然可用
2. sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后, 数据会被删除

result.png

[5] Input输入类型

• email, url, number, range, (date, month, week, time, datetime, datetime-local), color, search

    

        Email: 
        
        Points:    
        Date: 
        Time: 
        DateTime:  
        Color:   
         
    

result.png

[6] 表单类型

• datalist (下拉框), keygen (公钥和密钥), output (输出框)

    Webpage:   
    

datalist应用.png

[7] 表单属性

• placeholder, multiple, autofocus, required, pattern, form

    
    期待输入(灰色):  

    多文件上传:  

    自动获焦:  

    必填字段:  

    正则判断:  
 
    
    

        First name: 
        
    
    Last name:   

result.png

[8] 地理定位 (geolocation)

    
 点击这个按钮, 获得您的位置: 
    试一下
    

    

获得地理位置.png

[9] Web Workers: Worker

• Web Worker 是运行在后台的 JavaScript, 不会影响页面的性能
• 由于 web worker 位于外部文件中, 它们无法访问下例 JavaScript 对象: window 对象, document 对象, parent 对象
• 需要跨域访问, 故在本地不能运行 (上传至服务器即可查看下面代码的运行效果)

    Count numbers: 


    Start Worker
    Stop Worker
    

    

• js/timeCount.js文件

var i=0;
function timeCount() {
    i=i+1;
    postMessage(i);   /* postMessage() 方法向主线程发送数据 */
    setTimeout(timeCount,500);  /* 或 setTimeout("timeCount()",500); */
    timeCount();
}
timeCount();  /* 一定要调用函数执行 */

// 模拟双线程的用法

// onmessage = function (evt){
//   var p = evt.data;  //通过evt.data获得发送来的数据
//   var r = p + " world!!!";
//   postMessage(r);  //将获取到的数据加工后发送回主线程
// }

result.png

[10] 服务器发送事件 EventSource

• HTML5 服务器发送事件 (server-sent event) 允许网页获得来自服务器的更新

• php/server.php 文件

 不通过) */
    flush();
?>

result.png

欢迎指正错误和补充！