• H5笔记02

    网路接口

    • ononline:网络链接的时候触发这个事件
    • onoffline:网络断开的时候触发
          window.addEventListener('online',function (ev) {
            alert('网络连接了');
        });
        window.addEventListener('offline',function (ev) {
            alert('网络断开了');
        })

    全屏接口

    • requestFullScreen():开启全屏显示
    • cancelFullScreen():退出全屏
    • fullScreenElement:是否是全屏状态

    不同的浏览器需要加上不同的前缀

    • chrome:webkit
    • firefox::moz
    • ie:ms 但是IE9不支持
    • opera:o
    <div>
    <img src="../imgs/294.jpg" alt="">
    <input type="button" id='full' value="全屏">
    <input type="button" id="cancelFull" value="退出全屏">
    <input type="button" id='isFull' value="是否全屏">
</div>



<script>
    // - requestFullScreen():开启全屏显示
    // - cancelFullScreen():退出全屏
    // - fullscreenElement:是否是全屏状态
    window.onload=function () {
        var div=document.querySelector('div')

        document.querySelector("#full").onclick=function () {
            // div.requestFullScreen();
            // div.webkitRequestFullScreen();
            // div.mozRequestFullScreen();
            //兼容处理的方式
            if(div.requestFullscreen)
            {
                div.requestFullscreen();
            }
            else if(div.webkitRequestFullScreen)
            {
                div.webkitRequestFullScreen();
            }else if(div.mozRequestFullScreen)
            {
                div.mozRequestFullScreen();
            }else if(div.msRequestFullScreen)
            {
                div.msRequestFullScreen();
            }
        }

        //退出全屏  退出全屏必须使用document实现
             document.q
        document.querySelector('#ifFull').onclick=function () {
             if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement)
             {
                 alert(true);
             }
             else{
                 alert(false);
             }
        }

    }
</script>

    退出全名不是某个元素退出而是整个文档，退出全屏必须使用document实现

    mozFullScreenElement这个名字和其他的不一样

    文件读取 FileReader

    • 1.readAsText():读取文本文件
    • 2.readAsBinaryString(): 读取任意类型文件，返回给用户看
    • 3.readAsDataURL():读取文档获取一段data开头的字符穿，DataURL是一种将文件嵌入到文档中的方案
    • abort():中断读取
      src请求资源会发送请求，占用服务器资源

    上传头像预览功能实现

    • onabort:读取中断触发
    • onerror:读取错误时触发
    • onload:文件读取完成时触发
    • onloadend:读取完成时触发，无论成功还是失败
    • onloadstart:开始时触发
    • onloadgress:读取文件过程中持续触发

    文件读取需要一定的时间

    
<!--图片展示  src请求资源会发送请求，占用服务器资源-->
<img src="../imgs/295.jpg" alt="">
<p>上传头像的预览功能</p>
<form action="">
    文件：<input type="file" name="imgfile" id="imgfile"><br/>
    <input type="submit" value="提交">
</form>

<script>
// - 1.readAsText():读取文本文件
// - 2.readAsBinaryString(): 读取任意类型文件，返回给用户看
// - 3.readAsDataURL():读取文档获取一段data开头的字符穿，DataURL是一种将文件嵌入到文档中的方案

// 预览操作
document.getElementById('imgfile').onchange=function (ev) {
    //1.创建读取文件对象
    var reader=new FileReader();
    /* 2.读取文件，获取DataURL
           1.没有返回值,会将读取的结果返回到文件对象中的result
           2.需要传递参数 binary large object：文件（图片）
           3.文件存储在file表单元素的files属性中，他是一个数组
    */
    var file=document.querySelector('#imgfile').files[0];//获取第一张图片

    reader.readAsDataURL(file);
    //文件读取完毕后需要做的事情：数据是BASE64
    reader.onload=function () {
        document.querySelector('img').src=reader.result;
    }

}
</script>

    拖拽接口的使用

    • 必须为元素添加draggable="true",图片和链接本身就支持
    • 拖拽事件学习，被拖拽目标，目标原属

    拖拽事件 --被拖拽元素

    • ondrag：这个歌拖拽过程都会调用
    • ondrapstart:应用于拖拽元素，当拖拽开始的时候调用
    • ondragleave:当鼠标来开拖拽元素时调用
    • ondragen :当拖拽结束时调用

    浏览器默认阻止ondrop事件，必须在ondragover中加入e.preventDefault()；阻止默认行为

    拖拽事件 -- 目标元素

    • ondragenter: 应用于目标元素，当拖拽元素进入时调用
    • ondragover:当停留在目标元素上时调用
    • ondrap: 当在目标元素上松开鼠标时调用
    • ondragleve:当鼠标离开目标元素时调用
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5中拖拽接口的使用</title>
    <style>
        .first,.second{
             200px;
            height: 200px;
            float: left;
            margin-left: 20px;
            padding: 2px 2px;

        }
        .first{
            border: solid 1px blue;
        }
        .second{
            border: solid 1px red;
        }
        p{
            margin: 0 0;
            background-color: #7d64ff;
        }

    </style>
</head>
<body>
<div class="first">
    <p class="one" draggable="true">Hello!</p>
</div>
<div class="second">

</div>


<script>

    //应用于拖拽元素
    var p=document.querySelector('p');

    // p.ondrag=function (ev) {
    //     console.log('ondrag');
    // }
    //  p.ondragstart=function (ev) {
    //     console.log('ondragstart');
    // }
    //  p.ondragend=function (ev) {
    //    console.log('ondragend');
    // }
    //  p.ondragleave=function (ev) {
    //     console.log('ondragend');
    // }

    //应用于目标元素,
    var div2= document.querySelector('.second');
    div2.ondragover=function (e) {
        e.preventDefault();
    }
    div2.ondrop=function () {
        div2.appendChild(p);
    }
</script>


</body>
</html>

    任意元素拖拽至任意上的解决方案

    • 通过事件来获取当前被拖拽的元素
    • 通过dataTransfer来实现数据的存储与捕获
    • 通过ev.dataTransfer.setData存储的数据。只能在drop事件中获取:getData
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
             200px;
            height:200px;
            border:solid 1px red;
            margin-left: 20px;
            margin-top: 20px;
            float:left
        }
        p{
            background-color: greenyellow;
            margin-top:1px;
        }

    </style>

</head>
<body>

<div id="one">
    <p id="first" draggable="true">first</p>
    <p id="second" draggable="true">second</p>

</div>
<div id="two">

</div>

<script>

    var obj=null;//当前被拖拽的元素
    document.ondragstart=function (ev) {
        //通过事件来获取当前被拖拽的元素

        ev.target.style.opacity=0.5;
        ev.target.parentNode.style.borderWidth="5px";
        obj=ev.target;
        // 通过dataTransfer来实现数据的存储与捕获
        //setData(format,data):
        //format:数据类型：text/html text/uri-list
        //data:数据:一般来说时字符串值
        ev.dataTransfer.setData('text/html',ev.target.id);

    }
    document.ondragover=function (ev) {
        ev.preventDefault();
    }
    document.ondrop=function (ev) {
        //通过ev.dataTransfer.setData存储的数据。只能在drop事件中获取:getData
        var id=ev.dataTransfer.getData('text/html');
        ev.target.appendChild(document.getElementById(id));

    }

</script>


</body>
</html>

    地理位置接口

    定位在浏览器端是不被允许的，但是在手机端可以

     navigator.geolocation.getCurrentPosition(success,error,option)
 
 success:*成功之后的回调函数
 error:* 失败之后的回调函数
 postion: 获取当前位置信息的方式

    success：获取的地理信息会通过参数传递给回调函数

    // position.coords.latitude 纬度
//position.coords.longitude 经度
//position.coords.accuracy 精度
// position.coords.altitude 海拔高度

    error:出错信息也会传递给回调函数

       function showEerror(error)
    {
        switch (error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML='User denined the request for Geolocation.'
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML='Location infomation is unavailable.'
                break;
            case error.TIMEOUT:
                x.innerHTML='The request to get user location timed!'
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML='An unknown error occurred.'
                break;

        }
    }

    option参数

    enabeHigAccuracy:true/false 是否使用高精度
timeout:设置超时时间，单位ms
maxmumAge:可以设置浏览器重新获取去地理位置的时间间隔，单位也是毫秒

    demo

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理定位接口的使用</title>
    <style>

    </style>
</head>
<body>

<div class="demo" id="demo"></div>


<script>

    var x= document.getElementById("demo");
    function getLoction(){
        if(navigator.geolocation)
        {
            /*
            * getCurrentPosition三个参数：sucdess,error,option
            *成功之后的回调函数
            * 失败之后的回调函数
            * 获取当前位置信息的方式
            * */
            navigator.geolocation.getCurrentPosition(showPosition,showError,{});
        }
    }
     //获取地理信息成功之后的回调函数，获取的地理信息会通过参数传递给回调函数
    // position.coords.latitude 纬度
    //position.coords.longitude 经度
    //position.coords.accuracy 精度
    // position.coords.altitude 海拔高度

    function showPosition(postion)
    {
        x.innerText="Latitude:"+postion.coords.latitude+'<br/>'+
                'Longitude:'+position.coords.longitude;

    }
    //获取失败之后的回调,出错信息也会传递给回调函数
    function showEerror(error)
    {
        switch (error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML='User denined the request for Geolocation.'
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML='Location infomation is unavailable.'
                break;
            case error.TIMEOUT:
                x.innerHTML='The request to get user location timed!'
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML='An unknown error occurred.'
                break;

        }
    }

    getLoction()
</script>

</body>
</html>

    如果真要获取地理位置，可以使用第三方接口来实现

    • 1.map.baidu.com
    • 2.申请密钥
    • 3.选模板复制代码

    web存储 sessionStorage | localStorage

    sessionStorage

    cookie存储数据大小有限制4K

    • 存储数据到本地5mb
    • setItem(key,value)通过键值对来存储数据
    • getItem(key)通过key来获取数据的值，找不到就是空值
    • removeItem(key)通过key来删除数据，key不存在，不会报错
    • clear():清空所有内容

    通过F12 -->applicatons中可以查看到存储的数据 存储的数据跟页面有关系，浏览器只要关闭也会清除

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<h2>sessionStorage的使用：</h2>
- 存储数据到本地5mb
- setItem(key,value)通过键值对来存储数据 
- getItem(key)通过key来获取数据的值,找不到就是空值 
- removeItem(key)通过key来删除数据 ,key不存在，不会报错
- clear():清空所有内容 <br>


<input type="text" id="name" value="设置数据">
<input type="button" id="setData" value="设置数据">
<input type="button" id="getData" value="获取数据">
<input type="button" value="删除数据" id="delData">


<script>
    //数据存储
    document.querySelector('#setData').onclick=function () {
        var name=document.querySelector('#name').value;
        window.sessionStorage.setItem('username',name);
    }
    //获取数据
    document.querySelector('#getData').onclick=function () {

        username=window.sessionStorage.getItem('username');
        alert(username);
    }
    //删除数据
    document.querySelector('#getData').onclick=function () {

        window.sessionStorage.removeItem('username');

    }

</script>
</body>
</html>

    localStorage

    • 存储数据到本地20mb
    • setItem(key,value)通过键值对来存储数据
    • getItem(key)通过key来获取数据的值,找不到就是空值
    • removeItem(key)通过key来删除数据 ,key不存在，不会报错
    • clear():清空所有内容

    不同浏览器不可以共享数据，同一浏览器可以共享数据
    浏览器关闭仍然存在，存在硬盘上的

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<h2>localStorage的使用：</h2>
- 存储数据到本地20mb <br>
- setItem(key,value)通过键值对来存储数据 <br>
- getItem(key)通过key来获取数据的值,找不到就是空值 <br>
- removeItem(key)通过key来删除数据 ,key不存在，不会报错<br>
- clear():清空所有内容 <br>

<p>不同浏览器不可以共享数据，同一浏览器可以共享数据</p>
<p>**浏览器关闭仍然存在，存在硬盘上的**</p>

<input type="text" id="name" value="设置数据">
<input type="button" id="setData" value="设置数据">
<input type="button" id="getData" value="获取数据">
<input type="button" value="删除数据" id="delData">


<script>
    //数据存储
    document.querySelector('#setData').onclick=function () {
        var name=document.querySelector('#name').value;
        window.localStorage.setItem('username',name);
    }
    //获取数据
    document.querySelector('#getData').onclick=function () {

        username=window.localStorage.getItem('username');
        alert(username);
    }
    //删除数据
    document.querySelector('#getData').onclick=function () {

        window.localStorage('username');

    }

</script>
</body>
</html>

    应用缓存

    使用HTML5,通过cache manifest文件，可以轻松的创建web离线版本

    优势

    • 根据需要配置需要缓存的资源
    • 网络无连接仍然可用
    • 本地读取缓存资源，提升访问速度，增加用户体验
    • 减少请求，降低服务器负担

    Cache Manifest基础

    • 在HTML标签中指定文件路径
    • 文件扩展名最好是.appcache
    • manifest文件的开头第一句只能是CACHE MANIFEST,
    • 注释是使用

    CACHE:指定焕春的文件清单

    NETWORK:下面的配置每一次都许哟啊重新从服务器获取文件清单列表

    如果文件无法获取则使用指定的文件进行替代

    FALLBACK:#如果文件找不到，指定默认的文件

    如果想缓存所有文件可以写一个*

    manifest文件结构

    CACHE MANIFEST

#CACHE:指定缓存文件路径
#> 如果想缓存所有文件可以写一个*
CACHE:
../imgs/297.jpg

../imgs.294.jpg

#配置每一次都要重新从服务器获取文件清单列
NETWORK:
../imgs.294.jpg

#如果文件找不到，指定默认的文件
FALLBACK:

../imgs/294.jpg ../imgs/default.jpg

#如果需要对找不到文件都使用上面的规则替换请指定下面的符号，去掉#
#/:

    IIS添加MIME-type类型,如果是apache就需要了

    • win+R,输入：inetmgr
    • MIME类型，点击添加
    • 扩展名是.appcache
    • MIME类型输入：text/cache-manifest

    音频显示统一化 -多媒体接口

    必须使用原生js dom实现,如果使用jquery必须转成dom

    常用方法

    • play() ：播放
    • pause() ：暂替
    • stop() ：停止
    • paused:获取当前的状态是播放还是暂停
    • oncanplay:什么时候视频可以播放触发的事件
    • duration:属性获取视频总时长，获取的是有小数的秒
    • currentTime:属性，当前的播放的进度

    播放暂停样式切换

    toggleClass('类1 类2')
  • 相关阅读:
    在SQLite中使用索引优化查询速度
    SQLite支持的SQL数据操作
    left (outer) join , right (outer) join, full (outer) join, (inner) join, cross join 区别
    深入理解Android内存管理原理（六）
    Merge Sorted Array
    Sort Colors
    Construct Binary Tree from Preorder and Inorder Traversal
    Binary Tree Postorder Traversal
    Symmetric Tree
    Rotate Image
  • 原文地址：https://www.cnblogs.com/ssjt/p/10071517.html
Copyright © 2020-2023  润新知