从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公众号：Web前端之巅
- 博客园：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、拖拽接口
元素拖拽事件：
ondrag ：应用于拖拽元素，整个拖拽过程都会持续调用；
ondragstart ：应用于拖拽元素，当拖拽开始时调用；
ondragleave：应用于拖拽元素，拖拽过程中，当鼠标离开拖拽元素范围时调用；
ondragend ：应用于拖拽元素，当拖拽结束时调用。
目标拖拽事件：
ondragenter：应用于目标元素，当拖拽元素进入时调用；
ondragover：应用于目标元素，当停留在目标元素上时调用；
ondrop：应用于目标元素，当在目标元素上松开鼠标时调用；
ondragleave：应用于目标元素，当鼠标离开目标元素时调用。
示例：将一个div中的p标签拖拽到另一个p标签中
<body>
<div class="div1" id="div1">
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->
<p id="pe" draggable="true">试着把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<script>
/*学习拖拽，主要就是学习拖拽事件*/
var p=document.querySelector("#pe");
var div2=document.querySelector("#div2");
// 应用于被拖拽元素
p.ondragstart=function(){
console.log("ondragstart");
}
p.ondragend=function(){
console.log("ondragend");
}
p.ondragleave=function(){
console.log("被拖拽元素：ondragleave");
}
p.ondrag=function(){
console.log("ondrag");
}
// 应用于目标元素的事件
div2.ondragenter=function(){
console.log("ondragenter");
}
div2.ondragover=function(e){
console.log("ondragover");
/*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
e.preventDefault();
}
/*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
div2.ondrop=function(){
console.log("ondrop");
/*添加被拖拽的元素到当前目标元素*/
div2.appendChild(p);
}
div2.ondragleave=function(){
console.log("目标元素：ondragleave");
}
</script>
</body>
1、被拖拽的元素必须添加
draggable="true"属性。2、浏览器默认会阻止目标元素的 ondrop 事件：我们必须在目标元素的 ondragover 中阻止浏览器的默认行为（使用事件参数对象的
preventDefault()方法），才能将拖拽的元素放到目标元素中。
遗留问题：如果有多个 div，那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数，也就是只能拖拽指定的元素到指定的元素中，这样代码的可用性就很低了。
分析问题：既然有多个被拖拽元素和多个目标元素存在，这些元素都存在于 document 中的，那么可不可以给 document 添加这些事件呢？
答案是可以的。
<body>
<div class="div1" id="div1">
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
var obj=null;//当前被拖拽的地元素
//应用于被拖拽元素的事件
document.ondragstart=function(e){
obj= e.target;
}
//应用于目标元素的事件
document.ondragover=function(e){
/*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
e.preventDefault();
}
/*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
document.ondrop=function(e){
/*添加元素*/
e.target.appendChild(obj);
}
</script>
</body>
在事件参数对象中有一个 target 属性，其值为被拖拽的元素对象。
问题解决了，但是，又是但是......，但是一般少使用全局变量，全局变量谁都可以修改，容易误操作。
在事件参数对象中有一个 dataTransfer 属性，通过 dataTransfer 来实现数据的存储与获取。
dataTransfer 有两个方法：
setData(format,data); 用于存储数据；
getData(format,data); 用于取出数据；（取出数据必须在目标元素的 ondrop 事件中，其他事件中无法取到数据）
format:数据的类型：text/html ， text/uri-list
Data:数据:一般来说是字符串值
<body>
<div class="div1" id="div1">
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
//应用于被拖拽元素的事件
document.ondragstart=function(e){
// 把拖拽元素的id值存储起来
e.dataTransfer.setData("text/html", e.target.id);
};
//应用于目标元素的事件
document.ondragover=function(e){
/*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
e.preventDefault();
};
/*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
document.ondrop=function(e){
/*添加元素*/
/*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
var id=e.dataTransfer.getData("text/html");
// 通过id方式添加元素
e.target.appendChild(document.getElementById(id));
};
</script>
</body>
二、Web存储
用户在浏览网页的时候，可能需要存储一些数据在本地，之前是采用 Cookie 的方式存储，但是 Cookie 只能存储大小为 4k 以内的数据，再多的数据就存储不了。并且 Cookie 的解析也是很复杂的。
到了h5阶段，又提供了两种方式来存储 web 数据：sessionStorage 和 localStorage。
1、sessionStorage
sessionStorage的使用：将存储数据到本地。存储的容量 5MB 左右。
注意：sessionStorage 的存储特点：
- 这个数据本质是存储在当前页面的内存中，意味着其它页面和浏览器无法获取数据。
- 它的生命周期为关闭当前页面时，数据会自动清除。
提供的方法：
- setItem(key,value) ：存储数据，以键值对的方式存储，
- getItem(key) ：获取数据，通过指定名称的key获取对应的value值，
- removeItem(key) ：删除数据，通过指定名称key删除对应的值，
- clear() ：清空所有存储的内容。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>
sessionStorage的使用
</pre><br>
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script>
/*存储数据*/
document.querySelector("#setData").onclick=function(){
/*获取用户名*/
var name=document.querySelector("#userName").value;
/*存储数据*/
window.sessionStorage.setItem("userName",name);
};
/*获取数据*/
document.querySelector("#getData").onclick=function(){
/*如果找不到对应名称的key,那么就会获取null*/
var name=window.sessionStorage.getItem("userName");
alert(name);
};
/*删除数据*/
document.querySelector("#removeData").onclick=function(){
/*在删除的时候如果key值错误，不会报错，但是也不会删除数据*/
window.sessionStorage.removeItem("userName");
};
</script>
</body>
</html>
1、获取数据的时候，如果找不到对应名称的 key，那么获取的值为 null。
2、删除数据的时候，如果 key 值错误，不会报错，但是也不会删除数据。
2、localStorage
localStorage的使用：
- 存储的内容大概 20MB 大小
- 不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据；
- 永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除。如果想清除，必须手动清除
setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>localStorage的使用：</pre>
<br>
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script>
document.querySelector("#setData").onclick=function(){
var name=document.querySelector("#userName").value;
/*使用localStorage存储数据*/
window.localStorage.setItem("userName",name);
};
/*获取数据*/
document.querySelector("#getData").onclick=function(){
var name=window.localStorage.getItem("userName");
alert(name);
};
/*清除数据*/
document.querySelector("#removeData").onclick=function(){
window.localStorage.removeItem("userName");
};
</script>
</body>
</html>
三、自定义播放器
我们知道不同的浏览器的音频视频的播放器控件显示样式有差异，那么我们怎么做一个在任何浏览器下都有相同样式的播放器呢？
常用方法：
load()加载，play()播放，pause()暂停。
注意：jQuery中没有提供对视频播放控件的方式，所以如果使用jQuery操作元素，必须将其转为原生 js 的方式来调用这些方法。
常用属性：
currentTime：视频播放的当前进度duration：视频的总时长paused：视频播放的状态
常用事件：
oncanplay：事件在用户可以开始播放视频/音频时出触发ontimeupdate：通过该事件报告当前的播放进度onended：播放完时触发
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="./css.css">
</head>
<body>
<h3 class="playerTitle">自定义视频播放器</h3>
<div class="player">
<video src="../mp4/2.mp4"></video>
<div class="controls">
<a href="javascript:void(0);" class="switch fa fa-play"></a>
<a href="javascript:void(0);" class="expand fa fa-arrows-alt"></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="./jquery.min.js"></script>
<script>
$(function () {
// 获取播放器文件
var video = $("video")[0];
// 点击播放按钮播放视频文件
$(".switch").click(function () {
if (video.paused) {
video.play();
} else {
video.pause();
}
$(this).toggleClass("fa-play fa-pause");
});
// 全屏操作
$(".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 getTime(total) {
var hour = Math.floor(total / 3600);
hour = hour > 10 ? hour : "0" + hour;
var min = Math.floor((total % 3600) / 60);
min = min > 10 ? min : "0" + min;
var sec = Math.floor((total % 3600) % 60);
sec = sec > 10 ? sec : "0" + sec;
return hour + ":" + min + ":" + sec;
}
// 当视频加载完成后显示视频
video.oncanplay = function () {
this.style.display = "block";
// 根据视频总时长，获取时分秒
var total = getTime(this.duration);
// 显示总时长
$(".totalTime").html(total);
};
// 视频播放过程中，获取时分秒实时显示
// 如果修改currentTime值也会触发这个事件，也就是只要currentTime值变化，就会触发这个事件
video.ontimeupdate = function () {
var current = getTime(this.currentTime);
$(".currentTime").html(current);
// 设置进度条
var percent = this.currentTime / this.duration * 100 + "%";
$(".elapse").css("width", percent);
};
// 点击进度条跳播
$(".bar").click(function (e) {
video.currentTime = e.offsetX / $(this).width() * video.duration;
});
// 播放完成后回到最初位置
video.onended = function () {
// 位置清零
video.currentTime = 0;
// 播放暂停状态为播放
$(".switch").removeClass("fa fa-pause").addClass("fa fa-play");
};
});
</script>
</body>
</html>
1、视频控制器中的播放暂停按钮和全屏按钮都是来自在线字体图标 font-awesome。
2、进度条一栏实际上有4层，处理可以看到的总时长，缓存时长，播放时长外还有一个最顶层的透明层，用于点击进度条实现跳变功能。
从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器的更多相关文章
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
- html5 - drag 拖拽
参考资料: 张鑫旭 : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- Nodejs express、html5实现拖拽上传
一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...
- [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- HTML5文件拖拽
HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...
- HTML5 实现拖拽
如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...
随机推荐
- Js学习（6） 标准库-Array对象
Array是Js的原生对象,同时也是一个构造函数,可以用它生成新的数组 用不用new结果都一样 var arr = new Array(2); // 等同于 var arr = Array(2); 但 ...
- 洛谷4556 [Vani有约会]雨天的尾巴
原题链接 每个点开一个权值线段树,然后用树上差分的方法修改,最后自底向上暴力线段树合并即可. 不过空间较大,会\(MLE\),写个内存池就可以了. #include<cstdio> #in ...
- 锻造(forging)
--九校联考24OI__D1T1 题目背景 勇者虽然武力值很高,但在经历了多次战斗后,发现怪物越来越难打,于是开始思考是不是自己平时锻炼没到位,于是苦练一个月后发现--自己连一个史莱姆都打不过了. 勇 ...
- @RemoteProxy（）注释 与@File注释的使用
@RemoteProxy()注释 dwr3.0可以通过全注解的方式,极大的简化了配置,所有xml配置加在一起不超过20行,而且使用更加简单,bean注入的问题也都解决.配置步骤如下: web.xml的 ...
- MD5加密算法的Java版本
网上搜索Java实现MD5的资料很多,错误的也很多. 之前编写的一个阿里云直播鉴权原理算法需要用到MD5算法,网上找了几个,都是不行,浪费了时间,现在贴一个,做备用. import java.secu ...
- 【MarkMark学习笔记学习笔记】javascript/js 学习笔记
1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...
- Codeforces Round #486 (Div. 3) A. Diverse Team
Codeforces Round #486 (Div. 3) A. Diverse Team 题目连接: http://codeforces.com/contest/988/problem/A Des ...
- Oracle 异常 中文乱码
环境变量 NLS_LANG SIMPLIFIED CHINESE_CHINA.ZHS16GBK
- js实现粒子特效，particles.js的使用
今天偶然看到了一个比较炫酷的js网页.是粒子特效的,就试着用了用.一下是步骤,方便以后查看使用. 1.在网站下载源码https://github.com/VincentGarreau/particle ...
- 使用pwm进行呼吸灯的设计
本文源码已经上传至csdn: 程序源码如下; #define LEDC_IO_0 (2) esp_err_t app_main() { ledc_timer_config_t ledc_timer = ...