网站国际化建设方案免费友链平台
目录
- 一、拖拽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>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)设备的地理位置发生改变的时候自动被调用,该方法会返回一个 IDclearWatch(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>