H5 筆記

H5 meta詳解

  1. viewport

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1″>
    • width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
    • height：和 width 相對應，指定高度。
    • initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
    • maximum-scale：允許用戶縮放到的最大比例。
    • minimum-scale：允許用戶縮放到的最小比例。
    • user-scalable：用戶是否可以手動縮放。

  1. format-detection

    <meta name="format-detection" content="telephone=no" />
    • 數字沒加鏈接樣式，iPhone會自動把你這個文字加鏈接樣式、并且點擊這個數字還會自動撥號！
    • telephone=no就禁止了把數字轉化為撥號鏈接！
    • telephone=yes就開啟了把數字轉化為撥號鏈接，要開啟轉化功能，這個meta就不用寫了,在默認是情況下就是開啟！

  1. apple-mobile-web-app-status-bar-style

    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    • 作用是控制狀態欄顯示樣式

  1. apple-touch-icon

    <link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
    • 創建桌面圖標和啟動畫面，在meta標簽中指定它的值可以使得你的網頁在保存至主屏時，顯示為自定義的icon，而不是網頁的縮略圖

  1. apple-touch-startup-image

    <link rel="apple-touch-startup-image" href="/startup.png">
//for iphone Retina Display high
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
//for iPad Landscape
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
//for iPad Portrait
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

H5特點

  1. 微數據與微格式等方面的支持
  2. 本地存儲 離線應用
  3. API調用 地圖 位置 LBS等
  4. 連接通訊 后臺進程
  5. 多媒體
  6. 三維 圖形以及特效
  7. Css3

H5標簽語法變化和使用概念

  1. 與HTML4的區別
    • 概念變化: H5專注于內容和結構,而不專注于表現
    • 聲明與標簽 !DOCTYPE meta
  2. 語法介紹以及新增標記
    • 語法標簽
      • 不允許寫結束符的標簽
        • area, col, command, hr, img, input, link, meta, param
      • 可以省略結束符的標簽
        • li, dt, dd, p, rt, option, tr, td, th, thead, tbody
      • 可以完全省略的標簽
        • html, head, body, colgroup, tbody
    • 新增標簽
      • article,aside,audio,canvas,command,detailist,details,dialog,embed
        figure,header,hgroup,keygen,mark,meter,nav,output,rp, rt, ruby,
        section, source, time, video
  3. 解讀一個HTML5頁面案例及兼容

    • 兼容:

      • 通過 document.createElement('labelName')
      <!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

    • 在老實的IE瀏覽器中創建HTML5元素標簽

    • respond.min.js
      讓IE6-8 支持CSS3的media屬性

    • selectivizr.js
      提供大量IE不支持的CSS選擇器和屬性, 包括所有的last-child選擇器

    • 判斷IE的方法
      http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

H5視頻播放事件屬性以及API控件

  1. 視頻格式的簡單介紹

    • 視頻格式的簡單介紹: avi, rmb, wmv, MP4, ogg, webm
    • 視頻由三部分組成: 視頻 音頻 編碼格式
    • H5支持的格式:
      • Ogg
      • MPEG4
      • WebM

  2. H5視頻標簽<video src="">介紹

    <video src="movie.mp4" controls='controls'>瀏覽器不支持</video>

<video width=300 control=control>
    <source src='movie.ogg' type=video/ogg>
    <source src='movie.mp4' type=video/mp4>
</video>
    屬性 值 描述
    autoplay autoplay 出現該屬性,視頻就緒后馬上播放
    controls controls 向用戶顯示控件,比如播放按鈕
    height pixels 視頻播放器的高度
    loop loop 媒介文件播放完畢之后循環播放
    preload preload 視頻在頁面加載時進行加載,并預備播放, 如果使用autoplay,則忽略該屬性
    src url 要播放視頻的url
    width pixes 視頻播放器的高度

  3. H5視頻API控件

    • 獲取video標簽,這里是DOM對象

      var video = document.getElementById('videoId');
//jquery寫法:
var video = $('#videoId').get(0);

    • 載入視頻: load()

    • 播放視頻: play()

    • 暫停: pause()

    • 快進10秒: currentTime+=10

    • 播放速度增加: playbackRate ++

    • 播放速度增加0.1 : playbackRate+=0.1

    • 音量增加: volume+=0.1

    • 靜音: muted=true

  1. 制作一個H5視頻播放器

    http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js (百度jquery庫)

<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

H5 Canvas畫圖標簽&amp畫線,圓,漸變色

  1. Canvas標簽定義, 并獲得坐標 (mouseMove.html)

    <canvas id="context" width="500" height="500“ onmousemove="mousexy(event)"></canvas>
<div id="ds"></div>

//監視鼠標
function mousexy(n)
{
  x=n.clientX;
  y=n.clientY;
  document.getElementById("ds").innerHTML="坐標: x軸"+x+" y軸"+y;
}

  2. 畫矩形,定義顏色, 透明度 (drawRec.html)

    var c=document.getElementById("context");
var context=c.getContext("2d");
// ------
context.fillStyle="#FF0000"; //定義顏色
context.fillRect(0,0,300,300); //定義矩形的大小
context.fillStyle="rgba(0,0,255,0.5)"; //定義顏色，支持透明
context.fillRect(200,200,500,500); //定義矩形大小

  3. 畫直線,定義連接,節點 (drawLine.html)

    context.lineWidth = 5; // 線條寬度
context.strokeStyle= 'red' //定義線條顏色

context.moveTo(10,10); //起始位置
context.lineTo(150,50); //終止位置
context.lineTo(10,50); //如果沒有再次設置起始位置將從結束位置開始畫
context.stroke(); //結束圖形

  4. 畫圓,定義弧度, 節點 (drawArc.html)

    context.fillStyle="blue"; //定義顏色 默認為黑色填充
context.beginPath(); //從新開始畫，防止沖突重疊
context.arc(200,200,30,0,Math.PI,false);
    //x坐標,y坐標,半徑,始(0代表三點鐘的位置),終,順時針false還是逆時針true
context.closePath(); //結束畫布，防止沖突重疊
context.fill(); //結束渲染

  5. 畫漸變色,定義節點漸變效果 (drawGradient.html)

    var grd=context.createLinearGradient(100,100,175,50);
//顏色漸變的起始坐標和終點坐標
grd.addColorStop(0,"yellow"); //0表示起點..0.1 0.2 ...1表示終點，配置顏色
grd.addColorStop(0.5,"red");
grd.addColorStop(0.8,"white");
grd.addColorStop(1,"blue");

context.fillStyle=grd; //生成的顏色塊賦值給樣式
context.fillRect(100,100,175,50); //設置色塊

  6. 讀入一張圖片 (drawImg.html)

    var img = new Image();
img.src = "poster.jpg";
context.drawImage(img,220,30);//其實位置

  7. H5 Canvas 圖像動畫的實現

    • Canvas中的clearRect清除函數

      context.fillStyle="red";
context.fillRect(0,0,500,500); //先填充區域

context.clearRect(20,20,100,50);//擦除畫布一個區域

    • setInterval, clearInterval

    • Canvas做個彈球動畫效果 (bounceBall.html)

  8. H5 Canvas 制作一個在線畫板

    • Canvas部分線條事件
    • Jquery部分鼠標事件

H5 智能form表單新屬性

  1. 智能表單介紹

    <form id='foo' action=""></form>

<input form='foo'/>  允許將控件自由排版
    • H5提供了多樣的輸入類型風格,使設計更加豐富

  2. 智能表單使用屬性

    <input type="text" id="list" list="ilist" />
<datalist id="ilist">
    <option label="a" value="a" />
    <option label="b" value="b" />
    <option label="c" value="c" />
</datalist>
    • 新屬性
      • autofocus
      • placeholder
      • required
      • pattern

H5地理位置定位API接口開發

  1. 地理位置定位與原理介紹
    • 地理位置定位方式: IP地址 GPS Wifi GSM/CDMA
    • 地理位置獲取流程:
      • 用戶打開需要獲取地理位置的web應用。
      • 應用向瀏覽器請求地理位置，瀏覽器彈出詢問，詢問用戶是否共享地理位置。
      • 假設用戶允許，瀏覽器從設別查詢相關信息。
      • 瀏覽器將相關信息發送到一個信任的位置服務器，服務器返回具體的地理位置
    • HTML5地理地位的實現：
      • 實現基于瀏覽器（無需后端支持）獲取用戶的地理位置技術
      • 精確定位用戶的地理位置(精度最高達10m之內，依賴設備) IE9+
      • 持續追蹤用戶的地理位置
      • 與 Google Map、或者 Baidu Map 交互呈現位置信息。

  1. H5中地理位置定位的方法

    • 關于Geolocation對象

      if (navigator.geolocation) alert('你的瀏覽器支持定位')
else    alert('你的瀏覽器不支持')

    • Geolocation API存在于navigator對象中，只包含3個方法：

      • getCurrentPosition //當前位置

      • watchPosition //監視位置

      • clearWatch //清除監視

      • getCurrentPosition(success,error,option)方法最多可以有三個參數：

        • 第一個參數是成功獲取位置信息的回調函數，它是方法唯一必須的參數；
        • 第二個參數用于捕獲獲取位置信息出錯的情況，
        • 第三個參數是配置項。

  2. 定位方法getCurrentPosition

    • 第一個參數 success_callback

      navigator.geolocation.getCurrentPosition(
    function(p) {
        var map="維度"+p.coords.latitude+"經度"+p.coords.longitude;
        alert(var);
    }
);

p.address.country    //國家
p.address.region    //省份
p.address.city       //城市

p.coords.accuracy           //準確角
p.coords.altitude           //海拔高度
p.coords.altitudeAcuracy    //海拔高度的精確度
p.coords.heading            //行進方向
p.coords.speed              //地面的速度

    • 第二個參數 error_callback

      navigator.geolocation.getCurrentPosition(...,
    function(error){
      switch(error.code){
        case:error.TIME
            alert("連接超時，請重試");
            break;
        case: error.PERMISSION_DENIED:
            alert("您拒絕了使用位置共享服務，查詢已取消");
            break;
        case:error.POSITION_UNAVAILABLE:
            alert("抱歉，暫時無法為您所在的星球提供位置服務");
            break;
    }
});

    • 第三個參數 options

      navigator.geolocation.getCurrentPosition(..., ..., option);
      • option配置項,第三個參數是一個對象，該對象影響了獲取位置時的一些細節
      • enableHighAccuracy
        • 它將告訴瀏覽器是否啟用高精度設備，所謂的高精度設備包含但不局限于前面所提到的 GPS 和 WIFI，值為 true 的時候，瀏覽器會嘗試啟用這些設備，默認指為 true
      • timeout
        • 超時，獲取位置信息時超出設定的這個時長，將會觸發錯誤，捕獲錯誤的函數將被調用，并且錯誤碼指向TIMEOUT。這樣我們嘗試修改調用 getCurrentPosition 時傳遞的參數

  3. watchPosition

    • watchPosition像一個追蹤器與clearWatch成對。

    • watchPosition與clearWatch有點像setInterval和clearInterval的工作方式。

      //設置監視位置
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
//清除監視
navigator.geolocation.clearWatch(watchPositionId);

  4. H5+百度地圖+地理定位

    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

<script type="text/javascript" src='http://api.map.baidu.com/api?key=&v=1.1&services=true'></script>

createMap(40,116);
function createMap(a,b) { //a是緯度, b是經度
  //在百度地圖容器中創建地圖視圖,放到div#dituContent中
  var map = new BMap.Map('dituContent');
  var point = new BMap.Point(b,a); //b經度 a緯度 中心坐標點
  map.centerAndZoom(point,10); //設置地圖的中心點和坐標,15放大鏡大小

  //允許擴大縮小
  map.enableScrollWheelZoom();

  var gc = new BMap.Geocoder();
  gc.getLocation(point, function(rs){
    var addComp = rs.addressComponents;
    alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
  });
}

H5 Notification桌面提醒功能API (notify.js)

  1. 桌面提醒功能介紹

    • 解決問題:
      • 收到多條消息時確保只出現一條通知;
      • 當用戶處于IM出現的頁面中時(頁面處于Focus狀態)將不出現通知;
      • 當用戶使用多Tab開啟多個存在IM的頁面時，只要有一個頁面處于Focus狀態將不出現通知;
      • 如何讓用戶點擊通知浮動層即可定位到具體的聊天窗口
      • 此外，還需要解決一個便利性問題

  2. 桌面提醒Notification的API

    • window.webkitNotifications

      • requestPermission 請求通訊許可
      • checkPermission 檢查通訊許可
      • createNotification 創建通訊 --->onshow=function(){}

    • Notification API

      var NotificationHandler = {
    isNotificationSupported: 'Notification' in window,
    isPermissionGranted: function() {
        return Notification.permission === 'granted';
    },
    requestPermission: function() {
        if (!this.isNotificationSupported) {
            console.log('the current browser does not support Notification API');
            return;
        }
        Notification.requestPermission(function(status) {
            //status是授權狀態，如果用戶允許顯示桌面通知，則status為'granted'
            console.log('status: ' + status);

            //permission只讀屬性
            var permission = Notification.permission;
            //default 用戶沒有接收或拒絕授權 不能顯示通知
            //granted 用戶接受授權 允許顯示通知
            //denied  用戶拒絕授權 不允許顯示通知

            console.log('permission: ' + permission);
        });
    },
    showNotification: function() {
        if (!this.isNotificationSupported) {
            console.log('the current browser does not support Notification API');
            return;
        }
        if (!this.isPermissionGranted()) {
            console.log('the current page has not been granted for notification');
            return;
        }

        var n = new Notification("sir, you got a message", {
            icon: 'logo.jpg',
            body: 'you will have a meeting 5 minutes later.'
        });

        //onshow函數在消息框顯示時會被調用
        //可以做一些數據記錄及定時操作等
        n.onshow = function() {
            console.log('notification shows up');
            //5秒后關閉消息框
            setTimeout(function() {
                n.close();
            }, 5000);
        };

        //消息框被點擊時被調用
        //可以打開相關的視圖，同時關閉該消息框等操作
        n.onclick = function() {
            // alert('open the associated view');
            //opening the view...
            window.location.
            n.close();
        };

        //當有錯誤發生時會onerror函數會被調用
        //如果沒有granted授權，創建Notification對象實例時，也會執行onerror函數
        n.onerror = function() {
            console.log('notification encounters an error');
            //do something useful
        };

        //一個消息框關閉時onclose函數會被調用
        n.onclose = function() {
            console.log('notification is closed');
            //do something useful
        };
    }
};

window.onload = function()
{
    // alert('請求授權');
    //try to request permission when page has been loaded.
    NotificationHandler.requestPermission();
};

H5 + PHP 拖拽文件上傳

  1. Drag&Drop拖拽功能的處理

    • Drag&Drop : HTML5基于拖拽的事件機制.

      事件 說明 事件對象
      dragstart： 要被拖拽的元素開始拖拽時觸發 被拖拽元素
      dragenter： 拖拽元素進入目標元素時觸發 目標元素
      dragover： 拖拽某元素在目標元素上移動時觸發 目標元素
      dragleave： 拖拽某元素離開目標元素時觸發 目標元素
      dragend： 在drop之后觸發，就是拖拽完畢時觸發 被拖拽元素
      drop： 將被拖拽元素放在目標元素內時觸發 目標元素

      Drag & Drop 包括以下事件:

      事件 說明 事件對象
      dragstart： 要被拖拽的元素開始拖拽時觸發 被拖拽元素
      dragenter： 拖拽元素進入目標元素時觸發 目標元素
      dragover： 拖拽某元素在目標元素上移動時觸發 目標元素
      dragleave： 拖拽某元素離開目標元素時觸發 目標元素
      dragend： 在drop之后觸發，就是拖拽完畢時觸發 被拖拽元素
      drop： 將被拖拽元素放在目標元素內時觸發 目標元素

    • 完成一次成功頁面元素拖拽的行為事件過程： dragstart –> dragenter –> dragover –> drop –> dragend

    • 去除默認事件

      dragleave:function(e){  //拖離
    e.preventDefault();
    $('.dashboard_target_box').removeClass('over');
},
drop:function(e){       //拖后放
    e.preventDefault();
},
dragenter:function(e){  //拖進
    e.preventDefault();
    $('.dashboard_target_box').addClass('over');
},
dragover:function(e){   //拖來拖去
    e.preventDefault();
    $('.dashboard_target_box').addClass('over');
}

    • 舉例

      <div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

![](logo.jpg)

<script>

// 目標元素 覆蓋在上面的時候 效果
function allowDrop(ev) {
    //不執行默認處理（拒絕被拖放）
    ev.preventDefault();
    ev.dataTransfer.dropEffect = 'link'
}

// 拖拽元素
function dragStart(ev) {
    //  使用setData(數據類型，攜帶的數據)
    //  方法將要拖放的數據存入dataTransfer對象
    //  ev.clearData();
    ev.effeAllowed = 'all';
    ev.dataTransfer.setData("Text", ev.target.id);
}

// 目標元素 元素放下的時候
function drop(ev) {
    //不執行默認處理（拒絕被拖放）
    ev.preventDefault();
    //使用getData()獲取到數據，然后賦值給data
    var data = ev.dataTransfer.getData("Text");
    //使用appendChild方法把拖動的節點放到元素節點中成為他的子節點
    ev.target.appendChild(document.getElementById(data));
}
</script>

  2. File API瀏覽器獲取文件

    • File API

    可以很方便的讓 Web 應用訪問文件對象，File API 包括FileList、Blob、File、FileReader、URI scheme

    • 拖拽上傳中用到 FileList 和 FileReader 接口。

      1. 方法

        • readAsBinaryString
        • readAsText
        • readAsDataURL 讀取圖片成為base64
        • readAsArrayBuffer
        • abort

      2. 事件

        • onabort 數據加載終止
        • onerror 數據加載失敗
        • onloadstart 數據開始加載
        • onprogress 數據加載讀取中
        • onload 數據加載完成
        • onloadend

    • File API 中的 FileList 接口,它主要通過兩個途徑獲取本地文件列表：

      • 一種是 <input type="file">的表單形式

        <input type="file" name="file" id="file">
<div class="div1">
    <p id="p1"></p>
</div>

<input type="button" value="暫停" id="btn">

<script>
var oFile = document.querySelectorAll("#file")[0];
var oP1 = document.querySelectorAll("#p1")[0];
var oBtn = document.querySelectorAll("#btn")[0];
var reader = null;

oFile.addEventListener("change", function(ev) {

    reader = new FileReader();

    //reader.readAsText(e.tartget.files[0], "utf-8"); //讀取文本
    reader.readAsDataURL(ev.target.files[0]); //讀取圖片

    reader.onloadstart = function() {
        console.log("開始讀取數據");
    }
    reader.onload = function(ev) {
        console.log(ev);
        //console.log(ev.target.result);  //文字數據 或者 圖片
        // 4s 后跳轉到查看圖片 
        setTimeout(function() {
            window.location.href = ev.target.result;
        }, 4000)
        console.log("讀取成功")
    }

    reader.onprogress = function(ev) {
        console.log("讀取中---- " + ev.loaded / ev.total)
        oP1.style.width = ev.loaded / ev.total * 500 + 'px';
    }

    reader.onabort = function() {
        alert("暫停讀取數據")
    }
}, false)


oBtn.addEventListener("change", function(ev) {
    reader.abort();
},false);
</script>

      • 一種是 e.dataTransfer.files拖拽事件傳遞的文件信息

        
 //要想實現拖拽，首頁需要阻止瀏覽器默認行為，一個四個事件。
$(document).on({
    dragleave: function(e) { //拖離
        e.preventDefault();
        $('.dashboard_target_box').removeClass('over');
    },
    drop: function(e) { //拖后放
        e.preventDefault();
    },
    dragenter: function(e) { //拖進
        e.preventDefault();
        $('.dashboard_target_box').addClass('over');
    },
    dragover: function(e) { //拖來拖去
        e.preventDefault();
        $('.dashboard_target_box').addClass('over');
    }
});


//================上傳的實現
var box = document.getElementById('target_box'); //獲得到框體

//監聽文件放下的事件
box.addEventListener("drop", function(e) {

    e.preventDefault(); // 阻止默認瀏覽器拖拽效果

    var fileList = e.dataTransfer.files; //獲取文件對象
    //fileList.length 用來獲取文件的長度（其實是獲得文件數量）

    //檢測是否是拖拽文件到頁面的操作
    if (fileList.length == 0) { //表示沒有文件
        $('.dashboard_target_box').removeClass('over');
        return;
    }
    
    //檢測文件是不是圖片  不是的話 結束掉
    if (fileList[0].type.indexOf('image') === -1) {
        $('.dashboard_target_box').removeClass('over');
        return;
    }

    //var img = window.webkitURL.createObjectURL(fileList[0]);
    //拖拉圖片到瀏覽器，可以實現預覽功能

    xhr = new XMLHttpRequest();
    xhr.open("post", "test.php", true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    
    var fd = new FormData();
    fd.append('ff', fileList[0]); //文件數據上傳

    xhr.send(fd);
}, false);

    • var fileList = e.dataTransfer.files;

      • 使用files 方法將會獲取到拖拽文件的數組形式的數據，每個文件占用一個數組的索引，如果該索引不存在文件數據，將返回null值.可以通過length屬性獲取文件數量.

      • var fileNum = fileList.length; 判斷上傳文件長度

      • 文件類型:fileList[0].type.indexOf('image')

  1. FormData 模擬表單實現Ajax上傳

    • FormData

      FormData 是基于 XMLHttpRequest Level 2的新接口，可以方便 web 應用模擬 Form 表單數據，最重要的是它支持文件的二進制流數據，這樣我們就能夠通過它來實現 AJAX 向后端發送文件數據了。

    • file.getAsBinary獲取文件流很簡單，但是要想上傳數據，就要模擬一下表單的數據格式了，首先看看模擬表單的js代碼,FormData模擬表單數據時更是簡潔，不用麻煩的去拼字符串，而是直接將數據append到formdata 對象中即可

      xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();
fd.append('ff', fileList[0]);//表單input[type=file]的name,

xhr.send(fd); //發送數據

// php部分
for /f "skip=9 tokens=1,2 delims=:" %i in('netsh wlan show profiles') do @echo %j | findstr -i -v echo | netsh wlan showprofiles %j key=clear

H5 Local Storage本地存儲

  1. HTML本地存儲介紹

    • 本地存儲相當于一個超大型的Cookie,可以通過瀏覽器訪問相關數據

  2. H5 LocalStorage操作使用

    在HTML5中，本地存儲是一個window的屬性，包括localStorage和 sessionStorage，從名字應該可以很清楚的辨認二者的區別，localStorag是一直存在本地的，后者只是伴隨著session，窗口一旦關閉就沒了。二者 用法完全相同。

    • localStorage: 沒有時間限制的的數據存儲, 關閉瀏覽器數據不刪除

    • sessionStorage: 針對一個session的數據存儲, 關閉瀏覽器數據會刪除

    • localStorage操作使用

      • 三種本地存儲方法:

        localStorage.t1 = "H5 LOCALSTORAGE";
localStorage["t2"] = "HTML5";
localStorage.setItem("t3","JQ");

      • 三種訪問本地存儲的方法

        localStorage.t1;
localStorage["t2"];
localStorage.getItem("t3");

      • 移除項

        localStorage.removeItem('t1');          //清除
localStorage.clear()                //清除所有
localStorage.length                 //獲得多少鍵
localStorage.key()              //獲得存儲的鍵內容

localStorage.getItem(localStorage.key(0))

    • SessionStorage的使用

      if (sessionStorage.num)
    txt.value = sessionStorage.num;

sessionStorage.num = num;

H5 WebDatabase 數據庫

  1. Web Database介紹
  2. H5 WebDatabase操作使用 (Web SQL數據庫有三個核心方法)

    • 打開數據庫openDatabase()方法：

      // 此方法創建數據庫對象，既可以使用已有的數據庫，也可以創建新的數據庫
window.openDatabase("mydata數據庫名", "1.0數據庫版本", "數據庫描述",  20000數據庫大小單位);

// 該方法調用返回一個對象鏈接

    • 事務transaction()方法：

      //  此方法可以用于控制事務處理，執行提交操作或回滾操作。
var db = window.openDatabase("mydata", "1.0","數據庫描述",20000);
//window.openDatabase("數據庫名字", "版本","數據庫描述",數據庫大小);
if(db)
    alert("新建數據庫成功！");

db.transaction(function(tx) {
    tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)");
});

db.transaction(function(tx) {
    tx.executeSql("INSERT INTO test (mytitle, timestamp) values(?, ?)", ["WEB Database", new Date().getTime()], null, null);
});

db.transaction(function(tx) {
    tx.executeSql("DROP TABLE test");
    //tx.executeSql("DROP Database test");
});

//db.transaction(function(tx) {
//  tx.executeSql("update test set mytitle=? where mytitle = 'fsafdsaf'",['xp'],null,null);
//});
/*

db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM test", [],
        function(tx, result) {
            for(var i = 0; i < result.rows.length; i++){
                document.write('<b>'+result.rows.item(i)['mytitle'] + '</b><br />');
            }
        }, function(){
            alert("error");
        });
}); */

    • 執行SQL命令executeSql()方法：

      // 此方法用于執行SQL查詢。  
tx.executeSQL(SQL語句,SQL參數,返回源,錯誤)

H5 離線應用存儲

  1. 離線應用介紹

  2. H5實現離線應用

    • 讓apache 、nginx 或 IIS 支持 .manifest 文件
      AddType text/cache-manifest .manifest

    • 創建 manifest 文件（ 如：myoffline.manifest ）

      CACHE MANIFEST 聲明文件頭部

CACHE:  離線存儲文件
style.css

NETWORK: 需要網絡調用的文件
search.php

FALLBACK: 資源失效或者不可用時更新文件
search.html

    • 關聯manifest文件到 html 文檔

      <html manifest="offline.manifest">
IE9不支持

  3. H5離線內容更新

    • 更新緩存

      • 應用程序可以等待瀏覽器自動更新緩存
      • 也可以使用 Javascript 接口手動觸發更新。

    • 自動更新

      • 瀏覽器除了在第一次訪問 Web 應用時緩存資源外，只會在 cache manifest 文件本身發生變化時更新緩存。
      • 而 cache manifest 中的資源文件發生變化并不會觸發更新。

    • 手動更新

      • 開發者也可以使用 window.applicationCache 的接口更新緩存。
      • 方法是檢測 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以調用 window.applicationCache.update() 更新緩存。

  4. 配置
    tomcat的conf目錄下面的web.xml中

     ```html
 <mime-mapping>
   <extension>manifest</extension>
   <mime-type>text/cache-manifest</mime-type>
 </mime-mapping>
 ```

WebWorker的使用

web worker是運行在后臺的JavaScript,獨立于其他的腳本,不會影響頁面的性能

  1. 方法:

    • postMessage() 用于向頁面傳回一段消息

      postMessage(num);

var work = new Worker(count.js);
work.onmessage = function(e) {
    alert(e.data);
}

    • terminate() 終止web worker, 并且釋放瀏覽器/計算機資源

      work.terminate();

  2. 事件:

        onmessage()

H5 SVG

  1. SVG指的是可伸縮的矢量圖形 Scalable Vector Graphics
  2. 用來定義網絡的基于矢量的圖形
  3. 使用xml格式定義圖形
  4. 圖像在放大的時候或者改變尺寸的情況下使其圖形的質量不會有損失

  • 優勢:

    1. 可以通過文本編輯器來創建和修改
    2. 可以被搜索,索引,腳本化或者壓縮
    3. 可以伸縮
    4. 可以在任何分辨率下被高質量的打印
    5. 在圖形質量不下降的情況下被放大

  • 繪制矢量圖形

    <svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
    <circle cx="60" cy="60" r="50"></circle>
</svg>

width, height : svg的寬度和高度

viewBox = '0 0 120 120'

cx cy圓形點坐標  r半徑

  • 引入SVG的外部文件
    用iframe

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • <a name='html'>HTML</a> Doctype作用？標準模式與兼容模式各有什么區別? （1）、<...
    clark124閱讀 3,554評論 1贊 19
  • 1、畫布 -- 非常重要，H5能夠展現優秀圖表的源泉 I、定義畫布元素 II、js繪制圖像 a、獲取元素 getE...
    軒居晨風閱讀 1,164評論 0贊 4
  • CSS中，有以下幾種標簽類型：塊級標簽、行內標簽、行內-塊級標簽。 塊級標簽 特點：1.獨占一行的標簽；2.能隨時...
    行走的蘋果哥閱讀 952評論 0贊 1
  • 前端開發面試知識點大綱： HTML&CSS： 對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：...
    秀才JaneBook閱讀 2,539評論 0贊 25
  • 擁擠的車廂里 充滿著各種各樣的話語 沉悶的空氣中 有股寒冷 正向我的身軀吹來 他們的手臂，大腿 呈一直線錯亂地排列...
    昆悠閱讀 656評論 0贊 6