HTML5高级部分
目录
- 一、拖拽API
-
- 1.1 拖拽元素
- 1.2 监听事件
- 1.3 dataTransfer传递数据
- 二、媒体API
-
- 2.1 常用监听事件
- 2.2 常用API
- 三、画布API
-
- 3.1 canvas 标签
- 3.2 创建canvas对象
- 3.3 常用API
- 四、地理API
-
- 4.1 方法
一、拖拽API
1.1 拖拽元素
页面中设置了draggable="true"的元素可以进行拖拽，默认为false
图片和超链接默认可以被
<div class="box1" draggable="true">div>
1.2 监听事件
ondragstart开始拖动的时候ondrag正在拖动ondragend结束拖动ondragenter进入目标容器时ondragover正在目标容器中拖动ondragleave离开目标容器ondrop在目标容器中松开鼠标
注：在目标容器中必须在ondragover事件中阻止默认行为，否则不能触发ondrop事件
代码示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box1{
height: 100px;
width: 200px;
background-color: skyblue;
}
.box2{
height: 500px;
width: 500px;
border: 1px solid black;
}
style>
head>
<body>
<div class="box1" draggable="true">div>
<div class="box2">div>
<script>
//被拖拽的对象
let box1 = document.querySelector('.box1');
//目标对象
let box2 = document.querySelector('.box2');
//开始拖动
box1.ondragstart = function(){
console.log("开始拖动");
}
//正在拖动
box1.ondrag = function(){
console.log("正在拖动");
}
//结束拖动
box1.ondragend = function(){
console.log("结束拖动");
}
//进入目标容器时
box2.addEventListener("dragenter",function() {
console.log("进入目标容器");
})
//正在目标容器中拖动
box2.addEventListener("dragover",function(e) {
//阻止默认行为，否则不能触发drop事件
e.preventDefault();
console.log("正在目标容器中拖动")
})
//离开目标容器时
box2.addEventListener("dragleave",function() {
console.log("离开目标容器");
})
//释放鼠标时触发
box2.addEventListener("drop",function() {
console.log("释放鼠标");
})
script>
body>
html>
1.3 dataTransfer传递数据
目的：为了实现数据的交换
dataTransfer常用方法：
setData(key,value)设置数据getData(key)获取数据setImageDrag(imgElement, xOffset, yOffset)设置拖拽时显示的图标clearData(key | ' ')删除指定数据和全部数据
代码示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.dustbin{
height: 400px;
width: 100px;
font-size: 60px;
text-align: center;
background-color: gray;
float: left;
}
.dragbox{
float: left;
margin-left: 20px;
width: 500px;
height: 300px;
background-color: skyblue;
}
.dragbox .draglist{
width: 500px;
height: 60px;
line-height: 60px;
background-color: rgb(175, 173, 173);
border: 1px dashed rgb(93, 91, 91);
font-size: 20px;
}
style>
head>
<body>
<div class="dustbin"><br>垃<br>圾<br>箱div>
<div class= "dragbox">
<div class="draglist" title="拖拽我" draggable="true">列表1div>
<div class="draglist" title="拖拽我" draggable="true">列表2div>
<div class="draglist" title="拖拽我" draggable="true">列表3div>
<div class="draglist" title="拖拽我" draggable="true">列表4div>
<div class="draglist" title="拖拽我" draggable="true">列表5div>
<div class="draglist" title="拖拽我" draggable="true">列表6div>
div>
<div class="dragremind">div>
<script>
//源对象
let draglists = document.querySelectorAll(".draglist");
//目标对象
let dustbin = document.querySelector(".dustbin");
//临时变量
let dragDom = null;
draglists.forEach(item => {
item.ondragstart = function(e){
//设置数据dataTransfer
e.dataTransfer.setData("text",e.target.innerHTML);
let img = new Image();
img.src = "./image/1.jpg"
//setDragImage设置拖拽时显示的图片
e.dataTransfer.setDragImage(img,0,0);
dragDom = this;
}
//没有拖拽到父容器松开了
item.ondragend = function(e){
//清楚数据
e.dataTransfer.clearData('text');
dragDom = null;
}
});
//目标对象
dustbin.ondragover = function(e){
e.preventDefault();
}
dustbin.ondrop = function(){
if (dragDom) {
document.querySelector(".dragremind").innerText = `${dragDom.innerText}被删除了`
dragDom.remove();
}
}
script>
body>
html>
二、媒体API
2.1 常用监听事件
onplay当媒体开始播放时触发onpause媒体暂定播放触发onended媒体播放结束ontimeupdate当媒体的播放时间发生变化时触发，通常与进度条等播放控件结合使用oncanplay当媒体可以开始播放时触发，表示媒体已经加载到足够的数据以供播放onloadedmetadata当媒体的元数据（例如尺寸、时长等）加载完成时触发。onloadeddata在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。onerror当媒体加载或播放过程中发生错误时触发。
代码示例：
let mVideo = document.querySelector(".mVideo");
//当媒体开始播放时触发
mVideo.onplay = function(){
console.log("视频开始播放");
}
//媒体暂定播放触发
mVideo.onpause = function(){
console.log("视频暂停");
}
//媒体播放结束
mVideo.onended = function(){
console.log("视频结束");
}
//当媒体的播放时间发生变化时触发，通常与进度条等播放控件结合使用
mVideo.ontimeupdate = function(){
console.log("视频时间发生改变");
}
//当媒体可以开始播放时触发，表示媒体已经加载到足够的数据以供播放
mVideo.oncanplay = function(){
console.log("视频可以开始播放");
}
//当媒体的元数据（例如尺寸、时长等）加载完成时触发。
mVideo.onloadedmetadata = function(){
console.log('视频元数据加载完成');
}
//当媒体加载或播放过程中发生错误时触发。
mVideo.onerror = function(){
console.log("视频发生错误");
}
2.2 常用API
1.控制条是否显示
mVideo.controls = true;
2.播放视频
mVideo.play();
3.当前媒体元素的播放时间，单位秒
mVideo.currentTime
4.以秒为单位给出媒体的长度
mVideo.duration
5.设置媒体播放时的音量。0 为静音，1 为音量最大时的值。
mVideo.volume = 1
6.指示要在元素中使用的媒体资源的 URL。
mVideo.src = "./video/卡点音乐相册.mp4"
7.暂停媒体的播放
mVideo.pause();
三、画布API
3.1 canvas 标签
<canvas id="cvs" width="400" height="400">canvas>
3.2 创建canvas对象
//获取canvas元素
let cvs = document.querySelector("#cvs");
//创建canvas对象
let ctx = cvs.getContext('2d');
3.3 常用API
moveTo(x,y)起点坐标lineTo(x,y)终点坐标strokeStyle线条颜色lineWidth线条宽度fillStyle填充颜色fillRect(x, y, width, height)绘制填充矩形strokeRect(x, y, width, height)绘制空心矩形clearRect(x, y, width, height)擦除矩形区域arc(x, y, radius, startAngle, endAngle, anticlockwise)绘制圆弧路径的方法stroke()绘制当前或已经存在的路径的方法。fillText(text, x, y)绘制实心文本strokeText(text, x, y)绘制空心文本beginPath()创建一个新的路径closePath()将笔点返回到当前子路径起始点clip()将当前创建的路径设置为当前剪切路径save()保存 canvas 全部状态restore()弹出顶端的状态
四、地理API
允许网站或应用基于用户的地理位置提供定制的信息。
4.1 方法
getCurrentPosition(success, error, options)确定设备的位置并返回一个携带位置信息的 Position 对象。watchPosition(success, error, options)设备的地理位置发生改变的时候自动被调用,该方法会返回一个 IDclearWatch(id)注销监听器
代码示例：
<script>
//1.判断浏览器是否支持Geolocation API
if('geolocation' in navigator){
alert("支持 geolocation")
}else{
alert("不支持 geolocation")
}
//2.获取位置信息
navigator.geolocation.getCurrentPosition(res=>{
console.dir(res);
console.log(res.coords);
document.querySelector(".longitude").innerText = `经度:${res.coords.longitude}`
document.querySelector(".latitude").innerText = `纬度:${res.coords.latitude}`
},err=>{
console.log(err);
},{timeout:3000});
//3.在设备的地理位置发生改变的时候自动被调用
let id = navigator.geolocation.watchPosition(res=>{
console.log(res.coords);
},err=>{
console.log(err);
})
//4.注销监听器
navigator.geolocation.clearWatch(id);
</script>