HTML5 API
1.媒体文件
audio
video属性：
src 文件的路径
width 视频文件的宽度
height 视频文件的高度
autoplay 音视频自动播放（浏览器要设置允许自动播放）
controls 控制条
loop 音视频循环播放
muted 音视频静音
poster 视频加载不出来的时候显示的图片，也可以做封面节点属性
currentTime 当前的播放时间
duration 视频的总时长
paused 暂停，
true 当前视频状态是停止的
false 当前视频状态是播放的
volume 当前视频的音量
playbackRate 播放的速度
playbackRate >1 加快播放速度
playbackRate <1 减慢播放速度
playbackRate =1 正常速度节点方法
play() 播放
pause() 暂停案例
通过键盘控制音量和进度
document.onkeydown=function(event){
if(event.keyCode == 37){
videos.currentTime -=2
}else if(event.keyCode == 39){
videos.currentTime +=2
}else if(event.keyCode ==38){
if(videos.volume<0.9){
videos.volume +=0.1
}else{
videos.volume = 1
}
}else if(event.keyCode == 40){
if(videos.volume>0){
videos.volume -=0.1
}else{
videos.volume = 0
}
}
}2.画布
画布就是一个标签，没有绘图功能，有绘图功能的是图形上下文。
获取图形上下文
getContext()
绘制步骤
获取canvas对象
var canvas = document.getElementById('canvas')
获取图形上下文
var context = canvas.getContext('2d')
设置绘图的样式
context.fillStyle = 'red' 填充色
context.strokeStyle = 'pink' 边框色
设置线宽
context.lineWidth=5
绘制图形
context.fillRect() 填充矩形
context.strokeRect() 边框矩形矩形
fillRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)
strokeRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)
clearRect(起点的x轴坐标，起点的y轴坐标，矩形的宽度，矩形的高度)
圆形
创建路径
context.beginPath()
设置路径
context.arc(圆心的x轴，圆心的y轴，半径，开始的角度，结束的角度，顺时针false/逆时针true)
Math.PI 180度
关闭路径
context.closePath()
设置样式
context.fillStyle = 'red'
context.strokeStyle = 'pink'
绘制圆形
context.fill()实心圆
context.stroke()空心圆直线
开始路径
context.beginPath()
直线的开始位置
context.moveTo(起点的x轴坐标，起点的y坐标)
直线的结束位置
context.lineTo(终点的x轴坐标，终点的y坐标)
结束路径
context.closePath()
设置样式
绘制
context.fill()
context.stroke()曲线
开始路径
context.benginPath()
开始的位置
context.moveTo(x,y)
控制点
两个控制点的：
context.bezierCurveTo(第一个控制点的x轴位置,第一个控制点的y轴位置,第二个控制点的x轴位置,第二个控制点的y轴位置y,结束点x轴,结束点的y轴)
如果想要上面的曲线更弯曲，就把x轴变大，y轴变小
如果想要下面的曲线更弯曲，就把x轴变小，y轴变大
一个控制点的：
context.quadraticCurveTo(控制点的x轴,控制点的y轴,结束点的x轴,结束点的y轴)
闭合
context.closePath()
绘制
context.stroke()
context.fill()
默认颜色是黑色
线宽是13.渐变
线性渐变：
创建一个渐变的对象
var gradient = context.createLinearGradient(起始点x坐标，起始点y坐标，结束点x坐标，结束点y坐标)
添加渐变的颜色
gradient.addColorStop(偏移量【0-1】,'color')
设置填充渐变
context.fillStyle = gradient
使用渐变绘制矩形
context.fillRect(0,0,400,400)*4.变形
*
平移
context.translate(x,y)
缩放
context.scale(缩放的x轴倍数,缩放的y轴倍数)
旋转
context.rotate(旋转的角度)
注意点:
所有的变形,都针对坐标轴的,跟所绘制的图形没有关系
绘制图像
创建图像对象
var image = new Image()
添加图像的路径
image.src = ‘路径’
绘制图像
三个参数
context.drawImage(image,图片的起点x,图片的起点y)
五个参数
context.drawImage(image,图片的起点x,图片的起点y,图片的宽,图片的高)
注意:在我们绘制的图片的时候,要等图片加载完成再进行绘制
image.onload=function(){
绘制图像
}图片的裁剪
设置裁剪的位置
裁剪的形状
裁剪: context.clip()
注意: 裁剪必须在图像绘制之前进行
文本的绘制
context.font 设置字体样式
context.textAlign 设置文本的对齐方式
context.textBaseline 文本的基线
context.fillText(文本的内容,x,y,最大宽度)5.拖拽
拖放元素
不是所有的元素都是可以被拖放的
可以被拖放的:a,img
其他都是不可以被拖放的元素
draggable = 'true' 将不可拖放的元素设置为可以拖放的元素
dragstart 开始拖放
drag 拖放
gragend 拖放结束目标元素
用来放置拖放元素的
设置目标元素可以放置拖放元素:
dragenter 拖拽元素开始进入的时候
dragover 拖拽元素在内部移动的时候
drop 放置拖拽元素的时候dragstart–>drag–>dragenter–>dragover–>drop–>dragend
拖拽
在dragstart的时候,把当前拖拽元的id值存储到dataTransfer里面
dataTransfer.setData('id',id值)
drop
获取存放在dataTransfer中的id值
dataTransfer.getData('id')
dragover
阻止默认
event.preventDefault()
类数组对象转换成数组的方法
Array.prototype.slice.call(array,0)
Array.from(array)兼容问题
谷歌底下:div不设置为可拖放元素,也可以被拖动
火狐底下:div必须转换为可拖放元素
6.本地数据库
在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以像访问本地文件那样轻松地对内置数据库进行访问。在HTML5中内置了两种本地数据库，一种为"SQLLite",可以通过SQL语言来访问的文件型SQL数据库。另外一种为"indexedDB"的NoSQL类型的数据库。到目前为止Chrome6+，Opera10+，Safari5+ 的浏览器对SQLLite数据库提供支持。
websql:关系型数据库
可以使用sql [mysql sql server oracle]
‘slect * from student where id=1001’
indexedDB: 非关系型
不可以使用sql
键值 键值对
key value
对象 {username:‘tom’,age:12}
1.SQLLite数据库 WebSQL数据库 谷歌支持，火狐目前不支持
关系型数据库,可以使用sql语言
SQL语句
创建表：create table student(id integer,name text,age integer,tel text)
删除表：drop table student
插入数据：insert into student values(1001,'zhangsan',12,'12323233434')
修改数据：update student set name='lisi' where id=1001
查询数据：select name,age from student where id = 1001
删除数据：delete from student
1) 访问方式
1. 使用openDatabase方法创建一个访问数据库的对象
参数:数据库名称,数据版本,数据库的介绍,数据库大小
var db = openDatabase("mydb",1.0,'Test DB',2*1024*1024)
1024个字节=1kb
1024kb = 1Mb
2M空间 2*1024*1024
操作数据库
操作数据库中的表
为了避免同时修改数据库中的表
事务
2. 使用事务处理
db.transaction(function(ts){
ts是事务对象
executeSql执行sql语句,?是一个占位符
var sql = 'update student set name=?,age=?'
ts.executeSql(sql,[],function(ts,result){
代表成功
},function(ts,errorMsg){
代表失败
});
});
2) API
window.openDatabase(dbName,version,desc,size,[fun])
参数分别为数据库名，版本号，数据库的描述，数据库的大小(以字节为单位)，回调函数
返回值为创建后的数据库访问对象，如果数据库不存在，则创建该数据库
dataBase.transaction(fun)
执行事务处理，使用事务处理，可以防止在对数据库进行访问以及执行有关操作时受到外界的干扰。
参数为回调函数，在该回调函数中，执行访问数据库的语句
transaction.executeSql(sql,[],dataHandler,errorHandler);
sql 需要执行的SQL语句
[]sql中所有使用到的参数的数组，sql语句中可以使用占位符?进行替代
dataHandller 成功执行SQL语句时调用的回调函数
function dataHandler(transaction,results){
//transaction 事务对象
//results 执行查询操作时返回的查询到的结果数据集对象
}
errorHandler 执行SQL语句出错时调用的回调函数
function errorHandler(transaction,errmsg){
//transaction 事务对象
//errmsg 执行发生错误时的错误信息文字
}- indexedDB
该数据库是一种存储在客户端本地的NoSQL数据库，目前Firefox4+，IE10，Chrome11+对其提供了支持
一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有唯一的名称。
一个数据库可包含一个或多个对象存储。
一个对象存储（由一个名称惟一标识,key值是唯一的）是一个记录集合。
每个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成唯一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符
。
在indexedDB-API中，对象仓库 中的每一条记录均为一个具有一个或多个属性值的对象,即 对象记录。
key value
1 {name:‘tom’,age:12}
- 使用步骤
打开/链接数据库–>获取事务对象–>获取数据(对象)仓库–>增删改查
- 打开indexedDb连接并创建对象仓库
1. /**
• 1.获取数据库连接
• */
function getConnection (handler) {
var request=window.indexedDB.open(“sms”,‘1.0’);
request.οnerrοr=function(e){
console.log(‘OPen Error!’,e);
};
request.onsuccess=function(e){
db=e.target.result;
// this.result
var ts = db.transaction(‘Student’,‘readwrite’)
// 通过事务对象获取对象仓库
var store = ts.objectStore(“Student”);
console.log(store)
};
/**1. 创建对象仓库
• */
在数据库版本更新的时候才会创建数据仓库,或者删除
request.onupgradeneeded = function(e) {
var oldVersion = e.oldVersion;
var newVersion = e.newVersion;
console.log(“数据库版本更新成功！旧版本为” + oldVersion + “,新版本为” + newVersion);
//删除原有的数据仓库，创建新的数据仓库
var db=e.target.result;
if(db.objectStoreNames.contains(“Users”)){
db.deleteObjectStore(“Users”);
}
//创建对象仓库,仓库名,仓库的配置对象
var store = db.createObjectStore(“Users”,{
keyPath:“userId”,主键,设置key值
autoIncrement:true 自动增长
});
}
}- 执行增删改查操作 在使用indexedDB数据库时，所有对于数据的操作都在一个事务内部执行。事务为以下两种：
只读事务 “readonly”
读写事务 “readwrite”
/保存 * /
function save() {
getConnection(function(db){
var user = {
userName:“terry”,
address:“shanxi”
};
//开启事务,事务对users对象仓库可读可写
var tx = db.transaction([“Users”],“readwrite”);
//获取对象仓库
var store = tx.objectStore(“Users”);
// put遇到同一个key值,更新,add报错
var req = store.put({name:‘tommmm’,age:15})
req.onsuccess = function () {
alert(“保存成功”);
};
});
}
/ 获取单个 * /
function get() {
getConnection(function (db) {
//开启事务
var tx = db.transaction([“Users”],“readwrite”);
//获取对象仓库
var store = tx.objectStore(“Users”);
var req = store.get(1);
req.onsuccess = function () {
console.log(this.result);
};
})
}
/ 删除 * */
function del() {
getConnection(function (db) {
//开启事务
var tx = db.transaction([“Users”],“readwrite”);
//获取对象仓库
var store = tx.objectStore(“Users”);
var req = store.delete(1);
req.onsuccess = function () {
var result = this.result;
console.log(“删除成功”,result);
};
})
}
2.API
网址：https://www.w3.org/TR/IndexedDB/
1)indexedDB【对象】
open(name,version) 返回IDBOpenDBRequest的一个实例对象
deleteDatabase(name) 删除数据库，参数为数据库的名字
2)IDBOpenDBRequest open函数的返回值
onsuccess 成功之后触发的事件
onerror 失败之后触发的事件
onupgradeneeded 版本更新之后触发的事件，一般在这里获取数据库对象之后，创建对象仓库
event.target.result IDBDatabase对象3)IDBDatabase indexedDB数据库 【构造函数】
objectStoreNames 获取所有对象仓库的名字
createObjectStore(storeName,{}) 创建对象仓库
参数:
storeName
对象仓库名
optionalParameters
可选，参数值为一个JS对象
keyPath 用于指定对象仓库中的每一条记录使用哪个属性值来作为该记录的主键值
autoIncrement 当取值为true时，表示主键值自增，在添加数据的时候无需指定主键值
示例：
db.createObjectStore(仓库名,{
keyPath:"id",
autoIncrement:true
});
deleteObjectStore(name) 删除对象仓库，参数为删除的对象仓库的名字
transaction(stores,mode) 获得事务
参数:
arr[] 表示由一些对象仓库名组成的一个字符串数组，用于定义事务的所用范围，即限定该事务中所运行的读写操作只能针对哪些对象仓库进行；当事务中的数据存取操作只针对某个对象仓库时，该参数值也可以为一个由该对象仓库名；也可以为idb.objectStoreNames,表示由该数据库中所有对象仓库名构成的数组(不建议使用)。
mode 可选参数，用于定义事务的读写模式
示例：
var transaction = db.transaction(storeName,"readwrite");4)IDBTransaction indexedDB事务 【构造函数】
objectStore(storeName) 获取对象仓库。参数为仓库名
5)IDBObjectStore indexedDB对象仓库 【构造函数】
put(obj) 添加。添加数据，重复添加会更新原有数据
add(obj) 添加。添加数据，重复添加会报错
get(key) 通过主键获取
getAll() 获取所有
delete(key) 通过主键删除
clear() 删除所有
【返回值是IDBRequest对象，如果执行成功，则进行后续操作】
6)IDBRequest indexedDB请求对象,是仓库对象执行方法之后的返回值【构造函数】
onsuccess 成功之后触发的事件
onerror 失败之后触发的事件
result 结果集
创建对象仓库,在版本更新的时候
btns[0].onclick = function(){
// 打开数据库
var request = indexedDB.open(‘user’,‘2.0’)
request.onsuccess = function(){
console.log(‘数据库创建成功或者链接成功’)
// 在成功的时候获取数据库对象
console.log(this.result)
// 可以在这里获取事务对象,获取对象仓库,增删改查
} request.onerror = function(){
}
// 版本更新的时候
request.onupgradeneeded = function(){
console.log('版本更新')
// 判断是不是有
if(this.result.objectStoreNames.contains("Student")){
this.result.deleteObjectStore("Student");
}
// 创建对象仓库
this.result.createObjectStore("Student",{
keyPath:"id",
autoIncrement:true
});
console.log('创建对象仓库成功')
}
}
var store;
// 获取对象仓库
btns[1].onclick = function(){
// 链接数据库
var request = indexedDB.open('user')
request.onsuccess=function(){
// 获取数据库对象
var db = this.result
// 通过数据库对象获取事务对象
var ts = db.transaction('Student','readwrite')
// 通过事务对象获取对象仓库
var store = ts.objectStore("Student");
console.log(store)
}
}
添加/修改数据
btns[2].onclick=function(){
var request = indexedDB.open('user')
request.onsuccess=function(){
// 获取数据库对象
var db = this.result
// 通过数据库对象获取事务对象
var ts = db.transaction('Student','readwrite')
// 通过事务对象获取对象仓库
store = ts.objectStore("Student");
// put遇到同一个key值,更新,add报错
var req = store.put({name:'tommmm',age:15,id:1})
req.onsuccess = function () {
alert("保存成功");
};
}
查询
btns[4].onclick=function(){
var request = indexedDB.open('user')
request.onsuccess=function(){
// 获取数据库对象
var db = this.result
// 通过数据库对象获取事务对象
var ts = db.transaction('Student','readwrite')
// 通过事务对象获取对象仓库
store = ts.objectStore("Student");
// put遇到同一个key值,更新,add报错
var req = store.getAll()
req.onsuccess = function () {
console.log('查询成功',this.result)
};
}
}删除
btns[3].onclick=function(){
var request = indexedDB.open('user')
request.onsuccess=function(){
// 获取数据库对象
var db = this.result
// 通过数据库对象获取事务对象
var ts = db.transaction('Student','readwrite')
// 通过事务对象获取对象仓库
store = ts.objectStore("Student");
// put遇到同一个key值,更新,add报错
var req = store.delete(2)
req.onsuccess = function () {
alert("删除成功");
};
}
}4.本地数据库
web sql
关系型数据库 可以使用sql语句
火狐不支持
indexedDB
非关系型数据库 不可以使用sql
键值对
按记录存储,一个记录表示一条数据
火狐,谷歌都支持
本地存储
web storage
只能存储字符串
非字符串数据要转换成字符串,自带的转换机制
toString()
sessionStorage
会话存储
只在当前选项卡有效
localStorage
存储在本地的硬盘中,
在整个浏览器有效
即使关闭了浏览器,我们的数据仍然存在
cookies
安全性低
容量小
js
单线程
var total = 0
for(var i=0;i<1000000000000;i++){
total +=i
}
console.log(total)
异步
处理
前后台交互的时候 处理异步
promise机制 优化异步
定时器
setInterval
setTimeOut
web workers
单线程
var total = 0
for(var i=0;i<1000000000000;i++){
total +=i
}
console.log(total)
放到后台执行
前台照常运行下去
等后台的循环跑完之后,再返回给前台
后台
监听代码,监听前台有没有给我发指令
onmessage = function(event){
var total = 0
event.data是前台传过来的值
for(var i=0;i<event.data;i++){
total +=i
}
} 告诉前台,把total给前台
postMessage(total)
前台代码
var worker = new Worker(‘后台代码的路径’)
用来监听后台是否运行完成
worker.onmessage = function(event){
}
worker.postMessage(1000000000)
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
