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 标签浏览器将使用第一个可识别的格式
    <video width="100px" height="100px" autoplay>
        <source src="vai/movie.ogg" type="video/ogg">
        <source src="vai/movie.mp4" type="video/mp4">
    </video>

    <audio src="vai/song.mp3" controls></audio>

视频/音频.png

[2] HTML5拖放

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

** [注] IE 不支持 **

    <div ondrop="drop()" ondragover="allowDrop()">
        <imgsrc="vai/w3c.gif" draggable="true" ondragstart="drag()" id="drag1" />  /* 这里我就无能为力了,简书会把我的img替换成它的图片格式,为了防止自动转化,我把img和src中间空格去了 */
    </div>
    <div ondrop="drop()" ondragover="allowDrop()"></div>

    <script type="text/javascript">
        function allowDrop() {
            event.preventDefault();
        }
        function drag() {
            event.dataTransfer.setData("***", event.target.id);  /* 在这个例子中, 数据类型是 "***", 值是可拖动元素的 id ("drag1") */
        }
        function drop() {
            event.preventDefault();  /* 避免浏览器对数据的默认处理 (drop 事件的默认行为是以链接形式打开) */
            var data = event.dataTransfer.getData("***");   
            /* 通过 event 的 dataTransfer.getData() 方法传入数据类型 "***", 获得可拖动数据元素 id ("drag1") */
            event.target.appendChild(document.getElementById(data));   /* 把被拖元素追加到放置元素 (目标元素) 中 */
        }
    </script>

拖放.gif

[3] canvas简单应用

  • canvas 元素本身是没有绘图能力, 所有的绘制工作必须在 JavaScript 内部完成
    <canvas id="myCanvas"  width="400" height="200" style="border:1px solid #c3c3c3;">
        坐标原点 (0, 0) 从左上角开始, 宽代表 x 轴, 高代表 y 轴
    </canvas>   
    
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");  /* getContext("2d") 对象是内建的 HTML5 对象, 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 */   
        // 画矩形
        cxt.fillStyle = "#FFFF00";    /* 矩形的背景颜色, 默认为黑色 */
        cxt.fillRect(0,0,250,150);  /* 矩形坐标, 在画布上绘制 150x75 的矩形,从左上角开始 (0, 0) */
        // 画路径 
        cxt.moveTo(10,10);    /* 起点 */
        cxt.lineTo(150,50);  /* 第一个连接点 */
        cxt.lineTo(10,50);  /* 第二个连接点 */
        cxt.strokeStyle = "blue";  /* 颜色 */
        cxt.stroke();  /* stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色 */
        // 画圆形
        cxt.fillStyle = "#FF0000";  /* 圆形背景 */
        cxt.beginPath();
        cxt.arc(125,75,15,0,Math.PI*2,true);  /* 圆心 (x, y)、半径、起始角、结束角、逆时针 (false为顺时针) */
        cxt.closePath();
        cxt.fill();  /* 圆形填充 */
        // 画渐变色
        var grd = cxt.createLinearGradient(0,100,175,50);  /* 渐变开始点(x, y) 渐变结束点(x, y) */
        grd.addColorStop(0,"#000000");   /* 渐变开始颜色 */
        grd.addColorStop(1,"#FFFFFF");  /* 渐变结束颜色 */
        cxt.fillStyle = grd;
        cxt.fillRect(0,100,175,50);
        // 把一副图像放在画布上 (Chrome不支持)
        var img = new Image();
        img.src = "vai/1.png";
        cxt.drawImage(img,200,100);
    </script>

canvas绘图.png

[4] Web存储: localStorage 和 SessionStorage

  1. localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后, 数据依然可用
  2. sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后, 数据会被删除
    <div id="result"></div>
    <script>
        // localStorage 和 sessionStorage 的存储与访问
        if (typeof Storage !== "undefined") {
            localStorage.setItem("firstname", "Bill");   /* 存储, 或者 localStorage.lastname="Gates"; */
            sessionStorage["lastname"] = "Gates";
            document.getElementById("result").innerHTML = localStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname");
        } else {
            document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
        }
        // localStorage 计数功能, 关闭浏览器数据不丢失
        if (localStorage.pagecount) {   
            localStorage.pagecount=Number(localStorage.pagecount) +1;  // 建立的是 String 类型
        }
        else {    // 如果没有该对象属性, 则创建
            localStorage.pagecount=1;
        }
            document.write("Visits "+ localStorage.pagecount + " time(s).");
        // sessionStorage 方法与 localStorage 用法相同
    </script>

result.png

[5] Input输入类型

  • email, url, number, range, (date, month, week, time, datetime, datetime-local), color, search
    <form action="" method="get">
        Email: <input type="email" name="email" />
        <!-- numner 出现 1~10 的选择框, 和 range 用法相同 (会出现滑动条); step 属性规定合法的数字间隔, 只能选择 1、4、7、10 -->
        Points: <input type="number" name="point" min="1" max="10" step="3" />   <!-- 规定了 name 属性后点击提交, 值会出现在 url 框中 -->
        Date: <input type="date" name="date" />
        Time: <input type="time" name="time" />
        DateTime: <input type="datetime-local" name="datetime-local" /> <!-- 设置日期加时间 (本地时间) -->
        Color: <input type="color" name="color" value="#ff00ff" />  <!-- 默认在输入框中为黑色 -->
        <input type="submit" /> 
    </form>

result.png

[6] 表单类型

  • datalist (下拉框), keygen (公钥和密钥), output (输出框)
    Webpage: <input type="url" list="url_list" name="link" />  <!-- 必须通过 input 的 list 属性引用 datalist 标签的 id -->
    <datalist id="url_list">  
        <option label="W3School" value="http://www.W3School.com.cn" />  <!-- [注] 与 select 中的 option 用法不一样 (select 中 option 要闭合) -->
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>

datalist应用.png

[7] 表单属性

  • placeholder, multiple, autofocus, required, pattern, form
    <!-- input 属性 -->
    期待输入(灰色): <input type="search" name="user_search"  placeholder="Search W3School" /> <br>
    多文件上传: <input type="file" name="mulfile" multiple="multiple" /> <br>
    自动获焦: <input type="text" name="user_name"  autofocus="autofocus" /> <br>
    必填字段: <input type="text" name="usr_name" required="required" /> <br>
    正则判断: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> <br> <!-- 出错会显示title信息 -->
    <!-- form 属性 -->
    <form action="" method="get" id="user_form">
        First name: <input type="text" name="fname" />
        <input type="submit" />
    </form>
    Last name: <input type="text" name="lname" form="user_form" />  <!-- 利用 input 的 form 属性引用表单的 id 使 input 仍然位于该表单之中 -->

result.png

[8] 地理定位 (geolocation)

    <p id="demo"> 点击这个按钮, 获得您的位置: </p>
    <button onclick="getLocation()">试一下</button>
    <div id="mapholder"></div>
    <script>
        var x=document.getElementById("demo");
        function getLocation() {
            if (navigator.geolocation) {
                /* 如果 getCurrentPosition() 运行成功, 则向参数 showPosition 中规定的函数返回一个 coordinates 对象 */
                navigator.geolocation.getCurrentPosition(showPosition,showError);  /* 参数为两个回调函数 (函数名, 不加括号) */
            }
            else{
                x.innerHTML="Geolocation is not supported by this browser.";
            }
        }
        function showPosition(position) {
            var latlon=position.coords.latitude+","+position.coords.longitude; /* 维度、经度*/
            var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false"; /* 谷歌地图 */
            document.getElementById("mapholder").innerHTML = "<imgsrc='"+img_url+"' />";  /* 将谷歌地图的链接加入图片的路径中 */
        }
        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML="User denied the request for Geolocation."
                break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML="Location information is unavailable."
                break;
                case error.TIMEOUT:
                    x.innerHTML="The request to get user location timed out."
                break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML="An unknown error occurred."
                break;
            }
        }
    </script>

获得地理位置.png

[9] Web Workers: Worker

  • Web Worker 是运行在后台的 JavaScript, 不会影响页面的性能
  • 由于 web worker 位于外部文件中, 它们无法访问下例 JavaScript 对象: window 对象, document 对象, parent 对象
  • 需要跨域访问, 故在本地不能运行 (上传至服务器即可查看下面代码的运行效果)
    Count numbers: <output id="res"></output><br>
    <button onclick="startWorker()">Start Worker</button>
    <button onclick="stopWorker()">Stop Worker</button>
    <br />
    <script>
        var w;
        function startWorker() {
            if(typeof Worker !== "undefined") {
                if(typeof w =="undefined") {
                    w=new Worker("js/timeCount.js");  /* 创建 Worker 对象 */
                    // w.postMessage("hello");     /* 向worker发送数据, 模拟双线程 */
                    w.onmessage = function (evt) {   /* 当 web worker 传递消息时,会执行事件监听器中的代码 */
                        document.getElementById("res").innerHTML=evt.data; /* 从 timeCount.js 收到的数据*/
                    /* [注] event可传参,也可以不传参 */
                    };
                }
            }
            else {
                document.getElementById("res").innerHTML="Sorry, your browser does not support Web Workers..."; 
            }
        }
        function stopWorker() { 
            w.terminate();  /* 终止 web worker, 并释放浏览器/计算机资源, 请调用 terminate() 方法 */
        }
    </script>
  • 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) 允许网页获得来自服务器的更新
    <div id="resu"></div>  <!-- id 不能和前面例子的 id 相同 -->
    <script>
        if(typeof EventSource !=="undefined") {
            var source=new EventSource("php/server.php");  /* 创建 EventSource 对象 */
            source.onmessage=function(event) {
                document.getElementById("resu").innerHTML += event.data + "<br />";  /* 获得 php/server.php 发来的数据 */
            };
        }
        else {
            document.getElementById("resu").innerHTML = "抱歉,您的浏览器不支持 server-sent 事件 ...";
        }
    </script>
  • php/server.php 文件
<?php
    header('Content-Type: text/event-stream');  /* 把报头 "Content-Type" 设置为 "text/event-stream" */
    header('Cache-Control: no-cache');  /* 规定不对页面进行缓存 */

    $time = date('r');
    echo "data: The server time is: ".$time."\n\n";  /* 格式不能变, 以 data: 开头 (data: 不输出), 最后跟两个回车 (回车用 \n, 用 <br> 不通过) */
    flush();
?>

result.png

欢迎指正错误和补充!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

1556
来自专栏Felix的技术分享

HTML5动态时钟

8765
来自专栏程序员的酒和故事

golang中操作excel

A file with the XLSX file extension is a Microsoft Excel Open XML Format Spreads...

5969
来自专栏技术墨客

React Forwarding高阶组件传递Refs

通常情况下,我们想获取一个组建或则一个HTML元素的实例通过 Ref特性 就可以实现,但是某些时候我们需要在子父级组建中传递使用实例,Forwarding Re...

1124
来自专栏程序员宝库

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

1543
来自专栏互联网杂技

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

2882
来自专栏电光石火

Markdown 语法手册 (完整整理版)

1. 斜体和粗体 代码: *斜体*或_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ 显示效果: ...

97011
来自专栏hightopo

原 荐 基于 HTML5 Canvas 的交

2024
来自专栏我有一个梦想

ClistCtrl用法及总结(由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识)

1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可。 一下是用法总结: 本文根据本人在项目中的应用,来...

3345
来自专栏向治洪

React Native之ViewPagerAndroid 组件

概述 今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件,...

2128

扫码关注云+社区

领取腾讯云代金券