HTML5中的新方法和屬性：定位，遙感、worker等

html5

一、屬性篇

1、placeholder 提示信息

<input type="text" placeholder="請輸入用戶名">

2、input的新type

（1）Calendar類中的date,time,week,datetine-local

<!-- Calendar類 -->
<input type="date"> 兼容型差，基本只有chrome支持
<input type="time">
<input type="week">
<input type="datetime-local">

（2）number：只能輸入數字，可以設置最大最小值以及步長

<input type="number" min="1" max="10" step="1">兼容型差，基本只有chrome支持

（3）email：提交表單時，進行郵箱驗證

<input type="email">兼容型差，基本只有chrome，firefox支持

（4）color：可以選擇顏色值

<input type="color">兼容型差，基本只有chrome支持

（5）range：一個滑動條，可以設置最大最小值以及步長

<input type="range" min="1" max="100" step="2">

（6）search：搜索域，可以記錄搜索過的內容

<input type="search">兼容型差，基本只有chrome支持

（7）url：在提交表單時，會自動驗證 url 域的值。

<input type="url"> 兼容chrome或firefox和opera

大多數瀏覽器都不兼容，故大部分用不到，附帶W3school兼容性一覽，不過有些不準

3、datalist：規定輸入域的選項列表。

解釋：列表是通過 datalist 內的 option 元素創建的。如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id。兼容性差，基本只有谷歌支持

請選擇輸入網址: 
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="bilibili" value="https://www.bilibili.com" />
    <option label="baidu" value="http://www.baidu.com" />
    <option label="csdn" value="https://www.csdn.net" />
</datalist>

4、contentEditable：內容可編輯

**解釋：**無兼容性問題，常用作修改表格，該屬性是可以被子元素繼承

<div contenteditable="true">
    我終於可以修改了！
	<br>
    <span>也可以修改我哦，因爲我繼承了父類的</span>
    <br>
    <span contenteditable="false">你修改不了我的</span>
</div>

<!-- 
注意:設置contenteditable="false"的span標籤可以被整體刪除
因爲span標籤是在div裏面的，可以把整個span標籤刪除
-->

5、draggable：規定元素是否可拖動。

（1）draggable=“true”

注意：默認是false，但是a和img標籤默認是可以拖拽的。只有chrome和safari可以正常使用。

<div class="box" draggable="true"></div>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: #f0f;
    }
</style>

（2）拖拽的生命週期

當鼠標按下的一瞬間，拖拽開始
當鼠標按下一直移動，拖拽進行中
當鼠標鬆開的一瞬間，拖拽結束
拖拽分爲兩塊:被拖拽的物體以及目標區域

（3）被拖拽的物體上的事件：ondragstart，ondrag，ondragend

<script>
    var oDrag = document.getElementsByClassName("box")[0]
    oDrag.ondragstart = function(e){
        //開始事件 按下元素一瞬間不會觸發，稍微移動一下才會觸發
        console.log(e)
        //改變鼠標的樣式 兼容性極差
        e.dataTransfer.effectAllowed = "link"
    }
    oDrag.ondrag = function(e){
        //移動事件 移動的瞬間開始觸發
        console.log(e)
    }
    oDrag.ondragend = function(e){
        // 結束事件 鬆開鼠標一瞬間觸發
        console.log(e)
        // clientX和clientY是移動的點的像素
    }
</script>

案例：拖拽

<div class="box" draggable="true"></div>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: #f0f;
		position: absolute;
    }
</style>

<script>
    var oDrag = document.getElementsByClassName("box")[0]
    var startX = 0;
    var startY = 0
    oDrag.ondragstart = function(e){
        startX = e.clientX;
        startY = e.clientY;
    }
    oDrag.ondragend = function(e){
        var x = e.clientX - startX
        var y = e.clientY - startY
        oDrag.style.left = oDrag.offsetLeft + x +"px";
        oDrag.style.top = oDrag.offsetTop + y +"px";
    }
</script>

（4）目標區域上的事件：ondragenter，ondragover，ondragleave，ondrop

<div class="box" draggable="true"></div>
<div class="target"></div>
<script>
    var targetDiv = document.getElementsByClassName("target")[0]
    targetDiv.ondragenter = function(e){
        // 並不是元素圖形進入目標區域觸發，而是拖拽的鼠標進入目標區域觸發
        console.log(e)
    }
    targetDiv.ondragover = function(e){
        // 鼠標進入目標區域時不停觸發
        console.log(e)
        // e.preventDefault();
    }
    targetDiv.ondragleave = function(e){
        // 離開目標區域觸發
        console.log(e)
    }
    targetDiv.ondrop = function(e){
        // 當鼠標在目標區域鬆開時 想要在目標區域用ondrop，需要取消ondragover的默認事件
        // 所有標籤元素，當拖拽週期結束時，默認事件時是回到原處
        // 事件是由行爲觸發的，但是一個行爲可以不止觸發一個事件
        // ondrapover --> 回到原處  --> 執行drop
        console.log(e)
        //改變鼠標的樣式 兼容性極差僅ondrop中有
        e.dataTransfer.dropEffect = "link"
    }
</script>

​ 拖拽案例

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box1{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        position: absolute;
       
    }
    .box2{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        position: absolute;
        left: 300px;
    }
    li{
        position: relative;
        display: block;
        width: 50px;
        height: 40px;
        background-color: #0ff;
        margin: 10px auto;
        
    }
</style>

<div class="box1">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="box2"></div>

<script>
   var dragDom = null;
   var liList = document.getElementsByTagName("li")
   for(var i=0;i<liList.length;i++){
       liList[i].setAttribute("draggable",true)
        liList[i].ondragstart = function(e){
            dragDom = e.target
        }
   }
   var box1 = document.getElementsByClassName("box1")[0]
   box1.ondragover = function(e){
       e.preventDefault();
   }
   box1.ondrop = function(e){
       box1.appendChild(dragDom)
   }
   var box2 = document.getElementsByClassName("box2")[0]
   box2.ondragover = function(e){
       e.preventDefault();
   }
   box2.ondrop = function(e){
       box2.appendChild(dragDom)
   }
</script>

6、hidden：隱藏

<p hidden>這個段落應該被隱藏。</p>

7、data-val： 自定義數據

data-* 屬性用於存儲頁面或應用程序的私有自定義數據。

<ul>
    <li data-animal-type="鳥類">喜鵲</li>
    <li data-animal-type="魚類">金槍魚</li> 
    <li data-animal-type="蜘蛛">蠅虎</li> 
</ul>

案例：

<h1>物種分類</h1>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鳥類">喜鵲</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="魚類">金槍魚</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蠅虎</li>  
</ul>

<script>
    function showDetails(animal) {
        var animalType = animal.getAttribute("data-animal-type");
        alert(animal.innerHTML + "是一種" + animalType + "。");
    }
</script>

二、標籤篇

1、語義化標籤

<!-- 本質都是div只不過是名字不同 -->
<header></header>
<footer></footer>
<nav></nav> <!-- 導航欄 -->
<article></article> <!-- 文章，可以被直接引用 -->
<section></section> <!-- 段落 -->
<aside></aside><!-- 側邊欄，幾乎不用 -->

2、canvas(畫板)

暫不介紹，後續更新

3、svg(畫板)

暫不介紹，後續更新

4、audio(聲音播放)

與video相同，請比照video屬性進行學習。

5、video(視頻播放)

（1）支持的音頻格式：.ogg 、.mp4 、.webm

兼容問題，可以寫多個源地址，根據順序依次判斷

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

（2）controls：供添加播放、暫停和音量控件。

<video src="movie.ogg" controls></video>

（3）autoplay：視頻在就緒後立馬播放

<video src="movie.ogg" controls autoplay></video>

（4）loop：循環播放

<video src="movie.ogg" controls loop></video>

（5）preload：在頁面加載時加載視頻

解釋：如果使用 “autoplay”，則忽略該屬性。Chrome：preload默認值爲auto，加載部分視頻；

auto：當頁面加載後載入整個視頻
meta ：當頁面加載後只載入元數據，比如長度等等
none ：當頁面加載後不載入視頻，認爲用戶不需要看，減少性能

<video src="movie.ogg" preload="load"/>

Video + DOM

註釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載後，其他屬性纔可用。

在谷歌瀏覽器中，以下演示在控制檯中進行或寫點擊事件觸發使用，否則會報錯。是因爲谷歌瀏覽器自動播放的政策導致的。（autoplay政策，爲了避免標籤產生隨機噪音禁止沒有交互前使用js進行播放）

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 

以下演示用的的html

<video src="love.mp4" controls></video>

（1）play() 開始，pause() 暫停

var video = document.getElementsByTagName("video")[0]
video.play()
video.pause()

（2）load()：方法重新加載音頻/視頻元素。

video.load()

（3）currentTime和duration

currentTime： 設置或返回音頻/視頻中的當前播放位置（以秒計）

duration：返回當前音頻/視頻的長度（以秒計）

console.log("當前播放時間:"+video.currentTime)
console.log("總時長:"+video.duration)
video.currentTime = 1

（4）volume：當前音量

解釋：音量大小在0-1之間

video.volume = 1

（5）paused：返回當前時暫停還是播放

video.paused

（6）playbackRate：播放倍速

video.playbackRate=0.5

（7）oncanplay：事件，當瀏覽器可以播放音頻/視頻時觸發

video.oncanplay=function(){
    alert("Can start playing video")
};

註釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載後，其他屬性纔可用。

案例：自己的音頻播放器

html部分

<div class="video_player">
    <video class="video" src="./love.mp4"></video>
    <div class="menu">
        <div class="play">播放</div>
        <div class="time">0.00/0.00</div>
        <div class="progress_bar">
            <div></div>
            <i></i>
        </div>
        <div class="quick">倍速</div>
        <div class="quick_list">
            <ul>
                <li>x1</li>
                <li>x1.25</li>
                <li>x1.5</li>
                <li>x2</li>
            </ul>
        </div>
        <div class="volumeAdd">音量+</div>
        <div class="volumeDe">音量-</div>
    </div>
</div>

css部分

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .video_player{
        width: 1000px;
        height: 500px;
        position: relative;
        margin: 0 auto;
    }
    .video{
        width: 1000px;
        height: 500px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .menu{
        position: absolute;
        width: 100%;
        height: 50px;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
    }
    .play{
        width: 60px;
        height: 30px;
        position: absolute;
        top: calc(50% - 15px);
        margin-left: 20px;
        border-radius: 5px;
        border: 1px solid #fff;
        color: #fff;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
    .time{
        width: 120px;
        height: 30px;
        position: absolute;
        top: calc(50% - 15px);
        margin-left: 100px;
        color: #fff;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
    .progress_bar{
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0px;
        background-color: #ccc;
        top: -2px;
    }
    .progress_bar div{
        position: absolute;
        width: 120px;
        height: 2px;
        top: 0;
        left: 0;
        background-color: orange;
    }
    .progress_bar i{
        display: block;
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #fff;
        left: 120px;
        top: -2px;
    }
    .quick{
        width: 60px;
        height: 30px;
        position: absolute;
        top: calc(50% - 15px);
        right: 100px;
        border-radius: 5px;
        border: 1px solid #fff;
        color: #fff;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
    .quick_list{
        width: 60px;
        height: 80px;
        position: absolute;
        bottom: 70px;
        right: 100px;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        padding: 5px 0;
    }
    .quick_list{
        display: none;
    }
    .quick_list ul{
        list-style: none;
    }
    .quick_list ul li {
        height: 20px;
        margin: 4px 0;
    }
    .quick_list ul li:hover {
        color: #f40;
    }
    .volumeAdd,.volumeDe{
        width: 60px;
        height: 30px;
        position: absolute;
        top: calc(50% - 15px);
        border-radius: 5px;
        border: 1px solid #fff;
        color: #fff;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
    .volumeAdd{
        left: 300px;
    }
    .volumeDe{
        left: 380px;
    }
</style>

js部分

<script>
    var videoPlayer = document.getElementsByClassName("video_player")[0]
    var video =videoPlayer.getElementsByTagName("video")[0]
    var menu = document.getElementsByClassName("menu")[0]
    var play = document.getElementsByClassName("play")[0]
    var time = document.getElementsByClassName("time")[0]
    var progress_bar = document.getElementsByClassName("progress_bar")[0]
    var quick_list = document.getElementsByClassName("quick_list")[0]
    var quick = document.getElementsByClassName("quick")[0]
    var volumeAdd = document.getElementsByClassName("volumeAdd")[0]
    var volumeDe = document.getElementsByClassName("volumeDe")[0]
    videoPlayer.onmouseenter = function(){
        menu.style.display = "block"
    }
    videoPlayer.onmouseleave = function(){
        menu.style.display = "none"
    }
    play.onclick = function(){
        if(video.paused){
            video.play()
            play.innerHTML = "暫停" 
        }else{
            video.pause()
            play.innerHTML = "播放"
        }
    }

    progress_bar.onmouseenter = function(){
        progress_bar.style.height = "14px"
        progress_bar.style.top = "-14px"
        progress_bar.getElementsByTagName("div")[0].style.height = "14px"
        progress_bar.getElementsByTagName("i")[0].style.height = "18px"
    }
    progress_bar.onmouseleave = function(){
        progress_bar.style.height = "2px"
        progress_bar.style.top = "-2px"
        progress_bar.getElementsByTagName("div")[0].style.height = "2px"
        progress_bar.getElementsByTagName("i")[0].style.height = "6px"
    }
    progress_bar.onclick = function(e){
        var x = e.layerX
        var total = progress_bar.clientWidth
        var time = x / total * video.duration
        video.currentTime = time
        // 想要設置時間跳轉請求信息中必須有Content-Range或者Range: bytes 262144-1393631/1393632屬性
    }
    quick.onclick = function(){
        quick_list.style.display = "block"

    }
    quick_list.onmouseleave = function(){
        this.style.display = "none"
    }
    var liList = quick_list.getElementsByTagName("li")
    for(var i = 0;i<liList.length;i++){
        liList[i].index = i
        liList[i].onclick = function(){
            if(this.index == 0){
                video.playbackRate = 1
                quick.innerHTML = "倍速"
            }else if(this.index == 1){//1.25
                video.playbackRate = 1.25
                quick.innerHTML = "x1.25"
            }else if(this.index == 2){//1.5
                video.playbackRate = 1.5
                quick.innerHTML = "x1.5"
            }else{
                video.playbackRate = 2
                quick.innerHTML = "x2"
            }
        }
    }

    volumeAdd.onclick = function(){
        video.volume = video.volume + 0.1>=1?1:video.volume + 0.1
    }
    volumeDe.onclick = function(){
        video.volume = video.volume - 0.1<=0?0:video.volume - 0.1
    }

    setInterval(() => {
        var total = video.duration
        var nowTime = video.currentTime
        time.innerHTML = parseInt(nowTime/60)+":"+parseInt(nowTime%60)+"/"+
        parseInt(total/60)+":" + parseInt(total%60)
        var progressWidth = nowTime / total * progress_bar.clientWidth
        progress_bar.getElementsByTagName("div")[0].style.width = progressWidth +"px"
        progress_bar.getElementsByTagName("i")[0].style.left = progressWidth +"px"
    }, 1000);
</script>

三、API篇

1、Geolocation：地理定位

geLocation:獲取地理信息（一些系統不支持）
1.GPS 臺式機幾乎沒有GPS，筆記本大多數沒有GPS，智能手機基本都有GPS
2.網絡(根據基站)只能粗略估計地理位置
3.https協議和文件協議可以獲取，http協議因爲安全問題不可以獲取

// 經度最大180°，維度最大90°
window.navigator.geolocation.getCurrentPosition(
    function(position){
    	console.log(position)
    },function(err){
        console.log(err)
    }
)

err錯誤代碼：

Permission denied - 用戶不允許地理定位
Position unavailable - 無法獲取當前位置
Timeout - 操作超時

返回的position對象：

coords.latitude			-十進制數的緯度
coords.longitude		-十進制數的經度
coords.accuracy			-位置精度
coords.altitude			-海拔，海平面以上以米計
coords.altitudeAccuracy	-位置的海拔精度
coords.heading			-方向，從正北開始以度計
coords.speed			-速度，以米/每秒計
timestamp				-響應的日期/時間

2、requestAnimationFrame：動畫優化

注意：若你想在瀏覽器下次重繪之前繼續更新下一幀動畫，那麼回調函數自身必須再次調用window.requestAnimationFrame()

window.requestAnimationFrame(callback);

參數:
callback
下一次重繪之前更新動畫幀所調用的函數(即上面所說的回調函數)。它表示requestAnimationFrame() 開始去執行回調函數的時刻。
返回值:
一個 long 整數，請求 ID ，是回調列表中唯一的標識。是個非零值，沒別的意義。你可以傳這個值給 window.cancelAnimationFrame() 以取消回調函數。

（1）用setInterval

function move(){
    var box = document.getElementsByClassName("box")[0]
    if(box.offsetLeft>700){
        clearTimeout(timer)
    }
    box.style.left = box.offsetLeft +20 +"px"
}
var timer = setInterval(move,1000/60)
move()

（2）用requestAnimationFrame()

var timer = null
function move(){
    var box = document.getElementsByClassName("box")[0]
    if(box.offsetLeft>700){
        cancelAnimationFrame(timer)
    }else{
        timer = requestAnimationFrame(move)
        box.style.left = box.offsetLeft +20 +"px"
    }
}
move()

對比用setInterval和requestAnimationFrame效果

因爲requestAnimationFrame是每秒60幀，每一幀的執行時間要少於1/60 該方法上有一個執行隊列，可以準確的執行每一幀
setInterval 可能不會是一秒60幀，執行隊列時間可能多餘1秒
注:cancelAnimationFrame相當於clearTimeOut

爲了更好的兼容cancelAnimationFrame和requestAnimationFrame，我們自己寫一個兼容

window.cancelAnimationFrame = (function(){
    return window.cancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    function(id){
        window.clearInterval(id)
    }
})()
window.requestAnimationFrame = (function(){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(id){
        window.setInterval(id,1000/60)
    }
})()

3、localStorage和sessionStorage

localStorage：沒有時間限制的數據存儲
sessionStorage：針對一個 session 的數據存儲

（1）localStroage

賦值：只能存字符串

//localStorage賦值兩種方式
localStorage.name = "lkx"
localStorage.arr = JSON.stringify([1,2,3])
localStorage.setItem("name","lkx")

取值：

//獲取localStorage的兩種方式

console.log(JSON.parse(localStorage.arr))
console.log(JSON.parse(localStorage.getItem("arr")))

刪除：

//刪除localStorage
localStorage.removeItem("arr")

（2）sessionStorage

賦值：

sessionStorage.name = "lkx"
sessionStorage.arr = JSON.stringify([1,2,3])
sessionStorage.setItem("name","lkx")

取值：

console.log(sessionStorage.name)
console.log(sessionStorage.getItem("name"))

刪除：

sessionStorage.removeItem("name")

因爲二者只能存字符串

// 只存字符串 --> JSON 方法來轉換
localStorage.obj = JSON.stringify({name:"lkx",age:"18"})
console.log(JSON.parse(localStorage.obj))

localStorage和sessionStorage選用

1.長期放在瀏覽器內的，寫入localStorage(無論窗口是否關閉)
2.這次會話臨時需要存儲的變量，每次瀏覽器關閉，sessionStorage都會自動清空

localStorage 和 cookie 區別

1.localStorage在發送請求的時候不會把數據發出去，而cookie會
2.cookie存儲的內容比較少4k，localStrage可以存放5M

4、history

（1）pushState(state,title,url)：添加和修改歷史記錄條目

參數：

state:狀態對象,state是一個JavaScript對象，通過pushState () 創建新的歷史記錄條目。無論什麼時候用戶導航到新的狀態，popstate事件就會被觸發，且該事件的state屬性包含該歷史記錄條目狀態對象的副本。
title:標題,不兼容,目前忽略這個參數，但未來可能會用到。
url:該參數定義了新的歷史URL記錄。

在某種意義上，調用 pushState() 與 設置 window.location = "#foo" 類似，二者都會在當前頁面創建並激活新的歷史記錄。但 pushState() 具有如下幾條優點：

• 新的 URL 可以是與當前URL同源的任意URL 。相反，只有在修改哈希時，設置 window.location 才能是同一個 document。
• 如果你不想改URL，就不用改。相反，設置 window.location = "#foo";在當前哈希不是 #foo 時， 才能創建新的歷史記錄項。
• 你可以將任意數據和新的歷史記錄項相關聯。而基於哈希的方式，要把所有相關數據編碼爲短字符串。
• 如果 標題 隨後還會被瀏覽器所用到，那麼這個數據是可以被使用的（哈希則不是）。

注意： pushState() 絕對不會觸發 hashchange 事件，即使新的URL與舊的URL僅哈希不同也是如此。

history.pushState({inpVal:"foo"},null,"/foo")

（2）popstate： 每當活動的歷史記錄項發生變化時觸發

如果當前活動的歷史記錄項是被 pushState 創建的，或者是由 replaceState 改變的，那麼 popstate 事件的狀態屬性 state 會包含一個當前歷史記錄狀態對象的拷貝。

window.addEventListener("popstate",function(e){
    console.log(e)
})

（3）hashchange：哈希值改變時觸發

window.addEventListener("hashchange",function(e){
    console.log(e)
})

案例：記錄搜索內容

<input type="text" id="search"><button οnclick="search()">搜索</button>
<div class="box"></div>
<script>
    var data = [
        {name:"html"},
        {name:"css"},
        {name:"js"},
        {name:"python"},
        {name:"java"},
        {name:"c"}]
    function search(){
        var value = document.getElementById("search").value
        var result = data.filter(function(obj){
            if(obj.name.indexOf(value)>-1){
                return obj
            }
        })
        render(result)
        /*@params
            state：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。如果不需要這個對象，此處可以填null。
            title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這裏可以填null。
            url：新的網址，必須與當前頁面處在同一個域。
            url中包含# 修改hash  --> history.hash
                    /  不會修改hash
        */  
        history.pushState({inpVal:value},null,"#"+value)
        // history.pushState({inpVal:value},null,"/"+value)

    }
    function render(data) {
        var content = ""
        for(var i=0;i<data.length;i++){
            content += `<div> ${data[i].name} </div>`
        }
        document.getElementsByClassName("box")[0].innerHTML = content
    }
    //只要url變了就會變化
    window.addEventListener("popstate",function(e){
        console.log(e)
        document.getElementById("search").value = e.state.inpVal
        var value = e.state.inpVal
        var result = data.filter(function(obj){
            if(obj.name.indexOf(value)>-1){
                return obj
            }
        })
        render(result)
    })
    //hash值變了纔會觸發，錨點變了纔會觸發 #
    window.addEventListener("hashchange",function(e){
        console.log(e)
    })
</script>
<script>
    render(data)
</script>

5、Node + webpack 四行寫個服務器

解釋：因爲下面幾個屬性需要在服務器中運行，所以用express寫個簡單的服務器

var express =  require("express")
var app = new express()
//默認監聽index.html文件
app.use(express.static("./webpage"))//監聽哪個文件夾的靜態文件
app.listen(3000)//監聽哪個端口號

6、deviceorientation：設備旋轉方向

注：只有帶有陀螺儀的設備才支持體感。蘋果設備的頁面只有在 http協議的情況下 才能使用這些接口

屬性值：

alpha:指北  [0,360)  0:北
beta:平放的時候 beta值爲0  立起的時候(短邊接觸桌面直立) beta 90
gamma:平方的時候 gamma值爲0  立起來的時候(長邊接觸桌面的直立) gamma 90

演示：在手機上訪問。將該html文件放在服務器所監聽的文件夾下，通過手機端訪問ip地址+端口號+文件名。（手機和筆記本要在同一個局域網內）

window.addEventListener("deviceorientation",function(e){
    var box = document.getElementsByClassName("box")[0]
    box.innerHTML = `alpha:${e.alpha} </br> beta:${e.beta} </br>gamma:${e.gamma} </br>`
});

7、devicemotion：設備運動/手勢

屬性值：

accelerationIncludingGravity:重力加速度（包括重心引力9.8）
acceleration(x,y,z):加速度（需要設備陀螺儀支持）
rotationRate(alpha,beat,gamma):旋轉速度
interval:獲取的時間間隔

演示：在手機上訪問。將該html文件放在服務器所監聽的文件夾下，通過手機端訪問ip地址+端口號+文件名。（手機和筆記本要在同一個局域網內）

window.addEventListener("devicemotion",function(e){
    var box = document.getElementsByClassName("box")[0]
    box.innerHTML = `x:${e.acceleration.x} </br> y:${e.acceleration.y} </br>z:${e.acceleration.z} </br>`
    if(Math.abs(e.acceleration.x) > 10 ||Math.abs(e.acceleration.y) > 10||Math.abs(e.acceleration.z) > 10){
        box.style.color = "red"
    }
});

8、Worker：多線程

解釋：js都是單線程的。worker是多線程的但是不能操作dom，沒有window對象，不能讀取本地件，可以發ajax ，可以進行計算

注：不能file方式打開（本地存儲文件），只能在服務器中使用

（1）創建Worker對象

//會運行worker.js中的代碼
var worker = new Worker("./worker.js");

（2）發送和接受數據：onmessage事件中的event.data

發送數據：

worker.postMessage({num:10000})

接受數據：

//當worker發送數據時，就會onmessage就會監聽到
//事件源e中的data屬性中含有發送的數據
worker.onmessage = function(e){
    console.log(e.data)
}

（3）執行時間比較

無worker時：執行時間時47ms(筆記本性能不同，時間有出入)

var startTime = Date.now()
console.log("========")
console.log("========")
var a = 1000000
var result=0
for(var i=0;i<a;i++){
     result+=i
}
console.log(result)
console.log("========")
console.log("========")
var endTime = Date.now()
console.log(endTime-startTime)

使用worker計算時：執行時間3ms(筆記本性能不同，時間有出入)

index.js

var startTime = Date.now()
console.log("========")
console.log("========")
var a = 1000000
var worker = new Worker("./worker.js");
worker.postMessage({num:a})
worker.onmessage = function(e){
    console.log(e.data)
}
console.log("========")
console.log("========")
var endTime = Date.now()
console.log(endTime-startTime)

worker.js

this.onmessage = function(e){
    var result=0
    for(var i=0;i<e.data.num;i++){
        result+=i
    }
    this.postMessage(result)
}

（4）導入其他js文件，執行運算方法

//index.js
var worker = new Worker("./worker.js");
worker.postMessage({num:10000})

//worker.js
importScripts("./math.js")
this.onmessage = function(e){
	console.log(e.data)
    console.log(this.getSum(1,3))
}

//math.js
function getSum(a,b){
    return a + b
}