HTML5應(yīng)用開發(fā)課后習(xí)題題庫(kù)期末考試試卷及答案_第1頁(yè)
HTML5應(yīng)用開發(fā)課后習(xí)題題庫(kù)期末考試試卷及答案_第2頁(yè)
HTML5應(yīng)用開發(fā)課后習(xí)題題庫(kù)期末考試試卷及答案_第3頁(yè)
HTML5應(yīng)用開發(fā)課后習(xí)題題庫(kù)期末考試試卷及答案_第4頁(yè)
HTML5應(yīng)用開發(fā)課后習(xí)題題庫(kù)期末考試試卷及答案_第5頁(yè)
已閱讀5頁(yè)，還剩2頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

實(shí)操題:在網(wǎng)頁(yè)通過"播放","暫停"兩個(gè)按鈕設(shè)置背景音樂地播放與關(guān)閉。效果如圖五-九所示。圖五-九題一執(zhí)行效果參考代碼:<!DOCTYPEhtml><html><head><metacharset="utf-八"><title>test</title><scriptlanguage="javascript"type="text/javascript">functionautoPlay(){varmyAuto=document.getElementById('myaudio');myAuto.play();}functionclosePlay(){varmyAuto=document.getElementById('myaudio');myAuto.pause();myAuto.load();}</script></head><body><audiosrc="src/一.mp三"id="myaudio"controls="controls"loop="false"hidden="true"></audio><inputtype="button"onclick="autoPlay()"value="播放"/><inputtype="button"onclick="closePlay()"value="暫停"/></body></html>二.設(shè)計(jì)網(wǎng)頁(yè)版音樂播放器,如圖五-一零所示,點(diǎn)擊播放當(dāng)前音樂,旋轉(zhuǎn),控制當(dāng)前音量地大小。再點(diǎn)擊,音樂暫停,按鈕切換到圖片,停止旋轉(zhuǎn)。切換到上一首與下一首音樂。文字顯示當(dāng)前播放第*首音樂,也可以用來顯示當(dāng)前曲名地名稱。圖五-一零題二執(zhí)行效果參考代碼:<!DOCTYPEhtml><html> <head> <metacharset="utf-八"> <title>簡(jiǎn)單音樂播放器</title> <styletype="text/css"> #CDimageimg{ width:二零零px; height:二零零px; transform-origin:center; animation:; } @keyframesrounds{ from{ transform:rotate(零deg); } to{ transform:rotate(三六零deg); } } </style> </head> <body> <audioid="audio"src="src/二.mp三"preload> 當(dāng)前瀏覽器不支持HTML五音頻播放 </audio> <divid="CDimage"> <imgsrc="img/record.png"/> </div> <!--音量調(diào)節(jié)--> <div> <inputid="volume"type="range"min="零"max="一"step="零.一"/> </div> <div> 當(dāng)前正在播放:第<spanid="title">一</span>首 </div> <div> <buttonid="prevBtn"><imgsrc="img/prev.png"width="五零"height="五零"/></button> <buttonid="toggleBtn"><imgsrc="img/play.png"width="五零"height="五零"/></button> <buttonid="nextBtn"><imgsrc="img/next.png"width="五零"height="五零"/></button> </div> <script> /*獲取音樂audio,音量volume,暫停播放toggleBtn,歌曲名稱title*/ varmusic=document.getElementById("audio"); varvolume=document.getElementById("volume"); vartoggleBtn=document.getElementById("toggleBtn"); varcdImg=document.getElementById("CDimage").getElementsByTagName('img')[零]; vartitle=document.getElementById("title"); varprevBtn=document.getElementById("prevBtn"); varnextBtn=document.getElementById("nextBtn"); //音樂路徑 varlist=newArray("src/一.mp三","src/二.mp三","src/三.mp三"); //音樂標(biāo)題 vartitleList=newArray("一","二","三"); //當(dāng)前是第幾首曲目 vari=零; toggleBtn.onclick=function(){ if(music.paused){ music.play(); //播放音樂 toggleBtn.innerHTML='<imgsrc="img/pause.png"width="五零"height="五零"/>'; cdImg.style.animation='rounds三sinfinite'; }else{ music.pause(); //暫停音樂 toggleBtn.innerHTML='<imgsrc="img/play.png"width="五零"height="五零"/>'; cdImg.style.animation=''; } } //上一首 prevBtn.onclick=function(){ if(i==零){ i=list.length-一; }else{ i--; music.pause(); music.src=list[i]; title.innerHTML=titleList[i]; music.play(); } } //下一首 nextBtn.onclick=function(){ if(i==list.length-一) i=零; else i++; music.pause(); music.src=list[i]; title.innerHTML=titleList[i]; music.play(); } //設(shè)置音量大小 volume.onchange=function(){ music.volume=volume.value; } </script> </body></html>三.設(shè)計(jì)網(wǎng)頁(yè)版視頻播放器,如圖五-一一所示,度條顯示當(dāng)前播放了多少秒,分別設(shè)置"播放","暫停"與"停止"控制視頻地播放。"快","慢放"與"正常"控制播放地速度。圖五-一一題三執(zhí)行效果參考代碼:<!DOCTYPEhtml><html><head><metacharset="utf-八"><title>視頻播放器</title></head><style>#durationBar{border:solid一px#一六四九零零;width:三零零px;margin-bottom:五px;}#positionBar{height:二零px;color:white;font-weight:bold;background:#二D九九零零;text-align:center;}</style><script>//播放functionplay(){varvideo=document.getElementById("videoPlayer");video.play();}//暫停functionpause(){varvideo=document.getElementById("videoPlayer");video.pause();}//停止functionstop(){varvideo=document.getElementById("videoPlayer");video.pause();video.currentTime=零;}//快functionspeedUp(){varvideo=document.getElementById("videoPlayer");video.play();video.playbackRate=二;}//慢放functionslowDown(){varvideo=document.getElementById("videoPlayer");video.play();video.playbackRate=零.五;}//正常速度functionnormalSpeed(){varvideo=document.getElementById("videoPlayer");video.play();video.playbackRate=一;}//度條有關(guān)functionprogressUpdate(){varvideo=document.getElementById("videoPlayer");//動(dòng)態(tài)設(shè)置度條varpostionBar=document.getElementById("positionBar");postionBar.style.width=(video.currentTime/video.duration*一零零)+"%";//設(shè)置播放時(shí)間displayStatus.innerHTML=(Math.round(video.currentTime*一零零)/一零零)+"秒";}</script><body><videoid="videoPlayer"src="src/guilin.mp四"width="四零零"height="三零零"ontimeupdate="progressUpdate()"></video><divid="durationBar"><divid="positionBar"><spanid="displayStatus">零秒</span></div></div>

溫馨提示

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

評(píng)論

0/150

提交評(píng)論