一、NavigatorOnLine

属性：onLine

通过 window.navigator.onLine 来检测，用户当前的网络状况，返回一个 Boolean 值，但是不同浏览器会存在差异。

事件：online 和 offline

online 用户网络连接时事件触发

window.addEventListener('online', function() {
  console.log('网络已经连接')
})

offline 用户网络断开时事件触发

window.addEventListener('offline', function() {
  console.log('网络断开了')
})

二、全屏模式

document.querySelector('#demo').requestFullscreen() // 指定元素开启全屏模式

document.exitFullscreen() // 退出全屏模式
document.webkitCancelFullScreen() // 退出全屏模式

document.fullScreen // 检测当前是否全屏模式
document.webkitIsFullScreen // 检测当前是否全屏模式

三、文件读取

// 拿到上传 DOM 节点
var file = document.querySelector('input')
// 监听上传事件
file.onchange = function () {
    // 实例化 filereader 对象
    var reader = new FileReader()
    // 读取文件内容
    reader.readAsText(file.files[0])
    // base64
    reader.readAsDataURL(file.files[0])
    // 输出结果
    reader.onload = function (e) {
        console.log(reader.result)
    }
}

事件

onload // 当文件读取完成时触发

属性

result // 文件读取结果

四、地理位置

// HTML5 定位是优先采用 GPS，失败就用网络信号，比如 IP 地址，WiFi，蓝牙等等
// 谷歌浏览器如果用 h5 定位会自动调谷歌地图的 api
function success (position) {
  // 经度
  var longitude = position.coords.longitude
  // 纬度
  var latitude = position.coords.latitude
  console.log('经度：' + longitude + ' 纬度：' + latitude)
  document.write('经度：' + longitude + ' 纬度：' + latitude)
}
function error (e) {
  switch (e.code) {
    case e.PERMISSION_DENIED:
    console.log('您拒绝对获取地理位置的请求')
    document.write('您拒绝对获取地理位置的请求')
    break
    case e.POSITION_UNAVAILABLE:
    console.log('位置信息是不可用的')
    document.write('位置信息是不可用的')
    break
    case e.TIMEOUT:
    console.log('请求您的地理位置超时')
    document.write('请求您的地理位置超时')
    break
    case e.UNKNOWN_ERROR:
    console.log('未知错误')
    document.write('未知错误')
    break
    default:
    console.log('无法获取您的位置')
    document.write('无法获取您的位置')
  }}
var geo_options = {
  // 超时时间
  // timeout: 1000
}
window.navigator.geolocation.getCurrentPosition(success, error, geo_options)
// window.navigator.geolocation.watchPosition(success, error, geo_options)

五、拖放

拖放指的是鼠标点击源对象后一直移动对象不松手，一旦松手即释放了

让一个元素被拖拽需要添加 draggable 属性，dragable = true

事件（事件源：被拖动的元素）

// ondragstart 源对象开始被拖动
// ondrag 源对象被拖动过程中（鼠标按下之后，松开之前）
// ondragend 源对象拖动结束

var p = document.querySelector('#p1')
p.ondragstart = function () {
  console.log('源对象开始被拖动')
}
p.ondrag = function () {
  console.log('源对象拖动过程中')
}
p.ondragend = function () {
  console.log('源对象拖动结束')
}

事件（事件源：目标对象）

// ondragenter 目标对象被源对象拖动着进入
// ondragover 目标对象被源对象拖动着悬停在上方
// ondragleave 源对象拖动着离开了目标对象
// ondrop 源对象拖动着在目标对象上方释放/松手

var target = document.querySelector('#div1')
target.ondragenter = function () {
  console.log('源对象进入目标对象')
}
target.ondragover = function () {
  console.log('源对象进入目标对象悬停在上方')
}
target.ondragleave = function () {
  console.log('源对象离开目标对象')
}
target.ondrop = function () {
  console.log('源对象在目标对象上方释放')
}

<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    float: left;
    margin: 10px;
  }
  div:nth-child(2) {
    border: 1px solid green;
  }
  div:nth-child(3) {
    border: 1px solid blue;
  }
  p {
    height: 25px;
    background-color: pink;
    line-height: 25px;
    text-align: center;
  }
</style>

<div id="div1">
  <p id="p1" draggable="true">内容1</p>
  <p id="p2" draggable="true">内容2</p>
  <p id="p3" draggable="true">内容3</p>
  <p id="p4" draggable="true">内容4</p>
</div>
<div id="div2"></div>
<div id="div3"></div>

<script>
document.ondragstart = function (e) {
  e.dataTransfer.setData('text/html', event.target.id)
}
document.ondragover = function (e) {
  e.preventDefault()
}
document.ondrop = function (e) {
  var id = e.dataTransfer.getData('text/html')
  e.target.appendChild(document.getElementById(id))
}
</script>

六、本地存储

window.sessionStorage
window.localStorage
setItem(key, value) 设置键值为 key 的存储内容
getItem(key) 读取键值为 key 的存储内容
removeItem(key) 删除键值为 key 的存储内容
clear() 清空所有存储内容

七、应用缓存

启用应用缓存，需要在文档的 <html> 标签中包含 manifest 属性，mainfest = 'demo.cache'

demo.cache 文件

CACHE MANIFEST

# 以 "#" 开头的是注释行
# 首次下载后进行缓存
CACHE:
demo1.png

# 不缓存资源
NETWORK:
demo2.png

# 当页面无法访问时的回退页面（比如 404 页面）
# 第一个 URI 是资源，第二个是替补
FALLBACK:
*.html /404.html

八、多媒体（Video）

// 使用原生 js 调用这些方法、属性和事件
var video = $('video').get(0) // jquery 对象转 dom 对象
// 当浏览器可以播放视频时执行
video.oncanplay = function () {
  console.log('视频可以播放了')
  // 返回当前视频的长度（以秒计）
  console.log(video.duration)
  // 播放视频
  video.play()
  // 暂停视频
  video.pause()
}
// 当前播放时间（video.currentTime）发生变化时候触发
video.ontimeupdate = function () {
  console.log('正在播放')
  // 当前播放时间
  console.log('设置或返回视频中的当前播放位置（以秒计）：' + video.currentTime)
}
// 当视频播放完毕时事件触发
video.onended = function () {
  console.log('视频播放完毕了')}

HTML5 新增 API（笔记）