【麦子学院】03.web前端开发之html5本地存储、网页留言板、video、audio、HTML5拖放
2017-06-30 13:38
871 查看
1.Web Storage本地储存
在HTML5中，除了CANVAS元素，另外一个新增的非常重要功能就是可以在本地客户端储存数据的Web Storage功能。
在HTML4 我们是使用的cookies在客户端保存用户名等等一些简单的用户信息。
cookies的缺点：
1）、大小限制在4KB；
2）、带宽浪费；
3）、难以操作；
为了解决这样的一些问题，在HTML5中重新提供了在客户端保存数据的功能，他就是我们的“Web Storage”。
1) sessionStorage临时保存
就是把数据保存在session对象之中。
session就是在打开网站到关闭网站之间要求进行保存的数据。
sessionStorage
临时保存的用法：
sessionStorage.setitme('key','value');
//或者是sessionStorage.key = 'value';
临时数据读取的方法：
变量=sessionStorage.getItem（'key'）
//或者是sessionStorage.key;
2、localStorage永久保存
就是将数据保存在客户端本地的硬件设备至上面，如果浏览器被关闭，这个数据不会丢失，下次打开可以继续使用。这个功能就是我们的localStorage永久保存功能。
localStorage
永久保存数据的方法：
localStorage.setItem（'key','value'）;
//或者
localstorage.key;
读取的方法：
变量=localStorage.getItem（'key'）;
//或者
变量=localStorage.key;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Web Storage本地储存</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<h1>Web Storage本地储存</h1>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input');">
<input type="button" value="读取数据" onclick="loadStorage('msg');">
</body>
</html>
Function saveStorage(id){
Var target =document.getElementById(id);
Var str= target.value;
localStorage.setItem(“mess”,str);
}
Function loadStorage(id){
Var target =document.getElementById(id);
Var msg= localStorage.getltem(“mess”);
Target.innetHTML=msg;
}
2.简单的网页留言板
制作留言板需要使用到的函数有3个
1、saveStorage函数
使用“new Date().getTime()”语句来获取当前的日期和时间戳，然后使用localStorage.setItem将获取到的时间戳作为键值，并将文本框中的数据作为键名进行保存。保存后使用loadStorage函数在页面上显示保存后的数据。
2、loadStorage函数
这个函数取得保存后的所有数据，然后以表格的形式进行显示。
两个重要的属性：
1）、loadStorage.length
所有保存在localStorage中的数据条数。
2）、localStorage.key（index）
想要得到的数据的索引号作为index参数传入，可以得到得到localStorage中与这个索引号对应的数据。
3）、clearStorage函数
将保存在localStorage中的数据全部清除。
用法：localStorage.clear();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单的网页留言板</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<h1>简单的网页留言板</h1>
<textarea id="dome" cols="60" rows="10"></textarea>
<br/>
<input type="button" value="保存" onclick="saveStorage('dome');">
<input type="button" value="清空" onclick="clearStorage('msg');">
<input type="button" value="读取" onclick="loadStorage('msg');">
<hr>
<p id="msg"></p>
</body>
</html>
///**
// * Created by Administrator on 2014/11/27.
// */
//function saveStorage(id){
// var data = document.getElementById(id).value;
// var time = new Date().getTime();
// localStorage.setItem(time,data);
// alert("数据已经被保存！");
// loadStorage('msg');
//}
//function loadStorage(id){
// var reselt = '<table border="1">';
// for(var i=0;i<localStorage.length;i++)
// {
// var key = localStorage.key(i);
// var value = localStorage.getItem(key);
// var date = new Date();
// date.setTime(key);
// var datestr = date.toGMTString();
// reselt += '<tr><td>'+'这是第'+i+'条数据</td><td>'+value+'</td><td>'+datestr+'</td></tr>';
// }
// reselt += '</table>';
// var target = document.getElementById(id);
// target.innerHTML = reselt;
//}
//function clearStorage(id){
// localStorage.clear();
// alert("数据已经被成功删除！");
// loadStorage('msg');
//}
/**
* Created by Administrator on 2014/11/27.
*/
function saveStorage(id){
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time,data);
alert("数据已经被保存！");
loadStorage('msg');
}
function loadStorage(id){
var reselt = '<table border="1">';
for(var i=0;i<localStorage.length;i++)
{
var value = localStorage.getItem( localStorage.key(i));
var date = new Date();
date.setTime( localStorage.key(i));
var datestr = date.toGMTString();
reselt += '<tr><td>'+'这是第'+i+'条数据</td><td>'+ localStorage.getItem( localStorage.key(i))+'</td><td>'+datestr+'</td></tr>';
}
reselt += '</table>';
var target = document.getElementById(id);
target.innerHTML = reselt;
}
function clearStorage(id){
localStorage.clear();
alert("数据已经被成功删除！");
loadStorage('msg');
}
3.video元素与audio元素的基础知识
1) video元素与audio元素的基础知识
video元素
--在HTML5中专门用来播放网络上的视频或者电影。
audio元素
--在HTML5中专门用来播放网络上的音频。
使用video和audio元素进行播放时就不在需要使用其他的插件了，只要我们的浏览器支持HTML5就可以了！
浏览器的支持：
Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都对audio元素和video元素支持！
使用方法
audio元素只需要给他指定一个src属性：
<audio src="MP3.mp3" controls="controls"></audio>
对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替
<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>
video元素要设定好长宽和src属性就可以了：
<video width="750" height="400" src="time.mp4"></video>
同样对于不支持video的浏览器可以在中间加入替换文字：
<video width="750" height="400" src="time.mp4">您的浏览器不支持video元素</video>
source元素指定多个播放格式与编码：
source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：
<video>
<source src="video.m4v" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" />
</video>
各种设备对编码格式的支持情况：
webm(.webm)格式的视频 火狐4.0+、chrome6.0+、opera10.6+
mp4(.m4v)格式的视频 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+
ogg(.ogv)格式的视频 火狐3.5+、chrome3.0+、opera10.5+
mp4(.mp4)格式的视频 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>video元素与audio元素的基础知识</title>
</head>
<body>
<h1>Audio元素的使用示例</h1>
<audio controls="controls" src="MP3.mp3">
您的浏览器太老了，不支持我们的HTML5页面，请更新浏览器！
</audio>
<br/>
<h1>Video元素的使用示例</h1>
<video width="650" height="280" src="video.mp4">
您的浏览器太老了，不支持我们的HTML5页面，请更新浏览器！
</video>
</body>
</html>
4.video元素与audio元素的常用属性
audio元素和video元素的常用属性
src属性：
在这个属性里面指定媒体数据的URL地址。
controls属性：
指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停等按钮。
使用方法：
<video src="video.mp4" controls="controls"></video>
width和height属性（video独有）：
指定视频的宽度与高度。
使用方法：
<video src="video.mp4" width="650" height="450"></video>
autoplay属性：
这个属性指定是否当我们网页加载完成之后就开始自动播放。
preload属性：
这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放的速度。
preload属性的三个值：
none 表示不进行预加载。
metadata 表示只预加载媒体的元数据。
auto(默认值) 表示预加载全部的视频或者音频。
使用方法：
<video src="video.mp4" preload="auto" ></video>
poster属性（video独有）：
当视频不可以播放的时候，使用poster元素向用户展示一张图片代替视频。
使用方法：
<video src="video.mp4" poster="video.jpg"></video>
loop属性：
指定是否循环播放视频或者音频数据。
使用方法：
<video src="video.mp4" autoplay="auto" loop="loop"></video>
error属性：
读取过程中一旦发生错误，返回一个Media Error对象，这个对象的code返回对应的错误状态，默认情况下video和audio的error属性都是null。
4种错误状态，返回一个数字值，它表示音频/视频的错误状态：
1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 媒体不可用或者不支持音频/视频
读取错误状态示例
<video id="video" src="video.mp4"></video>
<script type="text/javascript">
var video = document.getElementById('video');
video.addEventListener("error",function(){
var error = video.error;
switch (error.code){
case 1:
alert('取回过程被用户中止。');
break;
case 2:
alert('当下载时发生错误。');
break;
case 3:
alert('当解码时发生错误。');
break;
case 4:
alert('媒体不可用或者不支持音频/视频。');
break;
}
},false);
</script>
networkState属性：
networkState 属性返回音频/视频的当前网络状态（activity）
4种错误状态，表示音频/视频元素的当前网络状态：
0 = NETWORK_EMPTY - 音频/视频尚未初始化
1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络
2 = NETWORK_LOADING - 浏览器正在下载数据
3 = NETWORK_NO_SOURCE - 未找到音频/视频来源
networkState属性：
networkState 属性返回音频/视频的当前网络状态（activity）
video元素和audio元素的4种方法
play方法：
使用play方法来播放媒体，自动将元素的paused属性的值变成false。
pause方法：
使用pause方法来暂停播放，自动将元素的paused属性的值变成true。
load方法：
使用load方法来重新载入媒体进行播放，自动将元素的playbackRate属性的值变成defaultPlaybackRate属性的值，自动把error的值变成null。
canPlayType方法：
使用canPlayType方法来测试浏览器是否支持指定的媒体类型。
使用方法如下：
var support = videoElment.canPlayType(type);
canPlayType() 方法可返回下列值之一：
"probably" - 浏览器最可能支持该音频/视频类型
"maybe" - 浏览器也许支持该音频/视频类型
"" - （空字符串）浏览器不支持该音频/视频类型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>audio元素和video元素的常用属性</title>
</head>
<body>
<h1>audio元素和video元素的常用属性</h1>
<!--<audio src="MP3.mp3" controls="controls" loop="loop"></audio>-->
<!--<video src="1video.mp4" controls="controls" width="600" height="250" poster="tu.jpg" loop="loop"></video>-->
<video id="video" src="1video.mp4"></video>
<script type="text/javascript">
var video = document.getElementById('video');
video.addEventListener("error",function(){
var error = video.error;
switch (error.code){
case 1:
alert('取回过程被用户中止。');
break;
case 2:
alert('当下载时发生错误。');
break;
case 3:
alert('当解码时发生错误。');
break;
case 4:
alert('媒体不可用或者不支持音频/视频。');
break;
}
},false);
</script>
</body>
</html>
5.HTML5拖放
HTML5拖放API
1、 拖放的步骤
1、对象元素的draggable属性设置为true（draggable="true"）。还需要注意的是a元素和img元素必须指定href。
2、编写与拖放有关的事件处理代码。事件产生事件的元素描述dragstart被拖放的元素开始拖放操作drag被拖放的元素拖放过程中dragenter拖放过程中鼠标经过的元素被拖放的元素开始进入本元素的范围之内dragover拖放过程中鼠标经过的元素被拖放的元素正在本元素范围内移动dragleave拖放过程中鼠标经过的元素被拖放的元素离开本元素的范围drop拖放的目标元素其他元素被拖放到了本元素中dragend拖放的对象元素拖放操作结束
2、DataTransfer对象的属性与方法
DataTransfer对象的属性和方法属性/方法描述dropEffect属性表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none、copy、link、moveeffectAllowed属性 用来指定当元素被拖放时所允许的视觉效果，可以指定的值copy、link 、move、copylink 、linkmove、all、none、uninitializedtypes属性存入数据的种类，字符串的伪数组void clearData（DOMString format）方法清除DataTransfer对象中存放的数据，如果省略掉参数format就会清除全部数据。void steData（DOMString format，DOMStrong data）向DataTransfer对象中存入数据DOMString getData(DOMString format)从DataTransfer对象中读取数据void setDragImage(Element image，long x，long y)用img元素来设置拖放图标
clearData方法可以用于清除DataTransfer对象中的数据。
3、拖放的时的效果
设置拖放时的视觉效果
dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定，他的值如下：属性值说明copy允许被拖动的元素被复制到项目中move允许将被拖动元素移动到被拖动的目标元素中link通过拖放操作，被拖动的元素会连接到拖到的目标元素上copylink被拖动元素被复制或链接到拖动的目标元素中，根据拖动的目标元素来决定执行复制操作还是链接操作copyMove被拖动元素复制或移动到拖到的目标元素中，根据被拖动的目标元素来决定复制操作还是移动操作linkmove被拖动元素被连接或移动到拖动的目标元素中，根据拖动的目标元素来决定执行链接操作还是移动操作all允许执行所有拖动操作none不允许执行任何拖动操作uninyialize不指定effectAllowed属性值。这是将执行浏览器中默认允许的拖动操作，但是这个操作不能通过effectAllowed属性值来获取
dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许的值none、copy、link、move。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function allowDrop(ev)
{
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
ev.dataTransfer.dropEffect = 'link'
}
function drag(ev)
{
// 使用setData(数据类型，携带的数据)
// 方法将要拖放的数据存入dataTransfer对象
// ev.clearData();
ev.effeAllowed = 'all';
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
//使用getData()获取到数据，然后赋值给data
var data=ev.dataTransfer.getData("Text");
//使用appendChild方法把拖动的节点放到元素节点中成为他的子节点
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#tuo{
background: #e54d26;
width: 540px;
height: 320px;
}
#cun{
width: 540px;
height: 320px;
border: 2px solid #D2D2D2;
box-shadow: 1px 4px 8px #646464;
}
</style>
</head>
<body>
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img src="html5.png" id="tuo" draggable="true" ondragstart="drag(event)" width="500" height="280" / >
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【麦子学院】03.web前端开发之HTML5+CSS3快速入门之基本HTML5元素介绍
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- HTML5-本地存储 Web留言板
- HTML5开发学习（3）:本地存储之Web Sql Database（附源码）
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
- web前端-在迷惘中的探索HTML5（二）本地存储之IndexDB
- 【麦子学院】03.web前端开发之convas画布
- CSS世界：web前端开发，CSS3+HTML5网页制作
- HTML5开发学习:本地存储Web Sql Database
- HTML5本地存储——Web SQL Database
- HTML5开发 Local Storage 本地存储
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十三】
- HTML5之audio实战，网页音乐播放器开发
- HTML5本地存储之Web Storage篇
- web前端开发——网页布局显示错位的可能原因（shift+F6重命名快捷键的使用注意）
- 学习web前端开发是选培训学校靠谱还是自学靠谱？有哪些网页设计培训机构？
- Android WebView Video完全详解（第二篇）-H5前端开发人员
- HTML5 indexedDB前端本地存储数据库实例教程
- 【麦子学院】web前端开发之Photoshop切片
- 【翻译】HTML5开发——轻量级Web Database存储库html5sql.js