h5new

文章目录

video & audio
Web 存储
1. sessionStorage/localStorage
补充新增全局属性
1. 注意：开启全屏的时候是用元素对象,如box.requestFullscreen()，关闭全屏的时候是用document 对象，不能用元素对象关闭
2. 题外

video & audio

属性
- currentTime 视频播放的当前进度
- duration 视频的总时间
- paused 视频播放是否是暂停
方法
- load() 重新加载音频/视频元素
  - 语法: audio|video.load()
  - 用于在更改来源或其他设置后对音频/视频元素进行更新
- play() 播放
- pause() 暂停
- 更多精彩请自行查阅 W3
事件
- oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
- ontimeupdate: 通过该事件来报告当前的播放进度.
- onended: 播放完时触发
全屏：video.webkitRequestFullScreen()

var ad = document.querySelector("audio"),
    vd = document.querySelector("video"),
    line = document.querySelector(".line"),
    process = document.querySelector(".process")
// line、process 是自定义的 div,用来模拟进度条,line 是背景色，process是进度条颜色
console.log(ad.currentTime) // 当前放了几秒，不可写
console.log(ad.duration) // 音频总时长
console.log(ad.paused)  // 是否暂停，是个布尔值
// 视频同音频属性一样
ad.volume = .5 // 控制音量，在 0-1 直接取值，可读写

// 进度条拖动事件
line.onmousedown = function (e) {

    jindutiao(e)
    line.onmousemove = function (e) {
		jindutiao(e)
    }
}
// 播放事件
vd.ontimeupdate = function () {
    // 自定义进度条长度 = 当前视频进度条 / 总视频进度条长度
    process.style.width = vd.currentTime / vd.duration
}
function jindutiao(e) {
    // 鼠标与盒子的左边距 = 鼠标与页面的左边距 - 盒子鱼页面的左边距
        var left = e.pageX - line.offsetLeft
        process.style.width = 1 + 'px'
    // 视频当前播放进度 = 当前鼠标与盒子的左边距 / 进度条长度
    	vd.currentTime = left / line.offsetWidth
}

Web 存储

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

sessionStorage/localStorage

storage 存储: window.sessionStorage window.localStorage (向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面)
特性
- 设置、读取方便
- 容量较大，sessionStorage 约5M、localStorage 约20M 不同的浏览器大小可能有差异
- 均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现），可以将对象 JSON.stringify() 编码后存储
window.sessionStorage
- 生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过 sessionStorage 存储的数据也就被清空了。注意：刷新不算关闭窗口/页面，数据不会被清空
- 在同一个窗口下数据可以共享
window.localStorage
- 永久生效，除非手动删除
- 可以多窗口共享
- IE8 以上的 IE 版本才支持 localStorage 这个属性
- localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
两者本质区别：不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享 sessionStorage 的信息。
方法详解
- setItem(key, value) 设置存储内容同名替换原则
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- clear() 清空所有存储内容
- key(n) 以索引值来获取对应的键

<!--可以在页面 F12 的 Application 中的 Storage 看到存储的 localStorage 和 sessionStorage，也可以直接在 F12 这里输入存储的内容。-->
<input type="text" placeholder="输入用户名">
<button>sessionStorage存储</button>
<button>localStorage存储</button>
<button>sessionStorage获取</button>
<button>localStorage获取</button>
<button>sessionStorage删除name</button>
<button>localStorage删除name</button>
<button>删除所有</button>
<script>
    // 默认引入 jq
    var ipt = $("input")
    $("button:eq(0)").click(function () {
        sessionStorage.setItem("name", $ipt.val())
    })
    $("button:eq(1)").click(function () {
        localStorage.setItem("name", $ipt.val())
    })
    $("button:eq(2)").click(function () {
        console.log(sessionStorage.getItem("name"))
    })
    $("button:eq(3)").click(function () {
        console.log(localStorage.getItem("name"))
    })
    $("button:eq(4)").click(function () {
        sessionStorage.removeItem("name")
    })
    $("button:eq(5)").click(function () {
        localStorage.removeItem("name")
    })
    $("button:eq(6)").click(function () {
        sessionStorage.clear()
        localStorage.clear()
    })
</script>

补充新增全局属性

contentEditable属性单独某一个标签的属性可以使内容能被编辑

<!--点击 div 后，变成像 input 框一样，可以被编辑，向里面输入内容-->
<div contentEditable>可编辑，内容被编辑在这</div>
<script>
    // 以下事件使得 按下回车不再换行，而是完成编辑
    $("div").keydown(function () {
        // 打印按下的键的 ASCII 码
        console.log(event.keyCode)
        // 退格 9 空格 32 shift 16 回车 13
        if (event.keyCode == 13) {
            // 阻止浏览器默认事件
            event.preventDefault()
            // 让元素失去焦点
            $("div").blur()
        }
    })
    // 模拟 input 标签的 onchange事件。。里面的值改变了按下回车或者失去焦点会触发，保存文本
    // 开启全局所有元素可编辑
    document.designMode = 'on'
</script>

designMode属性（这个在js中进行使用，让页面中所有的元素开启可编辑模式）让页面所有的标签都可以被编辑比如div、p、h1等等
1
2
3
window.onload = function() {
document.designMode = "on";
}

draggable 拖拽属性
拖拽元素: 页面中设置了draggable=”true”属性的元素，不能省略 = “true”

目标元素: 页面中任何一个元素都可以成为目标元素

拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用

目标元素

ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用，需要在ondragover上阻止浏览器的默认事件，因为浏览器默认是禁止元素堆叠的
ondragleave 应用于目标元素，当拖拽元素离开目标元素时调用

<!--必须写成 draggable="true"，而不能只写 draggable, 和上面那个可编辑属性不一样，不知道为啥-->
  <div class="box" draggable="true"></div>
  <div class="content"></div>
  <script>
  	var box = $(".box")[0],
      	content = $(".content")[0]
      box.ondrag = function () {
          
      }
  </script>

fullscreen 全屏属性

注意：开启全屏的时候是用元素对象,如`box.requestFullscreen()`，关闭全屏的时候是用document 对象，不能用元素对象关闭

开启全屏

  if (E.requestFullscreen) {
  	E.requestFullscreen();
  }else if (E.webkitRequestFullscreen) {
  	E.webkitRequestFullscreen();
  }else if (E.mozRequestFullscreen) {
  	E.mozRequestFullscreen();
  }else{
  	alert("sorry,无法全屏");
}

退出全屏必须使用 document 的api

  if (document.exitFullscreen) {
  	document.exitFullscreen();
  }else if (document.webkitCancelFullScreen) {
  	document.webkitCancelFullScreen();
  }else if (document.mozCancelFullScreen) {
  	document.mozCancelFullScreen();
}

判断是否是全屏

1
2
3

function ifFullscreen(){
	return document.fullscreen || document.webkitIsFullScreen || document.mozFullScreen || false;
}

注意：给全屏状态下的元素添加全屏样式不起作用，但给全屏状态下的元素的子类添加样式可用

/* :fullscreen 实验中的功能,使用请加浏览器前缀 慎用 */
.全屏状态下的元素:fullscreen 子类{
    width: 500px;
    height: 100%;	
}

题外

顺便一提，你可以会见到 .htm 后缀的文件，那是以前有一个系统叫 DOS，它只允许最多三个字符的后缀名，而后来 linux 和 windows 都支持更长的后缀名，所以变成了 .html。同样的，.jpg 和 .jpeg 的关系也是如此，不过 .jpeg 没有流行起来（相对于 .html），大家仍习惯于 .jpg。

video & audio

Web 存储

sessionStorage/localStorage

补充新增全局属性

注意： 开启全屏的时候是用元素对象,如box.requestFullscreen()，关闭全屏的时候是用document 对象，不能用元素对象关闭

题外

注意：开启全屏的时候是用元素对象,如`box.requestFullscreen()`，关闭全屏的时候是用document 对象，不能用元素对象关闭