做公司網(wǎng)站計入什么會計科目網(wǎng)絡(luò)seo優(yōu)化推廣
目錄
- 一、拖拽API
- 1.1 拖拽元素
- 1.2 監(jiān)聽事件
- 1.3 dataTransfer傳遞數(shù)據(jù)
- 二、媒體API
- 2.1 常用監(jiān)聽事件
- 2.2 常用API
- 三、畫布API
- 3.1 canvas 標簽
- 3.2 創(chuàng)建canvas對象
- 3.3 常用API
- 四、地理API
- 4.1 方法
一、拖拽API
1.1 拖拽元素
頁面中設(shè)置了draggable="true"的元素可以進行拖拽，默認為false
圖片和超鏈接默認可以被
<!-- 被拖拽的對象 -->
<div class="box1" draggable="true"></div>
1.2 監(jiān)聽事件
ondragstart開始拖動的時候ondrag正在拖動ondragend結(jié)束拖動ondragenter進入目標容器時ondragover正在目標容器中拖動ondragleave離開目標容器ondrop在目標容器中松開鼠標
注：在目標容器中必須在ondragover事件中阻止默認行為，否則不能觸發(fā)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("正在拖動");}//結(jié)束拖動box1.ondragend = function(){console.log("結(jié)束拖動");}//進入目標容器時box2.addEventListener("dragenter",function() {console.log("進入目標容器");})//正在目標容器中拖動box2.addEventListener("dragover",function(e) {//阻止默認行為，否則不能觸發(fā)drop事件e.preventDefault();console.log("正在目標容器中拖動")}) //離開目標容器時box2.addEventListener("dragleave",function() {console.log("離開目標容器");})//釋放鼠標時觸發(fā)box2.addEventListener("drop",function() {console.log("釋放鼠標");})</script>
</body>
</html>
1.3 dataTransfer傳遞數(shù)據(jù)
目的：為了實現(xiàn)數(shù)據(jù)的交換
dataTransfer常用方法：
setData(key,value)設(shè)置數(shù)據(jù)getData(key)獲取數(shù)據(jù)setImageDrag(imgElement, xOffset, yOffset)設(shè)置拖拽時顯示的圖標clearData(key | ' ')刪除指定數(shù)據(jù)和全部數(shù)據(jù)
代碼示例：
<!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){//設(shè)置數(shù)據(jù)dataTransfere.dataTransfer.setData("text",e.target.innerHTML);let img = new Image();img.src = "./image/1.jpg"//setDragImage設(shè)置拖拽時顯示的圖片e.dataTransfer.setDragImage(img,0,0);dragDom = this;}//沒有拖拽到父容器松開了item.ondragend = function(e){//清楚數(shù)據(jù)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 常用監(jiān)聽事件
onplay當(dāng)媒體開始播放時觸發(fā)onpause媒體暫定播放觸發(fā)onended媒體播放結(jié)束ontimeupdate當(dāng)媒體的播放時間發(fā)生變化時觸發(fā)，通常與進度條等播放控件結(jié)合使用oncanplay當(dāng)媒體可以開始播放時觸發(fā)，表示媒體已經(jīng)加載到足夠的數(shù)據(jù)以供播放onloadedmetadata當(dāng)媒體的元數(shù)據(jù)（例如尺寸、時長等）加載完成時觸發(fā)。onloadeddata在媒體當(dāng)前播放位置的視頻幀（通常是第一幀）加載完成后觸發(fā)。onerror當(dāng)媒體加載或播放過程中發(fā)生錯誤時觸發(fā)。
代碼示例：
let mVideo = document.querySelector(".mVideo");//當(dāng)媒體開始播放時觸發(fā)mVideo.onplay = function(){console.log("視頻開始播放");}//媒體暫定播放觸發(fā)mVideo.onpause = function(){console.log("視頻暫停");}//媒體播放結(jié)束mVideo.onended = function(){console.log("視頻結(jié)束");}//當(dāng)媒體的播放時間發(fā)生變化時觸發(fā)，通常與進度條等播放控件結(jié)合使用mVideo.ontimeupdate = function(){console.log("視頻時間發(fā)生改變");}//當(dāng)媒體可以開始播放時觸發(fā)，表示媒體已經(jīng)加載到足夠的數(shù)據(jù)以供播放mVideo.oncanplay = function(){console.log("視頻可以開始播放");}//當(dāng)媒體的元數(shù)據(jù)（例如尺寸、時長等）加載完成時觸發(fā)。mVideo.onloadedmetadata = function(){console.log('視頻元數(shù)據(jù)加載完成');}//當(dāng)媒體加載或播放過程中發(fā)生錯誤時觸發(fā)。mVideo.onerror = function(){console.log("視頻發(fā)生錯誤");}
2.2 常用API
1.控制條是否顯示
mVideo.controls = true;
2.播放視頻
mVideo.play();
3.當(dāng)前媒體元素的播放時間，單位秒
mVideo.currentTime
4.以秒為單位給出媒體的長度
mVideo.duration
5.設(shè)置媒體播放時的音量。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 創(chuàng)建canvas對象
//獲取canvas元素
let cvs = document.querySelector("#cvs");
//創(chuàng)建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)擦除矩形區(qū)域arc(x, y, radius, startAngle, endAngle, anticlockwise)繪制圓弧路徑的方法stroke()繪制當(dāng)前或已經(jīng)存在的路徑的方法。fillText(text, x, y)繪制實心文本strokeText(text, x, y)繪制空心文本beginPath()創(chuàng)建一個新的路徑closePath()將筆點返回到當(dāng)前子路徑起始點clip()將當(dāng)前創(chuàng)建的路徑設(shè)置為當(dāng)前剪切路徑save()保存 canvas 全部狀態(tài)restore()彈出頂端的狀態(tài)
四、地理API
允許網(wǎng)站或應(yīng)用基于用戶的地理位置提供定制的信息。
4.1 方法
getCurrentPosition(success, error, options)確定設(shè)備的位置并返回一個攜帶位置信息的 Position 對象。watchPosition(success, error, options)設(shè)備的地理位置發(fā)生改變的時候自動被調(diào)用,該方法會返回一個 IDclearWatch(id)注銷監(jiān)聽器
代碼示例：
<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 = `經(jīng)度:${res.coords.longitude}`document.querySelector(".latitude").innerText = `緯度:${res.coords.latitude}`},err=>{console.log(err);},{timeout:3000});//3.在設(shè)備的地理位置發(fā)生改變的時候自動被調(diào)用let id = navigator.geolocation.watchPosition(res=>{console.log(res.coords);},err=>{console.log(err);})//4.注銷監(jiān)聽器navigator.geolocation.clearWatch(id);</script>