Web前端入門級教程學(xué)習(xí)（五）_第1頁
Web前端入門級教程學(xué)習(xí)（五）_第2頁
Web前端入門級教程學(xué)習(xí)（五）_第3頁
Web前端入門級教程學(xué)習(xí)（五）_第4頁
Web前端入門級教程學(xué)習(xí)（五）_第5頁
已閱讀5頁，還剩33頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

Web前端入門教學(xué)（五）一、新增獲取/操作元素1、新增獲取元素 document.querySelector("選擇器"); document.querySelectorAll("選擇器");2、新增操作元素類樣式document.querySelector("選擇器").classList.add("類樣式");//添加類樣式document.querySelector("選擇器").classList.remove("類樣式");//移除類樣式document.querySelector("選擇器").classList.toggle("類樣式");//反轉(zhuǎn)類樣式（有則刪除，無則添加）document.querySelector("選擇器").classList.contains("類樣式");//是否包含類樣式document.querySelector("選擇器").classList.item(索引);//獲取類樣式PS：classList的方式與document.querySelector("選擇器").className的方法對比：classList的方法添加和刪除不會清除原來的class類樣式，只是在其基礎(chǔ)上添加和刪除。而className的方式直接對源類樣式操作，容易遺漏和誤操作。示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.red{color:red;}.green{color:green;}.blue{color:blue;}.underline{text-decoration:underline;}</style></head><body><ul><li>第一個li標(biāo)簽</li><liclass="green">第二個li標(biāo)簽</li><li>第三個li標(biāo)簽</li><li>第四個li標(biāo)簽</li></ul><inputtype="button"value="添加樣式"id="btn1"><inputtype="button"value="刪除樣式"id="btn2"><inputtype="button"value="反轉(zhuǎn)樣式"id="btn3"><inputtype="button"value="判斷樣式"id="btn4"><script>//點(diǎn)擊第一個按鈕給第一個標(biāo)簽添加樣式document.querySelector("#btn1").onclick=function(){document.querySelector("li").classList.add("red");document.querySelector("li").classList.add("underline");//獲取樣式：獲取元素的樣式，索引代表樣式的位置varclass1=document.querySelector("li").classList.item(0);varclass2=document.querySelector("li").classList.item(1);console.log(class1+"====="+class2);//red=====underline};//點(diǎn)擊第二個按鈕給第二個標(biāo)簽刪除樣式document.querySelector("#btn2").onclick=function(){document.querySelectorAll("li")[1].classList.remove("green");};//點(diǎn)擊第三個按鈕給第三個標(biāo)簽反轉(zhuǎn)樣式document.querySelector("#btn3").onclick=function(){document.querySelectorAll("li")[2].classList.toggle("blue");};//點(diǎn)擊第四個按鈕判斷第四個標(biāo)簽是否包含某樣式document.querySelector("#btn4").onclick=function(){varflag=document.querySelectorAll("li")[3].classList.contains("red");console.log(flag);};</script></body></html>二、自定義屬性定義：以“data-”開頭，后面必須有至少一個字符，多個單詞間用“-”連接。建議：1、名稱中應(yīng)該都是用小寫字符；2、名稱中不要包含任何特殊符號；3、名稱中不要由純數(shù)字組成。<pdata-user-name="Daotin"></p>獲取自定義屬性的值<script> varpObj=document.querySelector("p"); varvalue=p.dataset["userName"]; console.log(value);//Daotin</script>使用"元素.dataset[]"的方式獲取自定義屬性的值。其中自定義屬性的名稱要使用駝峰命名法填寫。三、網(wǎng)絡(luò)監(jiān)聽接口ononline：網(wǎng)絡(luò)連通時觸發(fā)onoffline：網(wǎng)絡(luò)斷開時觸發(fā) window.addEventListener("online",function(){}); window.addEventListener("offline",function(){});四、全屏接口全屏操作的主要方法和屬性：1、requestFullScreen();開啟全屏顯示但是不同的瀏覽器需要添加的前綴不同：chrome：webkit，firefox：moz，IE：ms于是就變成了

webkitRequestFullScreen()，

mozRequestFullScreen()，

msRequestFullScreen()。由于使用的方法不同，所以要做兼容性處理。2、cancelFullScreen();退出全屏顯示退出全屏的操作也要加前綴，并且調(diào)用其的元素只能是ducument，而不能是其他元素。3、fullscreenElement；是否是全屏狀態(tài)判斷是否為全屏狀態(tài)也要加前綴，并且調(diào)用其的元素只能是ducument，而不能是其他元素。（注意只有firefox是駝峰寫法，最符合html5標(biāo)準(zhǔn)）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><div><imgsrc="images/l1.jpg"><br><inputtype="button"value="進(jìn)入全屏"id="btn1"><inputtype="button"value="退出全屏"id="btn2"><inputtype="button"value="是否全屏"id="btn3"></div><script>//開啟全屏顯示document.querySelector("#btn1").addEventListener("click",function(){vardivObj=document.querySelector("div");if(divObj.requestFullscreen){divObj.requestFullscreen();}elseif(divObj.webkitRequestFullScreen){divObj.webkitRequestFullScreen();}elseif(divObj.mozRequestFullScreen){divObj.mozRequestFullScreen();}elseif(divObj.msRequestFullScreen){divObj.msRequestFullScreen();}},false);//退出全屏顯示document.querySelector("#btn2").addEventListener("click",function(){if(document.cancelFullscreen){document.cancelFullscreen();}elseif(document.webkitCancelFullScreen){document.webkitCancelFullScreen();}elseif(document.mozCancelFullScreen){document.mozCancelFullScreen();}elseif(document.msCancelFullScreen){document.msCancelFullScreen();}},false);//是否是全屏狀態(tài)document.querySelector("#btn3").addEventListener("click",function(){if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement){console.log("yes");}else{console.log("no");}},false);</script></body></html>五、應(yīng)用程序緩存主要應(yīng)用在：當(dāng)離線模式下，頁面需要選擇性緩存一些內(nèi)容的時候。<!DOCTYPEhtml><!--manifest="應(yīng)用程序緩存清單文件的路徑建議文件的擴(kuò)展名是appcache,這個文件的本質(zhì)就是一個文本文件"--><htmllang="en"manifest="demo.appcache"><head><metacharset="UTF-8"><title>Title</title><style>img{width:300px;display:block;}</style></head><body><imgsrc="../images/l1.jpg"alt=""><imgsrc="../images/l2.jpg"alt=""><imgsrc="../images/l3.jpg"alt=""><imgsrc="../images/l4.jpg"alt=""></body></html>demo.appcache文件CACHEMANIFEST#上面一句代碼必須是當(dāng)前文檔的第一句#后面寫注釋#需要緩存的文件清單列表CACHE:#下面就是需要緩存的清單列表../images/l1.jpg../images/l2.jpg#*:代表所有文件#配置每一次都需要重新從服務(wù)器獲取的文件清單列表NETWORK:../images/l3.jpg#配置如果文件無法獲取則使用指定的文件進(jìn)行替代FALLBACK:../images/l4.jpg../images/banner_1.jpg#/:代表所有文件六、文件讀取接口FileReader：主要是讀取文件內(nèi)容。使用

newFileReader

生成的對象有下列幾個方法，用于讀取文件：readAsText()：讀取文本文件，返回文本字符串，默認(rèn)編碼是UTF-8readAsBinaryString()：讀取任意類型的文件，返回二進(jìn)制字符串。這個方法不是用來讀取文件展示給用戶看，而是存儲文件。例如：讀取文件的內(nèi)容，獲取二進(jìn)制數(shù)據(jù)，傳遞給后臺，后臺接收了數(shù)據(jù)之后，再將數(shù)據(jù)存儲。readAsDataURL()：讀取文件獲取一段以data開頭的字符串，這段字符串的本質(zhì)就是DataURL。DataURL是一種將文件(這個文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的一種格式。DataURL是將資源轉(zhuǎn)換為base64編碼的字符串形式，并且將這些內(nèi)容直接存儲在url中，這樣做可以優(yōu)化網(wǎng)站的加載速度和執(zhí)行效率。abort()：中斷文件讀取。比如現(xiàn)在有一需求，選擇圖片并實時顯示（類似在網(wǎng)頁上更換頭像，可以實時預(yù)覽圖片）：<body><!--需求：即時預(yù)覽：即時：當(dāng)用戶選擇完圖片之后就立刻進(jìn)行預(yù)覽的處理>>onchange預(yù)覽：通過文件讀取對象的readAsDataURL()完成--><formaction="">文件：<inputtype="file"name="myFile"id="myFile"onchange="getFileContent();"><br><div></div><inputtype="submit"></form><imgsrc=""alt=""><script>vardiv=document.querySelector("div");functiongetFileContent(){/*1.創(chuàng)建文件讀取對象*/varreader=newFileReader();/*2.讀取文件，獲取DataURL*2.1.說明沒有任何的返回值:void：但是讀取完文件之后，它會將讀取的結(jié)果存儲在文件讀取對象的result中*2.2.需要傳遞一個參數(shù)（binarylargeobject）:文件(圖片或者其它可以嵌入到文檔的類型)*2.3:文件存儲在file表單元素的files屬性中，它是一個數(shù)組，當(dāng)有multiple屬性的時候這個數(shù)組的值會有多個。*/varfile=document.querySelector("#myFile").files[0];reader.readAsDataURL(file);/*獲取數(shù)據(jù)*//*FileReader提供一個完整的事件模型，用來捕獲讀取文件時的狀態(tài)*onabort:讀取文件中斷片時觸發(fā)*onerror:讀取錯誤時觸發(fā)*onload:文件讀取完成且成功時觸發(fā)*onloadend:文件讀取完成時觸發(fā)，無論成功還是失敗*onloadstart:開始讀取時觸發(fā)*onprogress:讀取文件過程中持續(xù)觸發(fā)*/reader.onload=function(){//console.log(reader.result);/*展示*/document.querySelector("img").src=reader.result;} //模擬進(jìn)度條顯示reader.onprogress=function(e){varpercent=(e.loaded/e.total)*100+"%";div.style.width=percent;}}</script></body>onchange：就是當(dāng)文件內(nèi)容發(fā)生變化時觸發(fā)的事件。七、地理定位接口方法：//參數(shù)1：獲取地理信息成功之后的回調(diào)函數(shù)//參數(shù)2：獲取地理信息失敗之后的回調(diào)函數(shù)//參數(shù)3：調(diào)整獲取當(dāng)前地理信息的方式//enableHighAccuracy:true/false:是否使用高精度//timeout:設(shè)置超時時間，單位ms//maximumAge:可以設(shè)置瀏覽器重新獲取地理信息的時間間隔，單位是msnavigator.geolocation.getCurrentPosition(success,error,option);示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.de{width:300px;height:300px;border:1pxsolid#ddd;}</style></head><body><divid="demo"class="de"></div><script>varx=document.getElementById("demo");functiongetLocation(){/*能力測試*/if(navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition,showError,{/*enableHighAccuracy:true,timeout:3000*/});}else{x.innerHTML="Geolocationisnotsupportedbythisbrowser.";}}/*成功獲取定位之后的回調(diào)*/functionshowPosition(position){x.innerHTML="Latitude:"+position.coords.latitude+"<br/>Longitude:"+position.coords.longitude;}/*獲取定位失敗之后的回調(diào)*/functionshowError(error){switch(error.code){caseerror.PERMISSION_DENIED:x.innerHTML="UserdeniedtherequestforGeolocation."break;caseerror.POSITION_UNAVAILABLE:x.innerHTML="Locationinformationisunavailable."break;caseerror.TIMEOUT:x.innerHTML="Therequesttogetuserlocationtimedout."break;caseerror.UNKNOWN_ERROR:x.innerHTML="Anunknownerroroccurred."break;}}getLocation();</script></body></html>獲取地理位置成功，將會把獲取到的地理信息以參數(shù)的形式傳遞給回調(diào)函數(shù)：position.coords.latitude緯度position.coords.longitude經(jīng)度position.coords.accuracy精度position.coords.altitude海拔高度注意：由于地理位置屬于用戶的隱私信息，一般瀏覽器不允許獲取，只有在瀏覽器中開啟之后才能夠獲取。八、拖拽接口元素拖拽事件：ondrag

：應(yīng)用于拖拽元素，整個拖拽過程都會持續(xù)調(diào)用；

ondragstart：應(yīng)用于拖拽元素，當(dāng)拖拽開始時調(diào)用；

ondragleave：應(yīng)用于拖拽元素，拖拽過程中，當(dāng)鼠標(biāo)離開拖拽元素范圍時調(diào)用；

ondragend

：應(yīng)用于拖拽元素，當(dāng)拖拽結(jié)束時調(diào)用。目標(biāo)拖拽事件：ondragenter：應(yīng)用于目標(biāo)元素，當(dāng)拖拽元素進(jìn)入時調(diào)用；

ondragover：應(yīng)用于目標(biāo)元素，當(dāng)停留在目標(biāo)元素上時調(diào)用；

ondrop：應(yīng)用于目標(biāo)元素，當(dāng)在目標(biāo)元素上松開鼠標(biāo)時調(diào)用；

ondragleave：應(yīng)用于目標(biāo)元素，當(dāng)鼠標(biāo)離開目標(biāo)元素時調(diào)用。示例：將一個div中的p標(biāo)簽拖拽到另一個p標(biāo)簽中<body><divclass="div1"id="div1"><!--在h5中，如果想拖拽元素，就必須為元素添加draggable="true".圖片和超鏈接默認(rèn)就可以拖拽--><pid="pe"draggable="true">試著把我拖過去</p></div><divclass="div2"id="div2"></div><script>/*學(xué)習(xí)拖拽，主要就是學(xué)習(xí)拖拽事件*/varp=document.querySelector("#pe");vardiv2=document.querySelector("#div2");//應(yīng)用于被拖拽元素p.ondragstart=function(){console.log("ondragstart");}p.ondragend=function(){console.log("ondragend");}p.ondragleave=function(){console.log("被拖拽元素：ondragleave");}p.ondrag=function(){console.log("ondrag");}//應(yīng)用于目標(biāo)元素的事件div2.ondragenter=function(){console.log("ondragenter");}div2.ondragover=function(e){console.log("ondragover");/*如果想觸發(fā)ondrop事件，那么就必須在這個位置阻止瀏覽器的默認(rèn)行為*/e.preventDefault();}/*瀏覽器默認(rèn)會阻止ondrop事件：我們必須在ondragover中阻止瀏覽器的默認(rèn)行為*/div2.ondrop=function(){console.log("ondrop");/*添加被拖拽的元素到當(dāng)前目標(biāo)元素*/div2.appendChild(p);}div2.ondragleave=function(){console.log("目標(biāo)元素：ondragleave");}</script></body>1、被拖拽的元素必須添加

draggable="true"

屬性。2、瀏覽器默認(rèn)會阻止目標(biāo)元素的ondrop事件：我們必須在目標(biāo)元素的ondragover中阻止瀏覽器的默認(rèn)行為（使用事件參數(shù)對象的

preventDefault()方法），才能將拖拽的元素放到目標(biāo)元素中。**遺留問題：**如果有多個div，那么每個div都必須寫ondragover和ondrop事件觸發(fā)的處理函數(shù)，也就是只能拖拽指定的元素到指定的元素中，這樣代碼的可用性就很低了。**分析問題：**既然有多個被拖拽元素和多個目標(biāo)元素存在，這些元素都存在于document中的，那么可不可以給document添加這些事件呢？答案是可以的。<body><divclass="div1"id="div1"><pid="pe"draggable="true">試著把我拖過去</p><pid="pe1"draggable="true">試著也把我拖過去</p></div><divclass="div2"id="div2"></div><divclass="div3"id="div3"></div><script>varobj=null;//當(dāng)前被拖拽的地元素//應(yīng)用于被拖拽元素的事件document.ondragstart=function(e){obj=e.target;}//應(yīng)用于目標(biāo)元素的事件document.ondragover=function(e){/*如果想觸發(fā)ondrop事件，那么就必須在這個位置阻止瀏覽器的默認(rèn)行為*/e.preventDefault();}/*瀏覽器默認(rèn)會阻止ondrop事件：我們必須在ondragover中阻止瀏覽器的默認(rèn)行為*/document.ondrop=function(e){/*添加元素*/e.target.appendChild(obj);}</script></body>在事件參數(shù)對象中有一個target屬性，其值為被拖拽的元素對象。問題解決了，但是，又是但是......，但是一般少使用全局變量，全局變量誰都可以修改，容易誤操作。在事件參數(shù)對象中有一個

dataTransfer

屬性，通過

dataTransfer

來實現(xiàn)數(shù)據(jù)的存儲與獲取。dataTransfer有兩個方法：setData(format,data);用于存儲數(shù)據(jù)；getData(format,data);用于取出數(shù)據(jù)；（取出數(shù)據(jù)必須在目標(biāo)元素的ondrop事件中，其他事件中無法取到數(shù)據(jù)）format:數(shù)據(jù)的類型：text/html

，text/uri-list

Data:數(shù)據(jù):一般來說是字符串值<body><divclass="div1"id="div1"><!--在h5中，如果想拖拽元素，就必須為元素添加draggable="true".圖片和超鏈接默認(rèn)就可以拖拽--><pid="pe"draggable="true">試著把我拖過去</p><pid="pe1"draggable="true">試著也把我拖過去</p></div><divclass="div2"id="div2"></div><divclass="div3"id="div3"></div><script>//應(yīng)用于被拖拽元素的事件document.ondragstart=function(e){//把拖拽元素的id值存儲起來e.dataTransfer.setData("text/html",e.target.id);};//應(yīng)用于目標(biāo)元素的事件document.ondragover=function(e){/*如果想觸發(fā)ondrop事件，那么就必須在這個位置阻止瀏覽器的默認(rèn)行為*/e.preventDefault();};/*瀏覽器默認(rèn)會阻止ondrop事件：我們必須在ondragover中阻止瀏覽器的默認(rèn)行為*/document.ondrop=function(e){/*添加元素*//*通過e.dataTransfer.setData存儲的數(shù)據(jù)，只能在drop事件中獲取*/varid=e.dataTransfer.getData("text/html");//通過id方式添加元素e.target.appendChild(document.getElementById(id));};</script></body>九、Web存儲用戶在瀏覽網(wǎng)頁的時候，可能需要存儲一些數(shù)據(jù)在本地，之前是采用Cookie的方式存儲，但是Cookie只能存儲大小為4k以內(nèi)的數(shù)據(jù)，再多的數(shù)據(jù)就存儲不了。并且Cookie的解析也是很復(fù)雜的。到了h5階段，又提供了兩種方式來存儲web數(shù)據(jù)：sessionStorage和localStorage。1、sessionStorage

會話存儲sessionStorage的使用：將存儲數(shù)據(jù)到本地。存儲的容量

5MB

左右。注意：sessionStorage的存儲特點(diǎn)：這個數(shù)據(jù)本質(zhì)是存儲在當(dāng)前頁面的內(nèi)存中，意味著其它頁面和瀏覽器無法獲取數(shù)據(jù)。它的生命周期為關(guān)閉當(dāng)前頁面時，數(shù)據(jù)會自動清除。提供的方法：setItem(key,value)

：存儲數(shù)據(jù)，以鍵值對的方式存儲，getItem(key)

：獲取數(shù)據(jù)，通過指定名稱的key獲取對應(yīng)的value值，removeItem(key)

：刪除數(shù)據(jù)，通過指定名稱key刪除對應(yīng)的值，clear()

：清空所有存儲的內(nèi)容。sessionStorage.length，獲取存儲數(shù)據(jù)的個數(shù)，然后獲取其中的key：vartk=sessionStorage.key(i)然后獲取其中的value：sessionStorage.getItem(tk)示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><pre>sessionStorage的使用</pre><br><inputtype="text"id="userName"><br><inputtype="button"value="設(shè)置數(shù)據(jù)"id="setData"><inputtype="button"value="獲取數(shù)據(jù)"id="getData"><inputtype="button"value="刪除數(shù)據(jù)"id="removeData"><script>/*存儲數(shù)據(jù)*/document.querySelector("#setData").onclick=function(){/*獲取用戶名*/varname=document.querySelector("#userName").value;/*存儲數(shù)據(jù)*/window.sessionStorage.setItem("userName",name);};/*獲取數(shù)據(jù)*/document.querySelector("#getData").onclick=function(){/*如果找不到對應(yīng)名稱的key,那么就會獲取null*/varname=window.sessionStorage.getItem("userName");alert(name);};/*刪除數(shù)據(jù)*/document.querySelector("#removeData").onclick=function(){/*在刪除的時候如果key值錯誤，不會報錯，但是也不會刪除數(shù)據(jù)*/window.sessionStorage.removeItem("userName");};</script></body></html>1、獲取數(shù)據(jù)的時候，如果找不到對應(yīng)名稱的key，那么獲取的值為null。2、刪除數(shù)據(jù)的時候，如果key值錯誤，不會報錯，但是也不會刪除數(shù)據(jù)。2、localStorage

本地存儲localStorage的使用：存儲的內(nèi)容大概

20MB

大小不同瀏覽器不能共享數(shù)據(jù)。但是在同一個瀏覽器的不同窗口中可以共享數(shù)據(jù)；永久生效，它的數(shù)據(jù)是存儲在硬盤上，并不會隨著頁面或者瀏覽器的關(guān)閉而清除。如果想清除，必須手動清除setItem(key,value):存儲數(shù)據(jù)，以鍵值對的方式存儲

getItem(key):獲取數(shù)據(jù)，通過指定名稱的key獲取對應(yīng)的value值

removeItem(key):刪除數(shù)據(jù)，通過指定名稱key刪除對應(yīng)的值

clear():清空所有存儲的內(nèi)容示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><pre>localStorage的使用：</pre><br><inputtype="text"id="userName"><br><inputtype="button"value="設(shè)置數(shù)據(jù)"id="setData"><inputtype="button"value="獲取數(shù)據(jù)"id="getData"><inputtype="button"value="刪除數(shù)據(jù)"id="removeData"><script>document.querySelector("#setData").onclick=function(){varname=document.querySelector("#userName").value;/*使用localStorage存儲數(shù)據(jù)*/window.localStorage.setItem("userName",name);};/*獲取數(shù)據(jù)*/document.querySelector("#getData").onclick=function(){varname=window.localStorage.getItem("userName");alert(name);};/*清除數(shù)據(jù)*/document.querySelector("#removeData").onclick=function(){window.localStorage.removeItem("userName");};</script></body></html>十、自定義播放器我們知道不同的瀏覽器的音頻視頻的播放器控件顯示樣式有差異，那么我們怎么做一個在任何瀏覽器下都有相同樣式的播放器呢？常用方法：load()

加載，play()播放，pause()

暫停。注意：jQuery中沒有提供對視頻播放控件的方式，所以如果使用jQuery操作元素，必須將其轉(zhuǎn)為原生js的方式來調(diào)用這些方法。常用屬性：currentTime：視頻播放的當(dāng)前進(jìn)度duration：視頻的總時長paused：視頻播放的狀態(tài)常用事件：oncanplay：事件在用戶可以開始播放視頻/音頻時出觸發(fā)ontimeupdate：通過該事件報告當(dāng)前的播放進(jìn)度onended：播放完時觸發(fā)示例代碼：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="/font-awesome/4.7.0/css/font-awesome.css"><linkrel="stylesheet"href="./css.css"></head><body><h3class="playerTitle">自定義視頻播放器</h3><divclass="player"><videosrc="../mp4/2.mp4"></video><divclass="controls"><ahref="javascript:void(0);"class="switchfafa-play"></a><ahref="javascript:void(0);"class="expandfafa-arrows-alt"></a><divclass="progress"><!--總時長--><divclass="bar"></div><!--用于點(diǎn)擊選擇進(jìn)度--><divclass="loaded"></div><!--已經(jīng)加載的--><divclass="elapse"></div><!--已經(jīng)播放的時長--></div><divclass="time"><spanclass="currentTime">00:00:00</span>\<spanclass="totalTime">00:00:00</span></div></div></div><scriptsrc="./jquery.min.js"></script><script>$(function(){//獲取播放器文件varvideo=$("video")[0];//點(diǎn)擊播放按鈕播放視頻文件$(".switch").click(function(){if(video.paused){video.play();}else{video.pause();}$(this).toggleClass("fa-playfa-pause");});//全屏操作$(".expand").click(function(){if(video.requestFullscreen){video.r

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論