H5学习第二天

最新推荐文章于 2022-07-11 17:10:15 发布

雪爪鸿泥

最新推荐文章于 2022-07-11 17:10:15 发布

阅读量150

点赞数

分类专栏： H5C3

本文链接：https://blog.csdn.net/weixin_39111384/article/details/105561473

版权

H5C3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、网络监听接口

ononline：网络连接的时候触发的事件；

onoffline：网络断开的时候触发的事件。

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

//全屏操作的主要方法：
1.requestFullScreen():开启全屏,不同浏览器需要添加不同的前缀
    chrome:webkit  firefox:moz  ie:ms  opera:o
2.cancelFullScreen():退出全屏显示.也需要天加前缀，在不同的浏览器下，退出全屏只能使用document来实现
3.fullScreenElement():是否是全屏状态

2.1 requestFullScreen()开启全屏

不同浏览器需要添加不同的前缀：chrome:webkit firefox:moz ie:ms opera:o
使用IE时，最后的screen的s为小写，也即msRequestFullscreen，否则无效
谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s，建议写成驼峰命名法；
将浏览器前缀兼容封装成函数。

function toFull(dom){
if(dom.requestFullscreen){
return dom.requestFullscreen();
}else if(dom.webkitRequestFullScreen){
return dom.webkitRequestFullScreen();
}else if(dom.mozRequestFullScreen){
return dom.mozRequestFullScreen();
}else{
return dom.msRequestFullScreen();
}
}

###2.2 cancelFullScreen()退出全屏

退出全屏显示.也需要天加前缀，在不同的浏览器下，退出全屏只能使用document来实现。从全屏状态中退出。目前实现的方法都是 cancelFullScreen() ,而不是标准的 exitFullscreen()。

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();
     }
}

###2.3 fullScreenElement():是否是全屏状态

function isDocumentInFullScreenMode() {
                if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
                    alert(true);
                } else {
                    alert(false);
                }
            }

三、FileReader的使用

##3.1 FileReader:读取文件内容

readAsText():读取文本文件(可以使用txt打开的文件)，返回的是文本字符串，默认编码是UTF-8
readAsBinaryString():读取任意类型的文件。返回的是二进制字符串，这个方法不是读取文件并展示的，它是用来存储文件的。例如：读取文件内容，获取二进制数据，传递给后台，后台接受数据之后，将数据存储。
readAsDataURL():读取文件后获取一段以data开头的字符串，这段字符串的本质是DataURL。DataURL是一种将文件（一般指的是图像或者能够嵌入到文档中的文件格式）嵌入到文档的方案，将资源转换为base64编码的字符串形式，并且将这些内容直接存储在URL中，优化了网站的加载速度和执行效率。
- readAsURL() 没有任何的返回值。但是在读取成功之后，会将读取的结果存储到文件读取对象的reault中
- readAsURL() 需要一个参数：binary large object：文件（图片或者其他可以嵌入到文档的类型）
- 文件存储在file表单元素的files属性中，他是一个数组。
abort():中断读取。

3.2 FileReader获取数据

FileReader提供一个完整的时事件模型，用来捕获文件读取时候的状态

onabort:读取文件中断时触发
onerror:读取文件错误的时候触发
onload：读取文件成功的时候触发
onloadend:读取文件完成时候触发（无论是成功还是失败，都会触发）
onloadstart：开始读取文件时候触发

onprogress:读取文件过程中持续触发

function getFileContent(){

          //1、创建读取文件对象

          var reader=new FileReader();

          //2、读取文件，获取dataAsURL

          var file=document.querySelector("#myFile").files[0];

          reader.readAsDataURL(file);

          reader.onload=function(){

              document.querySelector("img").src=reader.result;

          }

      }

四、拖拽事件

在h5中，如果想要拖拽元素，必须将为元素添加draggable=“true”，图片和超链接默认就可以拖拽。

拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程中都会被调用

ondragstart 应用于拖拽元素开始时候调用。

ondragleave 当鼠标离开拖拽元素时候调用

ondragend 当拖拽结束的时候调用

目标元素

ondragenter 应用于目标元素，整个拖拽元素进入时候被调用

ondragover 应用于拖拽元素停留在目标元素上时调用。

ondrop 当在目标元素上松开鼠标时候调用。此时将拖动的元素添加到目标元素中

ondragleave 当鼠标离开目标元素时候调用

注意事项：

浏览器默认会阻止ondrop事件，我们必须在在ondragover中阻止浏览器的默认行为

element.οndragοver=function(e){
//e 是事件参数对象
e.preventDefault();
}
ondrop 当在目标元素上松开鼠标时候调用。此时将拖动的元素添加到目标元素中

element.οndrοp=function(){
element.appendChild§;//将拖动的元素添加到目标元素中
}

4.1 dataTransfer

通过dataTransfer来实现数据的存储和获取

element.dataTransfer.setData(format，Data)

参数一：format，数据类型，text/html text/uri-list
参数二：data，数据，一般指的是字符串值。
注意：通过dataTransfer.setData()存储的数据只能在drop事件中获取

五、地理定位接口

navigator.geolocation.getCurrentPosition(success,error,option);

参数1.获取地理信息成功之后的回调

如果获取地理信息成功，会将获取到的地理信息传递给成功之后的回调
1. position.coords.longitude 经度
2. position.coords.latitude 纬度
3. position.coords.accuracy 精度
4. position.coords.altitude 海拔高度

参数2.获取地理信息失败之后的回调

 /*获取定位失败之后的回调*/
    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;
        }
    }

参数3.调整获取当前地进信息的方式，option:可以设置获取数据的方式

enableHighAccuracy:true/false:是否使用高精度
timeout:设置超时时间，单位ms
maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms

也可以使用第三方包，百度地图提供的地图开放平台。百度地图开放平台

六、web存储 sessionStorage

sessionStorage的使用：存储数据到本地中，存储的容量在5mb(兆)左右。

这个数据的本质是存储在当前页面的内存中；
不同浏览器之间不能共享数据，同一个浏览器的不同窗口也不能共享数据；
它的生命周期为关闭当前页面，或者是当前页面没有关闭，但是浏览器关闭也会清除

sessionStorage.setItem(key,value) : 存储数据，以键值对的方式存储。

sessionStorage.getItem(key): 获取数据，通过制定名称的key来获取对应的value值。

sessionStorage.removeItem(key):删除数据，通过制定key来删除对应的值。如果key的值没有，也不会报错。

sessionStorage.clear(): 清空所有存储的数据。

七、web存储 localStorage

localStorage的使用：

存储的内容大概20mb；
不同的浏览器是不能够共享数据的。但是在同一个浏览器的不同窗口，可以共享数据；
永久生效，他的数据是存储在硬盘上的，并不会随着页面或者浏览器的关闭而清除，如果想清除，必须手动remove(key)

localStorage.setItem(key,value) : 存储数据，以键值对的方式存储。

localStorage.getItem(key): 获取数据，通过制定名称的key来获取对应的value值。

localStorage.removeItem(key):删除数据，通过制定key来删除对应的值。如果key的值没有，也不会报错。

localStorage.clear(): 清空所有存储的数据。

八、应用缓存

概念：使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
优势：
a) 可配置需要缓存的资源
b) 网络无连接应用仍可用
c) 本地读取缓存资源，提升访问速度，增强用户体验
d) 减少请求，缓解服务器负担
Cache Manifest 基础：
a) 如需启用应用程序缓存，请在文档的标签中包含 manifest 属性：
```
	<html manifest="demo.appcache">

		...

	</html>
```
b) 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
c) manifest 文件的建议的文件扩展名是：".appcache"。
d) 注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置，在inetmgr中有MIME TYPE ，设置即可。
demo.appcache：
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句,即使第一句是注释也不行，必须保证在第一行。
#后面写注释
```
#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件

#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/l3.jpg

#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有文件，比如如果任何文件找不到的时候，用banner_1.jpg来代替： / ../images/banner_1.jpg 
```
九、自定义视频、音频
1. 常用方法：load() 加载、 play() 播放、 pause() 暂停
  jquery没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素
2. 常用属性：
  a) currentTime 视频播放的当前进度、
  b) duration:视频的总时间 100000/60
  c) paused:视频播放的状态.
3. 常用事件：
  a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
  b) ontimeupdate:通过该事件来报告当前的播放进度.
  c) onended:播放完时触发—重置

雪爪鸿泥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习第二天

一、网络监听接口ononline：网络连接的时候触发的事件；onoffline：网络断开的时候触发的事件。二、全屏操作的主要方法和属性//全屏操作的主要方法：1.requestFullScreen():开启全屏,不同浏览器需要添加不同的前缀 chrome:webkit firefox:moz ie:ms opera:o2.cancelFullScreen():退出全屏显示...
复制链接

扫一扫