HTML5——接口

最新推荐文章于 2024-04-08 08:09:24 发布

Galaksen

最新推荐文章于 2024-04-08 08:09:24 发布

阅读量3.6k

点赞数

分类专栏：学习笔记文章标签： HTML5

本文链接：https://blog.csdn.net/qq_41857060/article/details/102573835

版权

学习笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

1.网络监听接口

2.全屏接口的使用

全屏操作的主要方法和属性：

requestFullScreen()：开启全屏显示，不同浏览器需要添加不同的前缀（ Chrome：webkit、Firefox：moz、IE：ms、Opera：o）
cancelFullScreen()：退出全屏显示，在不同的浏览器下也添加前缀，退出全屏只能使用document来实现
fullScreenElement：是否是全屏状态，也只能使用document进行判断

<body>
<div>
    <img src="img/pic1.jpg" alt="">
    <input type="button" id="full" value="全屏">
    <input type="button" id="cancelFull" value="退出全屏">
    <input type="button" id="isFull" value="是否全屏">
</div>
<script>
    window.onload=function(){
        var div=document.querySelector("div");
        /*全屏操作*/
        document.querySelector("#full").onclick=function(){
            /*使用能力测试添加不同浏览器下的前缀*/
            if(div.requestFullScreen){
                div.requestFullScreen();
            }
            else if(div.webkitRequestFullScreen){
                div.webkitRequestFullScreen();
            }
            else if(div.mozRequestFullScreen){
                div.mozRequestFullScreen();
            }
            else if(div.msRequestFullScreen){
                div.msRequestFullScreen();
            }
        };

        /*退出全屏*/
        document.querySelector("#cancelFull").onclick=function(){
            if(document.cancelFullScreen){
                document.cancelFullScreen();
            }
            else if(document.webkitCancelFullScreen){
                document.webkitCancelFullScreen();
            }
            else if(document.mozCancelFullScreen){
                document.mozCancelFullScreen();
            }
            else if(document.msCancelFullScreen){
                document.msCancelFullScreen();
            }
        };

        /*判断是否是全屏状态*/
        document.querySelector("#isFull").onclick=function(){
        //注意：这里火狐的是mozFullScreenElement（符合camel命名法），Screen是大写的，其他的screen都是小写的
            if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
                alert(true);
            }
            else{
                alert(false);
            }
        }
    };
</script>
</body>

3.FileReader的使用

FileReader：读取文件内容

readAsText()：读取文本文件(可以使用txt打开的文件)。返回文本字符串。默认编码是UTF-8。
readAsBinaryString()：读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储。
readAsDataURL()：读取文件，获取一段以data开头的字符串，这段字符串的本质就是DataURL，DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。没有返回值，读取的结果存储在文件读取对象的result中。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中，以优化网站的加载速度和执行效率。
abort()：中断读取。

图片展示：<img src="img/pic1.jpg" alt=""/>

src：指定路径(资源定位——url)。src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，它占用服务器资源。

在有DataURL后，将图片资源的数据直接存储在url中，再指定给src，就不需要通过src指定的url路径再去服务器请求资源，因为此时url本身就是图片资源。

实现：图片的即时预览（选择图片文件后，就会立即显示相应的图片）

即时：当用户选择完图片之后就立刻进行预览的处理——>onchange 事件
预览：通过文件读取对象的readAsDataURL()完成

4.拖拽接口

学习拖拽，就是学习拖拽事件

应用于被拖拽元素的事件

ondrag：整个拖拽过程都会调用（每隔 350 毫秒会触发 ondrag 事件）
ondragstart：当拖拽开始时调用
ondragend：当拖拽结束时调用
ondragleave：当鼠标离开拖拽元素时调用

应用于目标元素的事件

ondragenter：当拖拽元素进入目标元素时调用
ondragover：当拖拽元素在目标元素上移动时调用（持续调用）
ondrop：当在目标元素上松开鼠标时调用
ondragleave：当拖拽元素离开目标元素时调用

5.地理定位接口

<style>
    .de{
         width: 200px;
         height: 100px;
         border: 1px solid black;
       }
</style>

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

<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        /*能力测试：当前浏览器是否支持定位*/
        if (navigator.geolocation)
        {
            /*参数1：获取地理信息成功之后的回调
            * 参数2：获取地理信息失败之后的回调
            * 参数3：调整获取当前地理信息的方式，不一定需要*/
            //navigator.geolocation.getCurrentPosition(success,error,option);


            /*option:可以设置获取数据的方式
            * enableHighAccuracy:true/false:是否使用高精度
            * timeout:设置超时时间，单位ms
            * maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位ms*/
            navigator.geolocation.getCurrentPosition(showPosition,showError,{
                /*enableHighAccuracy:true,
                timeout:3000*/
            });
        }
        else{
            //定位请求不被当前浏览器支持
            x.innerHTML="Geolocation is not supported by this browser.";
        }
    }
    /*成功获取定位之后的回调*/
    /*如果获取地理信息成功，会将获取到的地理信息传递给成功之后的回调*/
    // position.coords.latitude 纬度
    // position.coords.longitude 经度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
    function showPosition(position)
    {
        x.innerHTML="Latitude: " + position.coords.latitude +
                "<br />Longitude: " + position.coords.longitude;
    }
    /*获取定位失败之后的回调*/
    function showError(error)
    {
        switch(error.code)
        {
            //用户拒绝定位请求
            case error.PERMISSION_DENIED:
                x.innerHTML="User denied the request for Geolocation.";
                break;
                //定位信息不可用
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="Location information is unavailable.";
                break;
                //请求超时
            case error.TIMEOUT:
                x.innerHTML="The request to get user location timed out.";
                break;
                //位置错误
            case error.UNKNOWN_ERROR:
                x.innerHTML="An unknown error occurred.";
                break;
        }
    }
    getLocation();
</script>

但事实上浏览器即使允许了获取定位请求，也不能正常成功获取定位之后的回调，因为个人有限制。在移动端可以。

通过第三方的接口获取地理信息，这里以百度地图为例（百度地图开放平台）

<!DOCTYPE html>
<html>
<head>
    <title>普通地图&全景图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu"></script>
    <style type="text/css">
        body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #panorama {height: 50%;overflow: hidden;}
        #normal_map {height:50%;overflow: hidden;}
    </style>
</head>
<body>
<div id="panorama"></div><!--全景-->
<div id="normal_map"></div><!--普通-->
<script type="text/javascript">
    //全景图展示
    var panorama = new BMap.Panorama('panorama');
    panorama.setPosition(new BMap.Point(116.404125,39.91405)); //根据经纬度坐标展示全景图
    panorama.setPov({heading: -40, pitch: 6});

    panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
        var pos = panorama.getPosition();
        map.setCenter(new BMap.Point(pos.lng, pos.lat));
        marker.setPosition(pos);
    });
    //普通地图展示
    var mapOption = {
        mapType: BMAP_NORMAL_MAP,
        maxZoom: 18,
        drawMargin:0,
        enableFulltimeSpotClick: true,
        enableHighResolution:true
    }
    var map = new BMap.Map("normal_map", mapOption);
    var testpoint = new BMap.Point(116.404125,39.91405);
    map.centerAndZoom(testpoint, 18);
    var marker=new BMap.Marker(testpoint);
    marker.enableDragging();
    map.addOverlay(marker);
    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.MapTypeControl());
    marker.addEventListener('dragend',function(e){
        panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
        panorama.setPov({heading: -40, pitch: 6});}
    );
</script>
</body>
</html>

在安装有Flash插件的浏览器才可以显示全景地图部分

6.Web存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式以document.cookie（API）来进行存储，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案

6.1 sessionStorage

sessionStorage的使用：存储数据到本地。存储的容量5MB左右。

这个数据本质是存储在当前页面的内存中，意味着其它页面和浏览器无法获取数据。
它的生命周期为关闭当前页面，关闭页面或关闭浏览器，数据会自动清除。

setItem(key,value)：存储数据，以键值对的方式存储
getItem(key)：获取数据，通过指定名称key获取对应的value值
removeItem(key)：删除数据，通过指定名称key删除对应的value值
clear()：清空所有存储的内容

6.2 localStorage

使用方法同sessionStorage，不再赘余（注意与sessionStorage的不同之处）

localStorage的使用：存储的内容大概20MB。

不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据。
永久有效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除。如果想清除，必须手动清除。

setItem(key,value)：存储数据，以键值对的方式存储
getItem(key)：获取数据，通过指定名称key获取对应的value值
removeItem(key)：删除数据，通过指定名称key删除对应的值
clear()：清空所有存储的内容

7.应用缓存

此时断开网络后，无法获取图片

这时就可以创建应用缓存文件，使页面在网络断开的情况下，还可以显示当前页面或当前页面的某些资源和内容

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

优势：

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

manifest 文件：本质是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

1.启用应用程序缓存，需在文档的 <html> 标签中添加 manifest 属性（manifest="应用程序缓存清单文件的路径"，建议文件的扩展名是appcache）

2."#"的后面写注释

注意：manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

在tomcat服务器中的web.xml中添加：

<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

8.多媒体接口（自定义播放器案例）

HTML 5 视频/音频参考手册

1.常用方法：

load()：重新加载
play()：开始播放
pause()：暂停

这些方法都是原生的js方法，如果想调用这些方法只能使用原生js，jQuery没有提供对视频播放控件的方式，所以想使用jQuery的写自定义播放器的话，必须将jQuery对象转成DOM元素

2.常用属性：

currentTime：视频播放的当前进度（以秒计）
duration：视频的总时间（以秒计）
paused：视频播放的状态（是否暂停）

3.常用事件：

oncanplay：在用户可以开始播放音频/视频（audio/video）时触发
ontimeupdate：当目前的播放位置已更改时
onended：播放结束时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义视频播放器</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
<h3 class="playerTitle">视频播放器</h3>
<div class="player">
    <video src="mp4/chrome.mp4"></video>
    <div class="controls">
        <a href="javascript:;" class="switch fa fa-play"></a><!--播放-->
        <a href="javascript:;" class="expand fa fa-expand"></a><!--全屏-->
        <div class="progress"><!--进度条，总时长-->
            <div class="bar"></div><!--透明，用来响应事件-->
            <div class="loaded"></div><!--已加载-->
            <div class="elapse"></div><!--已播放-->
        </div>
        <div class="time"><!--时间-->
            <span class="currentTime">00:00:00</span>
            \
            <span class="totalTime">00:00:00</span>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
    /*通过jq来实现功能*/
    $(function () {
        /*1.获取播放器:jq对象——>DOM元素*/
        var video = $("video")[0];

        /*2.实现播放与暂停*/
        $(".switch").click(function () {
            /*如果是暂停>>播放，如果是播放>>暂停*/
            if (video.paused) {
                video.play();
                /*移除暂停样式，添加播放样式*/
            } else {
                video.pause();
                /*移除播放样式，添加暂停样式*/
            }
            /*设置样式 fa-pause:暂停*/
            $(this).toggleClass("fa-pause");
        });

        /*3.实现全屏操作*/
        $(".expand").click(function () {
            /*不同浏览器添加不同前缀*/
            if (video.requestFullScreen) {
                video.requestFullScreen();
            } else if (video.webkitRequestFullScreen) {
                video.webkitRequestFullScreen();
            } else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            } else if (video.msRequestFullScreen) {
                video.msRequestFullScreen();
            }
        });

        /*封装获取时长的方法*/
        function getResult(time) {
            /*时分秒，小于10时，前面应该补0*/
            //时
            var hour = Math.floor(time / 3600);
            hour = hour < 10 ? "0" + hour : hour;
            //分
            var minute = Math.floor(time % 3600 / 60);
            minute = minute < 10 ? "0" + minute : minute;
            //秒
            var second = Math.floor(time % 60);
            second = second < 10 ? "0" + second : second;

            return hour + ":" + minute + ":" + second;
        }

        /*4.实现播放业务逻辑：当视频文件可以播放时触发oncanplay*/
        video.oncanplay = function () {
            /*由于加载的是本地资源，视频会直接加载出来；设置一次性定时器，模拟视频加载情况*/
            setTimeout(function () {
                /*4.1 将视频文件显示 display:none——>display:block*/
                video.style.display = "block";
                /*4.2 获取当前文件视频文件的总时长(s)*/
                var total = video.duration;
                /*4.3 显示总时间*/
                $(".totalTime").html(getResult(total));
            }, 2000);
        };

        /*5.实现播放过程中的业务逻辑：视频播放过程中触发ontimeupdate*/
        video.ontimeupdate = function () {
            /*5.1 获取当前的播放时间*/
            var current = video.currentTime;
            /*5.2 显示当前时间*/
            $(".currentTime").html(getResult(current));
            /*5.3 设置已播放进度条的样式*/
            var percent = (current / video.duration) * 100 + "%";
            $(".elapse").css("width", percent);
        };

        /*6.实现跳播*/
        $(".bar").on("click", function (e) {
            /*6.1 使用事件处理函数e来获取到鼠标点击的位置(当前鼠标相对于父元素的left值)*/
            var offset = e.offsetX;
            /*6.2 计算偏移值相对于总父元素宽度的比例*/
            var percent = offset / $(this).width();
            /*6.3 计算这个位置对应的视频进度值*/
            var current = percent * video.duration;
            /*6.4 设置当前视频的currentTime*/
            video.currentTime = current;
        });

        /*7.播放完毕后重置播放器的状态*/
        video.onended = function () {
            video.currentTime = 0;
            $(".switch").removeClass("fa-pause");
        }
    });
</script>
</body>
</html>

css.css

body {
    padding: 0;
    margin: 0;
    font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
    background-color: #F7F7F7;
}

a {
    text-decoration: none;
}
.playerTitle{
    width:100%;
    margin: 0 auto;
    line-height:100px;
    font-size: 40px;
    text-align: center;
}
.player{
    width: 720px;
    height: 360px;
    margin: 0 auto;
    background: url("../img/loading.gif") center no-repeat;
    background-size: cover;
    position: relative;
}
video{
    height:100%;
    margin: 0 auto;
    display: none;
}
.controls {
    width: 720px;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: -40px;
    background-color: #000;
}
/*播放按钮*/
.controls > .switch{
    width: 20px;
    height: 20px;
    display: block;
    font-size: 20px;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 10px;
}
/*全屏按钮*/
.controls > .expand{
    width: 20px;
    height: 20px;
    display: block;
    font-size: 20px;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10px;
}
.controls > .progress{
    width: 430px;
    height: 10px;
    position: absolute;
    left:40px;
    bottom:15px;
    background-color: #555;
}
.controls > .progress > .bar{
    width:100%;
    height:100%;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;/*透明的*/
    z-index: 999;
}
/*已加载*/
.controls > .progress > .loaded{
    width:60%;
    height:100%;
    background-color: #999;
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
/*已播放*/
.controls > .progress > .elapse{
    width:0;
    height:100%;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}
.controls > .time{
    height: 20px;
    position: absolute;
    left:490px;
    top: 10px;
    color: #fff;
    font-size: 14px;
}

Galaksen

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML5——接口

目录1.网络监听接口2.全屏接口的使用3.FileReader的使用4.拖拽接口5.地理定位接口6.Web存储6.1 sessionStorage6.2 localStorage7.应用缓存8.多媒体接口（自定义播放器案例）1.网络监听接口2.全屏接口的使用全屏操作的主要方法和属性：requestFullScreen()：开启全屏显示...
复制链接

扫一扫