H5(drag，百度地图使用，requestFullscreen，H5应用缓存)

<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>

<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>

<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>

<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>

<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>

<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>

<!--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>

//-------------------------------------------
<!--结构和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>