《JavaScript程序設計案例教程》課件-案例5_第1頁
《JavaScript程序設計案例教程》課件-案例5_第2頁
《JavaScript程序設計案例教程》課件-案例5_第3頁
《JavaScript程序設計案例教程》課件-案例5_第4頁
《JavaScript程序設計案例教程》課件-案例5_第5頁
已閱讀5頁，還剩52頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

案例五、音樂播放器學習目標知識鏈接案例實現(xiàn)效果演示目錄學完本章節(jié)應該能做到的事情學習目標壹學習目標會轉(zhuǎn)換字符串大小寫。能獲取和修改DOM元素的屬性值。掌握encodeURIComponent和decodeURIComponent。PPT模板/moban/掌握className和classList。掌握數(shù)據(jù)類型轉(zhuǎn)換。掌握audio的用法。效果演示完成本案例應該具備的知識知識鏈接貳知識鏈接列表PPT模板/moban/字符串大小寫轉(zhuǎn)換。獲取和修改DOM元素的屬性值。encodeURIComponent和decodeURIComponent。className和classList。數(shù)據(jù)類型轉(zhuǎn)換。audio音樂播放。字符串大小寫轉(zhuǎn)換1為什么要進行大小寫轉(zhuǎn)換？通常數(shù)值比大小字符串要怎么比較？比長短？比大??？ 比大??！沒錯，比的就是字符串里每個字符的ASCII碼大小，比如‘F’==70‘f’==102，‘f’>‘F’，所以“fish”>“Fish”其實這樣的比較大小沒有多大意義，字符串的比較我們更重視是否相等！統(tǒng)一的大寫或小寫更有利于比較是否相等。字符串大小寫轉(zhuǎn)換1toLowerCase將字符串轉(zhuǎn)為小寫語法：str.toLowerCase()str表示是一個String對象；該方法沒有參數(shù)；返回一個字符串，該字符串中的字母被轉(zhuǎn)換為小寫字母。varstr="HeLLoWOrld!"document.write(str.toLowerCase());//輸出結果：helloworld!toLowerCase（toLowerCase.html）字符串大小寫轉(zhuǎn)換1toUpperCase將字符串轉(zhuǎn)為大寫語法：str.toUpperCase()str表示是一個String對象；該方法沒有參數(shù)；返回一個字符串，該字符串中的字母被轉(zhuǎn)換為大寫字母。varstr1="CraftingYourResearchFuture"varstr2=str1.toUpperCase()document.write(str1+'<br>'+str2)//輸出結果：//CraftingYourResearchFuture//CRAFTINGYOURRESEARCHFUTUREtoUpperCase（toUpperCase.html）獲取和修改DOM元素的屬性值2getAttribute()方法通過元素節(jié)點的屬性名稱獲取屬性的值。語法：elementNode.getAttribute(name)參數(shù)：elementNode是使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點；name是要想查詢的元素節(jié)點的屬性名字。返回值：指定屬性的值獲取和修改DOM元素的屬性值2<h1id="superlink"title="獲取標簽的屬值”onclick="getattr()">

點擊我，獲取標簽的屬值</h1><scripttype="text/javascript"> functiongetattr(){ varnode=document.getElementById("superlink"); varattr1=node.getAttribute("id"); varattr2=node.getAttribute("title"); console.log("h1標簽的ID:"+attr1); console.log("h1標簽的title:"+attr2); }</script>getAttribute（getAttribute.html）獲取和修改DOM元素的屬性值2setAttribute()方法通過元素節(jié)點的屬性名稱設置（修改）屬性的值。語法：elementNode.setAttribute(name,value)參數(shù)：elementNode是使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點；name是要想設置的元素節(jié)點的屬性名字；value是屬性的新值。返回值：無獲取和修改DOM元素的屬性值2<h1id="superlink"title="H標簽中的老大"onclick="setattr()">

我在H標簽里的地位是不可憾動的</h1><scripttype="text/javascript"> functionsetattr(){ varnode=document.getElementById("superlink"); node.setAttribute("title","我有5個小弟"); }</script>setAttribute（setAttribute.html）encodeURIComponent和decodeURIComponent3用途： 編碼解碼URL中的參數(shù)。一般用get方式發(fā)送數(shù)據(jù)，數(shù)據(jù)的格式的形式如：name1=value1；如果參數(shù)值中就包含=或&這種特殊字符的時候該怎么辦？比如value1的值是“va&lu=e1”字符串，那么實際在傳輸過程中就會變成這樣“name1=va&lu=e1”。我們的本意是就只有一個鍵值對，但是服務端會解析成兩個鍵值對，這樣就產(chǎn)生了歧義。

如何解決上述問題帶來的歧義呢？解決的辦法就是對參數(shù)進行URL編碼

URL編碼只是簡單的在特殊字符的各個字節(jié)前加上%，例如，對上述會產(chǎn)生奇異的字符進行URL編碼后結果：“name1=va%26lu%3D”，這樣服務端會把緊跟在“%”后的字節(jié)當成普通的字節(jié)，就是不會把它當成各個參數(shù)或鍵值對的分隔符。encodeURIComponent和decodeURIComponent3encodeURIComponent()函數(shù)可把字符串作為URI組件進行編碼。語法：encodeURIComponent(Url)參數(shù)：Url是一個需要進行編碼的字符串。返回值為編碼后的文本。encodeURIComponent和decodeURIComponent3encodeURIComponent（encodeURIComponent.html）原文是：<br>encodeURIComponent案例<br>編碼后：<br><scripttype="text/javascript"> document.write(encodeURIComponent("encodeURIComponent案例"));</script>encodeURIComponent和decodeURIComponent3decodeURIComponent()函數(shù)可對encodeURIComponent()函數(shù)編碼的URI進行解碼。語法：decodeURIComponent(uri)參數(shù)：uri是一個字符串，含有編碼URI組件或其他要解碼的文本。返回值為解碼后的文本。encodeURIComponent和decodeURIComponent3decodeURIComponent（decodeURIComponent.html）解碼前字符串：<br>/s?wd=encodeURIComponent%20%E6%A1%88%E4%BE%8B<br>解碼后字符串：<br><scripttype="text/javascript"> document.write(decodeURIComponent("/s?wd=encodeURIComponent%20%E6%A1%88%E4%BE%8B"));</script>className和classList4語法：str.charAt(index)index:0到字符串長度-1的一個整數(shù)。返回：字符串中的字符從左向右所在位置的索引，第一個字符的索引值為0，最后一個字符（假設該字符位于字符串stringName中）的索引值為stringName.length-1。如果指定的index值超出了該范圍，則返回一個空字符串。str="helloworld!";//字符串總長為12//返回第9個字符：rconsole.log(str.charAt(8));//超出長度，返回空串，不是nullconsole.log(str.charAt(16));charAt（charAt.html）className和classList40102相同點：獲取或修改元素所引用的CSS類區(qū)別：className返回的是字符串classList返回的是集合className和classList4className屬性設置或返回元素的class屬性。語法：object.className=classnameclassName和classList4<head><metacharset="utf-8"><title>classname</title><style> input{ border-radius:8px; padding:10px; } .btn1{background:#187CF4;} .btn2{background:#58DF5F;} </style></head>

<body><inputid="btn"type="button"value="你過來啊"class="btn1"/><script>

document.querySelector("#btn").onclick=function(){ this.className="btn2"; }</script></body>className（className.html）className和classList4classList屬性返回元素類名，該屬性用于在元素中添加，移除及切換CSS類，classList是只讀屬性。它具有的方法如下：方法名信用.add()新增類名.remove()移除類名.toggle()切換類名（有就減，沒有就加）.contains()判斷是否包含某個類名className和classList4<script>window.onload=function(){ varrows=document.querySelectorAll('tr'); [].forEach.call(rows,function(row){ row.onclick=clickRow; row.onmouseover=function(){ this.classList.toggle("bg"); }; });};functionclickRow(){ if(this.classList.contains('blue')) this.classList.remove('blue'); else this.classList.add('blue’);}</script>classList演示（classList.html）<head><styletype="text/css"> .bg{background:#CCC;} .blue{ color:blue; background:#00FF99; }</style></head><body><tableborder="1"cellspacing="0“ cellpadding="0"> <tr><th>Header</th></tr> <tr> <td>點擊某行有選中效果</td> </tr> <tr><td>Data1</td></tr> <tr><td>Data2</td></tr> <tr><td>Data3</td></tr></table></body>數(shù)據(jù)類型轉(zhuǎn)換5Number()方法parseInt()方法parseFloat()方法隱式轉(zhuǎn)換(*、-、/、++、--數(shù)學運算符)01轉(zhuǎn)成字符串02轉(zhuǎn)為數(shù)值類型對象的toString()方法String()強制類型轉(zhuǎn)換隱式轉(zhuǎn)換(+)Boolean()方法隱式轉(zhuǎn)換(!、條件表達式)注意：0、空字符串、null、undefined、NaN會轉(zhuǎn)換成false，其它都會轉(zhuǎn)換成true。03轉(zhuǎn)為布爾類型數(shù)據(jù)類型轉(zhuǎn)換5轉(zhuǎn)換成字符串（toString.html）vararr=[3,5,9];console.log(arr.toString());//結果：3,5,9varb=true;console.log(b.toString());//結果：truevard=20;console.log(d.toString());//結果：20console.log(d.toString(10));//結果：20console.log(d.toString(2));//結果：10100console.log(d.toString(16));//結果：14注意：null和undefined值沒有這個方法。數(shù)據(jù)類型轉(zhuǎn)換5轉(zhuǎn)換成字符串（String.html）document.write(String(null)+'<br>');//結果：nulldocument.write(String(true)+'<br>');//結果：truedocument.write(String(undefined)+'<br>');//結果：undefineddocument.write(String([1,2,3])+'<br>');//結果：1,2,3document.write(String({name:'hello'})+'<br>');//結果：[objectObject]document.write(String(30)+'<br>');//結果：30console.log(typeof(100+””));加號任一側(cè)為字符串時，結果為字符串數(shù)據(jù)類型轉(zhuǎn)換5轉(zhuǎn)換成數(shù)值類型（Number.html）console.log(Number(true));//輸出1console.log(Number("abc100"));//輸出NaNconsole.log(Number("100abc"));//輸出NaNconsole.log(parseInt(true));//輸出NaNconsole.log(parseInt("abc100"));//輸出NaNconsole.log(parseInt("100abc"));//輸出100console.log(parseFloat("11.8px"));//輸出11.8console.log(parseFloat("px11.8"));//輸出NaNconsole.log("10"*3);//輸出30console.log(100-"10");//輸出90console.log(100/"10");//輸出10有不是數(shù)值的字符，返回NaN忽略字符串前面的空格，如果第一個字符不是數(shù)字字符或者負號，parseInt()就會返回NaN隱式轉(zhuǎn)換數(shù)據(jù)類型轉(zhuǎn)換5轉(zhuǎn)換成布爾類型（boolean.html）console.log(Boolean(6));//輸出trueconsole.log(Boolean("false"));//輸出trueconsole.log(Boolean(0));//輸出falsevara=6;varb=null;varc="";if(a)//此分支執(zhí)行{ console.log("a當true使用");}if(b)//此分支不執(zhí)行{ console.log("b當true使用");}if(!c)//此分支執(zhí)行{ console.log("c當false使用");}隱式轉(zhuǎn)換audio音樂播放6audio標簽<audio>標簽可以在HTML5瀏覽器中播放音頻文件。表5-1HTML5中audio標簽的新屬性屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。因為安全原則，有的瀏覽器已經(jīng)禁用此屬性的效果。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現(xiàn)該屬性，則每當音頻結束時重新開始播放。mutedmuted規(guī)定視頻輸出應該被靜音。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的音頻的URL。audio音樂播放6<audiocontrols> <sourcesrc="./audioplayer/lxwmm.mp3"type="audio/mpeg">

您的瀏覽器不支持audio標簽。</audio><audiocontrolssrc="./audioplayer/lxwmm.mp3">

您的瀏覽器不支持audio標簽。</audio>audio標簽的兩種使用方式（audio.html）audio音樂播放6使用Audio對象Audio對象是HTML5中的新對象，表示的是HTML<audio>元素，因此audio標簽具有的屬性Audio對象也有。表5-2Audio對象一些屬性屬性描述currentSrc返回當前音頻的URL。currentTime設置或返回音頻中的當前播放位置（以秒計）。defaultMuted設置或返回音頻默認是否靜音。defaultPlaybackRate設置或返回音頻的默認播放速度。duration返回音頻的長度（以秒計）。ended返回音頻的播放是否已結束。error返回表示音頻錯誤狀態(tài)的MediaError對象。paused設置或返回音頻是否暫停。playbackRate設置或返回音頻播放的速度。readyState返回音頻當前的就緒狀態(tài)。seeking返回用戶當前是否正在音頻中進行查找。volume設置或返回音頻的音量。audio音樂播放6表5-3Audio對象一些方法方法描述fastSeek()在音頻播放器中指定播放時間。getStartDate()返回新的Date對象，表示當前時間線偏移量。load()重新加載音頻元素。play()開始播放音頻。pause()暫停當前播放的音頻。audio音樂播放6表5-4Audio對象的事件事件描述canplay當瀏覽器可以開始播放媒體時，發(fā)生此事件。durationchange媒體時長改變時發(fā)生此事件。ended在媒體播放到盡頭時發(fā)生此事件。loadeddata媒體數(shù)據(jù)加載后，發(fā)生此事件。loadedmetadata加載元數(shù)據(jù)（比如尺寸和持續(xù)時間）時，發(fā)生此事件。loadstart當瀏覽器開始查找指定的媒體時，發(fā)生此事件。pause當媒體被用戶暫?；蛞跃幊谭绞綍和r，發(fā)生此事件。play當媒體已啟動或不再暫停時，發(fā)生此事件。playing在媒體被暫停或停止以緩沖后播放時，發(fā)生此事件。progress當瀏覽器正處于獲得媒體數(shù)據(jù)的過程中時，發(fā)生此事件。ratechange媒體播放速度改變時發(fā)生此事件。seeked當用戶完成移動/跳到媒體中的新位置時，發(fā)生該事件。seeking當用戶開始移動/跳到媒體中的新位置時，發(fā)生該事件。suspend當瀏覽器有意不獲取媒體數(shù)據(jù)時，發(fā)生此事件。timeupdate當播放位置更改時發(fā)生此事件。volumechange當媒體的音量已更改時，發(fā)生此事件。waiting當媒體已暫停但預期會恢復時，發(fā)生此事件。audio音樂播放6<buttonid="play">播放</button><buttonid="pause">暫停</button>請觀看控制臺輸出<scripttype="text/javascript"> varad=newAudio(); ad.src="./audioplayer/lxwmm.mp3"; document.querySelector("#play").onclick=function(){ ad.play(); } document.querySelector("#pause").onclick=function(){ ad.pause(); } ad.addEventListener("play",function(){ console.log("musicstarttoplay"); },false); ad.addEventListener("pause",function(){ console.log("musicnowpaused"); },false);</script>音頻事件（audioEvent.html）完成本章綜合案例案例實現(xiàn)貳設計思路1設計上分為上下兩部分，上面顯示正在播放音樂的音樂名稱，并且點擊音樂名稱位置可選擇音樂（受瀏覽器限制，本地運行時只能選擇網(wǎng)頁所在文件夾處的音樂），音樂名下方為控制面板（自定義，非系統(tǒng)），面板最左側(cè)可以控制音樂的播放和暫停，中間為音樂播放進度條，右側(cè)為音樂總時長和當前播放位置的信息。實現(xiàn)步驟--設計頁面架構2divdiv（包含一個img,一個input,一個span）五部分（一個控制按鈕、一個分隔線、進度條、一個分隔線和一個時間信息）實現(xiàn)步驟--設計頁面架構2<divclass="audio_panel"> <divclass="adname"> <imgsrc="images/fg.png"> <spanid="music_title"title="點擊選擇mp3">

點擊選擇mp3 </span> <inputtype="file"id="selectmusic"style="display:none"> </div> <divclass="control"> <spanid="play"class="pause"></span> <spanclass="sepe"></span> <spanid="progress"> <div></div> </span> <spanclass="sepe"></span> <spanclass="timer">00:00/00:00</span> </div></div>實現(xiàn)步驟--美化元素2.audio_panel{ width:500px; margin:30pxauto; text-align:center;}整體上內(nèi)容水平居中，其中文字也是水平居中，其樣式代碼如下：實現(xiàn)步驟--美化元素2.adname{ margin:50px;}.adname>img{vertical-align:middle;}.adname>span{cursor:pointer;}音樂標題行上的音樂圖標應與標題文字垂直居中，并且鼠標懸于標題上時顯示成小手形狀，意為可以點擊，其樣式代碼如下：實現(xiàn)步驟--美化元素2.control{ height:37px; line-height:37px; background:url(images/bg.png); color:white; display:flex;}音樂控制面板中以背景圖片布滿整個區(qū)域，控制面板中的所有子元素水平排列。實現(xiàn)步驟--美化元素2.sepe{ width:4px; background:#000;}控制面板中貌似分為三部分，是由兩個寬4像素的白色豎條狀元素分隔開的。實現(xiàn)步驟--美化元素2初始添加樣式的播放器效果圖實現(xiàn)步驟--美化元素2#play{ width:0; height:0; margin:9px15px; cursor:pointer;}#play.play{ border-top:10pxsolidtransparent; border-bottom:9pxsolidtransparent; border-left:20pxsolid#F5F2F2;}#play.pause{ width:10px; height:19px; border-top:none; border-bottom:none; border-left:5pxsolid#F5F2F2; border-right:5pxsolid#F5F2F2;}播放按鈕和暫停按鈕共用一個元素，在音樂的不同狀態(tài)下使用樣式控制按鈕的外觀，即播放狀態(tài)時顯示為兩個并列的長方形，暫停狀態(tài)時顯示為一個向右的三角形。實現(xiàn)步驟--美化元素2#progress{ height:17px; margin:10px; width:60%; background:#000;}#progress>div{ width:5%; background:#F5F2F2; height:100%;}.timer{margin-left:10px;}進度條是由兩層元素實現(xiàn)的，外層元素背景色為透明，內(nèi)層元素背景色為白色，內(nèi)層元素寬度的變化展示了音樂的播放進度。實現(xiàn)步驟--美化元素2實現(xiàn)步驟--選擇音樂2點擊音樂標題打開文件選擇對話框，所以要對音樂標題的單擊事件進行綁定事件處理程序。varmusicTitle=document.querySelector("#music_title");//音樂標題varselectmusic=document.querySelector("#selectmusic");//file組件musicTitle.onclick=function(){ selectmusic.click();//點擊打開選擇框}實現(xiàn)步驟--選擇音樂2當選擇完音樂后會觸發(fā)file組件的change事件，在這個事件中設置Audio對象的src。selectmusic.onchange=function(){ letext=this.files[0].name.substr(this.files[0].name.lastIndexOf(".")).toLowerCase(); if(ext!=".mp3") { alert("請選擇mp3"); playBtn.onclick=null; return; } myaudio.setAttribute("src",this.files[0].name);}varmyaudio=newAudio();實現(xiàn)步驟--音樂加載完成時的初始化2選擇好正確的音樂文件后，文件加載完成時會觸發(fā)Audio對象的loadeddata事件，所以在這個事件中處理音樂初始化的一些狀態(tài)：按鈕顯示為待播放狀態(tài)，即顯示為向右的三角形；設置按鈕的單擊事件；提取音樂文件名，并更新音樂名顯示到標題位置；設置進度條為0%；設置總時長信息。實現(xiàn)步驟--音樂加載完成時的初始化2myaudio.addEventListener("loadeddata",function(e){ playBtn.className="play"; letsrc=this.src;//提取音樂名

letk=src.lastIndexOf("/"); if(k<0)k=src.lastIndexOf("\\"); if(k>=0)src=src.substring(k+1); musicTitle.innerHTML=decodeURICompo

溫馨提示

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

評論

0/150

提交評論