专栏首页天天H5(drag,百度地图使用,requestFullscreen,H5应用缓存)

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

2860元腾讯云代金券免费领取,付款直接抵现金,立即领取>>>

腾讯云服务器1折限时抢购,2核4G云主机899元/3年,立即抢购>>>

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>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 选择器与css的一些用法

    天天_哥
  • css3转换(banner)

    天天_哥
  • vue中一些小坑(2)

    好久没写vue代码,时间长了不写都是会生疏或者有些地方会忽略,就像在项目刚开始就碰到了自己注册的header和footer不显示 其实这就是我们忽略了一些问题...

    天天_哥
  • 大屏数据展示之数字滑动动态显示

    接到一个大屏数据的需求,要是实时展示用户数,并且动画效果是翻转显示,折腾了半个多小时,写了一个demo出来,上代码

    windseek
  • 我自己开发的工具,打印出百度贴吧某用户发表过的所有帖子

    Jerry Wang
  • JavaScript笔记整理

    整理一篇工作中的JavaScript脚本笔记,不定时更新,笔记来自网上资料或者自己经验归纳。

    SmileNicky
  • 我自己开发的工具,打印出百度贴吧某用户发表过的所有帖子

    Jerry Wang
  • 智能搜索框实现思路--源码和流程图详解

    我们在浏览各大网站的时候,包括百度、淘宝、京东、雅虎等等网站,当我们输入一个单词或者文字的时候,下面会有一行行待选项供我们选择,很多的公司在做网站的时候也会考虑...

    何处锦绣不灰堆
  • js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结

    写前端的时候,很多的时候是避免不了注册这一关的,但是一般的注册是没有任何的难度的,无非就是一些简单的获取用户输入的数据,然后进行简单的校验以后调用接口,将数据发...

    何处锦绣不灰堆
  • 10个短小却超实用的JavaScript代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券

http://www.vxiaotou.com