当前位置：首页 > news >正文

HTML5高级部分

news 2025/8/15 15:58:13

一、拖拽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>Document</title><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>Document</title><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">列表1</div><div class="draglist" title="拖拽我" draggable="true">列表2</div><div class="draglist" title="拖拽我" draggable="true">列表3</div><div class="draglist" title="拖拽我" draggable="true">列表4</div><div class="draglist" title="拖拽我" draggable="true">列表5</div><div class="draglist" title="拖拽我" draggable="true">列表6</div></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){//设置数据dataTransfere.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) 设备的地理位置发生改变的时候自动被调用,该方法会返回一个 ID
clearWatch(id) 注销监听器

代码示例：

<script>//1.判断浏览器是否支持Geolocation APIif('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>