射洪网站建设工作室,wordpress twenty,小红书信息流广告,东阳app开发目录 一、拖拽API1.1 拖拽元素1.2 监听事件1.3 dataTransfer传递数据 二、媒体API2.1 常用监听事件2.2 常用API 三、画布API3.1 canvas 标签3.2 创建canvas对象3.3 常用API 四、地理API4.1 方法 一、拖拽API
1.1 拖拽元素
页面中设置了draggabletrue的元素可以进… 目录 一、拖拽API1.1 拖拽元素1.2 监听事件1.3 dataTransfer传递数据 二、媒体API2.1 常用监听事件2.2 常用API 三、画布API3.1 canvas 标签3.2 创建canvas对象3.3 常用API 四、地理API4.1 方法 一、拖拽API
1.1 拖拽元素
页面中设置了draggabletrue的元素可以进行拖拽默认为false 图片和超链接默认可以被
!-- 被拖拽的对象 --
div classbox1 draggabletrue/div1.2 监听事件
ondragstart 开始拖动的时候ondrag 正在拖动ondragend 结束拖动ondragenter 进入目标容器时ondragover 正在目标容器中拖动ondragleave 离开目标容器ondrop 在目标容器中松开鼠标
注在目标容器中必须在ondragover事件中阻止默认行为否则不能触发ondrop事件
代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box1{height: 100px;width: 200px;background-color: skyblue;}.box2{height: 500px;width: 500px;border: 1px solid black;}/style
/head
body!-- 图片和链接默认可以被拖动 --!-- 被拖拽的对象 --div classbox1 draggabletrue/div!-- 目标对象 --div classbox2/divscript//被拖拽的对象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
/html1.3 dataTransfer传递数据 目的为了实现数据的交换 dataTransfer常用方法
setData(key,value) 设置数据getData(key) 获取数据setImageDrag(imgElement, xOffset, yOffset) 设置拖拽时显示的图标clearData(key | ) 删除指定数据和全部数据
代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
bodydiv classdustbinbr垃br圾br箱/divdiv class dragboxdiv classdraglist title拖拽我 draggabletrue列表1/divdiv classdraglist title拖拽我 draggabletrue列表2/divdiv classdraglist title拖拽我 draggabletrue列表3/divdiv classdraglist title拖拽我 draggabletrue列表4/divdiv classdraglist title拖拽我 draggabletrue列表5/divdiv classdraglist title拖拽我 draggabletrue列表6/div/div div classdragremind/divscript//源对象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.currentTime4.以秒为单位给出媒体的长度
mVideo.duration5.设置媒体播放时的音量。0 为静音1 为音量最大时的值。
mVideo.volume 16.指示要在元素中使用的媒体资源的 URL。
mVideo.src ./video/卡点音乐相册.mp47.暂停媒体的播放
mVideo.pause();三、画布API
3.1 canvas 标签
canvas idcvs width400 height400/canvas3.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
