H5(drag，百度地圖使用，requestFullscreen，H5應用緩存)

1.拖拽元素

<script type="text/javascript">
    /*有拖拽屬性，就有屬性對應的拖拽事件*/
    //拖拽開始
    var box = document.querySelector('.box');
    box.ondragstart = function(){
        console.log('拖拽開始了')
    }

    //拖拽結束
    box.ondragend=function(){
        console.log('拖拽結束了')
    }

    //拖拽離開：鼠標拖拽時，離開被拖拽的元素就觸發該事件
    box.ondragleave = function(){
        console.log('拖拽離開了 ')
    }
    
    
    box.ondrag = function(){
        console.log('拖拽。。。。。')
    }
</script>

2.目標元素

<script type="text/javascript">
    /*目標元素拖拽事件*/
    var tow = document.querySelector('.two');

    //當被拖拽元素進入時觸發
    tow.ondragenter=function(){
        console.log('他來了')
    }

    //當被拖拽元素離開時觸發
    tow.ondragleave=function(){
        console.log('走了')
    }

    //當拖拽元素在目標元素上時，連續觸發
    tow.ondragover = function(e){
        e.preventDefault();//阻止拖拽的默認行爲
        console.log('over')
    }
    //在目標元素上面鬆開鼠標的時候，觸發
    tow.ondrop=function(){
        console.log('鬆開了')
    }
</script>

3.小球拖拽換位置

<div class="one">
    <div draggable="true">1</div>
    <div draggable="true">2</div>
    <div draggable="true">3</div>
    <div draggable="true">4</div>
    <div draggable="true">5</div>
    <div draggable="true">6</div>
    <div draggable="true">7</div>
    <div draggable="true">8</div>
</div>
<div class="two"></div>
</body>
<script type="text/javascript">
    var boxs = document.querySelectorAll('.one div');
    var two = document.querySelector('.two');
    var temp = null;
    //給所有小球分別設置拖拽事件
    for(var i= 0; i < boxs.length;i++){
        boxs[i].ondragstart=function(){
            //把當前拖拽的元素存起來
            temp = this;
        }
        boxs[i].ondragend = function(){
            //當拖拽結束，清空temp
            temp = null;
        }
    }
    
    two.ondragover = function(e){
        e.preventDefault();//必須在dragover中阻止瀏覽器默認行爲，下邊的ondrop事件纔會生效
    }

    two.ondrop=function(){
        //把拖拽的元素添加進來即可
        this.appendChild(temp);
    }
    
</script>

4.獲取位置信息

<script type="text/javascript">
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(suc,err);
    }else{
        console.log('sorry,您的瀏覽器不支持地理定位')
    }

    //獲取地理位置成功的回調函數
    function suc(position){
        var wd = position.coords.latitude;
        var jd = position.coords.longitude;
        console.log('獲取用戶位置成功');
        console.log(jd+','+wd)
    }
    function err(err){
        console.log(err);
        console.log('獲取用戶位置失敗')
    }
</script>

5.獲取城市信息

<script type="text/javascript">
    navigator.geolocation.getCurrentPosition(function(position){
        console.log(position)
        //獲取經緯度
        var wd = position.coords.latitude;
        var jd = position.coords.longitude;
        
        //百度地圖的API,多看文檔
        //實例化一個百度地圖對象
        var point = new BMap.Point(jd,wd);
        console.log(point)
    
        //實例化一個座標點轉換對象
        var mygeo = new BMap.Geocoder()
        
        mygeo.getLocation(point,function(result){
            var city = result.addressComponents.city;//將座標點轉換爲地理位置
            alert(city)
        });
    });
</script>

6.requestFullscreen()

<script type="text/javascript">
    var box = document.querySelector('.box');
    //    requestFullscreen()開啓全屏顯示
    //    cancleFullscreen()關閉全屏顯示
    var fl =true;
    box.onclick = function () {
        if(fl){
            lanchFullscreen(box);
            fl=false;
        }else{
            exitFullscreen();
            fl=true
        }
    }

    //    跨瀏覽器發動全屏
    //-----------------------------
    function lanchFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        }else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();
        }
    }

    //----------------------------------
    //    跨瀏覽器退出全屏
    function exitFullscreen(){
        if(document.exitFullscreen){
            document.exitFullscreen();
        } else if(document.mozCancelFullScreen){
            document.mozCancelFullScreen();
        } else if(document.msExitFullscreen){
            document.msExiFullscreen();
        } else if(document.webkitCancelFullScreen){
            document.webkitCancelFullScreen();
        }
    }
</script>

7.H5應用緩存

<!--HTML5 應用緩存-->
<!--HTML5中，我們可以建立一個離線的應用，只需要創建一個cache manifest文件即可-->
<!--優勢：-->
<!--1.  可配置需要緩存的資源-->
<!--2.  網絡無連接應用任可用-->
<!--3.  本地請求緩存資源，提升訪問速度，增強用戶體驗-->
<!--4.  減少請求，緩解服務器負擔-->

<!--index.appcache文件格式-->
<!--CACHE MANIFEST-->

<!--CACHE:-->
<!--# 需要緩存的列表-->
<!--style1.css-->
<!--1.jpg-->
<!--01.js-->
<!--http://localhost/applicationcache/02.js-->
<!--http://localhost/applicationcache/zepto.js-->

<!--NETWORK:-->
<!--# 不需要緩存的-->
<!--4.jpg-->

<!--FALLBACK:-->
<!--# 訪問緩存失敗後，備用訪問的資源，第一個是訪問源，第二個是替換文件*.html /offline.html-->
<!--2.jpg/3.jpg-->



//--------------------------------



<!--CACHE MANIFEST-->

<!--#下面是要緩存的文件-->
<!--CACHE:-->
<!--    http://kysvc.top/img/index.css-->
<!--    http://kysvc.top/img/img1.jpg-->

<!--#指定需要聯網才能訪問的資源-->
<!--NETWORK:-->
<!--    http://kysvc.top/img/img3.jpg-->
<!--    http://kysvc.top/img/img4.jpg-->

<!--#當你的頁面無法訪問的時候，可以跳轉到指定頁面-->
<!--FALLBACK:-->
<!--    02.html-->


//--------------------------------

<!--解析清單該怎麼寫：-->
<!--第一行CACHE MANIFEST是必須的-->
<!--把想要緩存的文件寫在CACHE下面-->
<!--把指定要聯網才能訪問的資源寫在NETWORK下面-->
<!--當頁面無法訪問的時候，打開一個404頁面，則寫在FALLBACK下面-->
<!--最後，一定要記得，在需要緩存的頁面添加manifest屬性，路徑一定要正確-->

<!--結論就是：當聯網狀態下，訪問過一次的東西，如果放在緩存清單裏， 那麼即便是在斷網狀態下，照樣可以運行-->

<!DOCTYPE html>
<html manifest="index.appcache"><!--路徑和清單的名字對應-->
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="http://kysvc.top/img/index.css"/>
    </head>
    <body>
        <img src="http://kysvc.top/img/img1.jpg"/>
        <img src="http://kysvc.top/img/img3.jpg"/>
        <img src="http://kysvc.top/img/img4.jpg"/>
    </body>
</html>

8.history.pushstate

//-------------------------------------------
<!--結構和js文件-->
<!--實現在頁面不跳轉的情況下實現瀏覽器歷史記錄的更新，也就是說頁面不刷新，訪問歷史-->
    <body>
        <div class='warp'>
            <div class="list">
                <ul id="list"></ul>
            </div>
            <div class="content">
                <textarea id="content" cols="30" rows="10"></textarea>
            </div>
        </div>
    </body>
    <script src="data.js"></script>
    <script type="text/javascript">
        var listE = document.querySelector('#list');
        //把所有歌曲綁定到列表上面
        for(var title in data){
            var li = document.createElement('li');
            li.innerHTML = '<a class="link" data-title="'+title+'" href="?title="'+title+'">'+title+'</a>';
            listE.appendChild(li)
        }
        //爲每一個連接註冊點擊事件
        var links = document.querySelectorAll('.link');
        for(var i = 0; i < links.length; i ++){
            links[i].addEventListener('click',function clickItem(e){
                //點擊獲取元素標題
                var title = this.dataset['title'];
                //加載歌詞
                loadC(title);
                //記錄訪問歷史
                history.pushState(title,title,'?title='+title);
                e.preventDefault();
            })
        }
        window.addEventListener('popstate',function(e){
            console.log(e);//事件對象e有一個e的state
            loadC(e.state);//通過history.pushState()儲存的數據調用函數loadC重新渲染頁面,頁面沒有跳轉
        })
        function loadC(title){
            document.querySelector('#content').value = data[title];
        }
    </script>