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

相关阅读:
CentOS下使用crontab命令来定时执行任务
 java调用wkhtmltopdf生成pdf文件，美观，省事
 ElasticSearch-5.3.1集群环境搭建，安装ElasticSearch-head插件，安装错误解决
 Jfinal QuartzPlugin 简单使用案例
 tampermonkey，采用js解析自定义脚本，实现网页列表数据采集分析
 安装Elasticsearch5.0 部署Head插件
 Springmvc中配置Quartz使用，实现任务实时调度。
IDEA异常解决: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
js jquery 实现html页面之间参数传递（单一参数、对象参数传递）
ajaxfileupload 实现多文件上传
原文地址：https://www.cnblogs.com/ssjt/p/10071517.html