HTML5

发表于

在线和离线事件

online
浏览器从离线状态切换到在线状态时触发

offline
浏览器从在线状态切换到离线状态时触发

1
2
3
4
window.addEventListener('online',function(){}
window.addEventListener('offline',function(){}
window.ononline = function(){};
window.onoffine = function(){};

js事件

Video API

属性

1
2
3
4
5
6
7
8
//只读，返回当前音频/视频的长度（以秒计）
duration
//只读
paused：设置或返回音频/视频是否暂停 
//可读可写
currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
//可读可写
ended：返回音频/视频的播放是否已结束

事件

//不能跟window.onload 一起用
//一般用来计算视频的总长度
oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。

//当用户点击播放按钮视频开始播放时会触发
ontimeupdate： 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。（触发时隔为300毫秒，0.3秒执行一次）
onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。[end] and de

方法

1
2
play()：开始播放音频/视频 
pause()：暂停当前播放的音频/视频 [pɔːz]

视频全屏时去除掉默认的控制条

1
2
3
4
video::-webkit-media-controls-enclosure {
   /*禁用播放器控制栏的样式*/
  display: none !important;
}

视频全屏时显示自定义的控制条

1
2
//给自定义的控制条设置
z-index必须大于（等于）2147483647
1
2
3
4
fullscreen.onclick = function () {
// 3.调用全屏方法 让视频全屏播放 webkitRequestFullScreen() 方法 让元素全屏显示
video.webkitRequestFullscreen();
}

WebStorage API

什么是WebStorage

所谓的WebStorage指的是客户端存储,在这里指的是浏览器端存储,比如在网站上自动登陆这些功能,其实就是把一些少量的数据存储在浏览器等客户端中,这样可以减少没必要的请求到服务器,降低服务器的压力,给用户提供更好的体验.

WebStorage的三种存储方式

cookie: 广泛使用 存储量4kb左右 会在浏览器和服务器间传递 一般由服务器端创建 可以设置存储时间(默认和session一样)

sessionStorage: H5新增 存储量5M左右 只会在浏览器存储数据 只会由浏览器端创建 存储时间是打开浏览器开始关闭浏览器消失 ，临时存储

localStorage: H5新增 存储量5M左右 只会在浏览器存储数据 只会由浏览器端创建 永久存储除非手动删除

key-value的排序是以key的首字母来进行排序

sessionStorage

储存在浏览器的内容中

1
2
3
4
5
6
7
8
9
10
//添加数据
window.sessionStorage.setItem(key,value);
//获取数据
window.sessionStorage.getItem(key);
//移除数据
window.sessionStorage.removeItem(key);
//清除数据，所有的
window.sessionStorage.clear();
//获取key，根据索引，从 0 开始
window.sessionStorage.key(n);

应用场景: 存储一些少量临时的数据

localStorage

1
2
3
4
5
6
7
8
9
10
//添加数据
window.localStorage.setItem(key,value);
//获取数据: 
window.localStorage.getItem(key);
//移除数据: 
window.localStorage.removeItem(key);
//清除数据: 
window.localStorage.clear();
//获取key:  
window.localStorage.key(n);
应用场景: 网页换肤，京东购物车

drag&drop API

将一个普通元素变成一个拖拽元素，加一个属性：draggable='true'
一定要加在行内，h5的属性，不能为CSS

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 拖拽对象 */
//按下鼠标 开始用鼠标拿起拖拽对象的时候触发
dragstart 
//按住鼠标 开始用鼠标拿起拖拽对象移动的过程中不停触发
drag      
//松开鼠标 放开拖拽对象时触发
dragend  
    
/* 目标对象 */
//按住鼠标, 鼠标进入目标元素边缘后触发
dragenter 
//按住鼠标, 鼠标在目标元素上移动的时候
dragover  
//浏览器会默认打开，阻止默认事件，e.preventDefault()
//按住鼠标, 鼠标离开目标元素边缘后触发
dragleave 
//松开鼠标之后 dragend之前 把拖拽元素放下
//浏览器会默认打开，阻止默认事件，e.preventDefault()
drop

属性

1
2
3
4
5
6
7
//这个属性是一个对象 它拥有一些属性
DataTransfer 
e.dataTransfer
dataTransfer.setDate(key,value);//设置数据
dataTransfer.getDate(key);//设置数据
//包含一个在数据传输上所有可用的本地文件列表
files

FileReader API (!important)

1
2
3
4
5
input type='file' 存储在浏览器内存中
    var file = input.files[0]; 获取到读取的文件
    base64 编码图片，好处不需要img文件夹，图片以base64编码方式放到html中（一般如果是特别小的图片，一般都用base64编码，用于前端优化）
    优点：虽然文件会变大，但是加载快解析快
    缺点：会让html文件变得乱七八糟

FileReader 对象是HTML5新增的一个内置对象,通过这个对象可以读取文件的内容

对象

1
var fileReader = new FileReader();

方法

1
2
readAsDataURL  data: URL格式的字符串以表示所读取文件的内容（就是base64的编码）
readAsText    通过文本表示读取文件的内容

事件

onload 等待把文件读取完

属性

result 文件读取的结构就存在result属性中

Geolocation API

Geolocation 可以使得Web应用程序给用户提供的地理位置信息.

获取一次地理位置的方法(回调)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
navigator.geolocation.getCurrentPosition(成功时的回调,失败时的回调,参数设置);

    成功时回调:
    function(position) {
      // position.coords  {
      //  latitude            纬度
      //  longitude          经度
      //  altitude            高度(海拔)
      //  accuracy            精确度
      //  altitude Accuracy  海拔精确度
      //  heading            行进方向
      //  speed              地面速度
      // } 
    }
    
    失败时回调:
    function(error) {
      // erroe.code :
      // 0:不包括其他错误编号中的错误，（浏览器不支持定位，IE6，7，8没有这些新特性）
      // 1:用户拒绝浏览器获取位置信息
      // 2:尝试获取用户信息，但失败了
      // 3:设置了timeout值，获取位置超时了
    
    }
1
2
3
4
5
参数设置: 
      {
        enableHighAcuracy 更精确的查找 默认false
        timeout: 获取位置允许最长时间 默认:infinity
      }

实时获取地理位置的方法(回调)

1
2
3
4
//地理位置信息:
    watchID = navigator.geolocation.watchPosition(成功时的回调,失败时的回调,参数设置);
//清除获取
    navigator.geolocation.clearWatch(watchID);

end

本文结束，感谢您的阅读