HTML5应用开发课后习题题库期末考试试卷及答案 (7).docx
实操题：1.在网页中通过“播放T暂停“两个按钮设置背景音乐地播放与关闭。效果如图5-9所示。楮放背曷音乐暂停背曷音乐图5-9习题1执行效果参考代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>test</title><script language=Mjavascript" type=,text/javascript,> function autoPlay() var myAuto = document.getElementById("myaudio1); myAuto.play();)function closePlay() var myAuto = document.getElementById("myaudio*);myAuto.pause();myAuto.load();)</script></head> <body><audio src=,src/l.mp3" id=nmyaudioH controls="controls" loop=',falsen hidden=,true,></audio><input type=,buttonM one lie k=M autoPlay ()11 value=" 播放,/><input type="button" onclick="closePlay()" value="暂停” /></body> </html>2.设计网页版音乐播放器，如图5-10所示，点播放当前音乐旋转， ' 控制当前音量地大小。再点击，音乐暂停，按钮切换到图片“，O停止旋转。,隔切 换到上一首与下一首音乐。文字显示当前播放第*首音乐，也可以用来显示当前曲名地名称。第1 首图5-10习题2执行效果参考代码：<!DOCTYPE html><html><head><meta charset=Mutf-8n> <七正16>简单音乐播放器</上正16> <style type="text/css">#CDimage img width: 200px; height: 200px; transform-origin: center; animation:;)keyframes rounds from rotate(0deg);rotate(360deg);transform: to transform:)</style></head><body><audio id=,audion src="src/2.mp3" preload>当前浏览器不支持HTML5音频播放</audio> <div id="CDimage,><img src=uimg/record.png" /></div>< !-音量调节<div><input id=',volumeH type=',rangen min=,0n max=nln step=,0.1n /> </div><div>当前正在播放:第span id="title”>l/span首 </div><div><button id=MprevBtn"><img src=nimg/prev.png" width=n50H height="50n /> </button><button id=HtoggleBtnH><img src="img/play.pngM width=H50" height="50M /></button><button id=",nextBtnl,ximg src=Mimg/next.png" width-50” height="50" /></button></div><script>/*获取音乐audio,音量volume,暂停播放toggleBtrij歌曲名称title */var music = document.getElementById("audio");var volume = document.getElementById("volume");var toggleBtn = document.getElementById(utoggleBtn");var cdlmg =document.getElementById("CDimage11).getElementsByTagName('img1)0;var title = document.getElementById("title");var prevBtn = document.getElementById("prevBtn");var nextBtn = document.getElementByld("nextBtn");/音乐路径var list = new ArrayC'src/l.mpS" ”src/2.mp3", ,src/3,mp3N);/音乐标题var titleList = new Array(nln “2“， “3")；/当前是第几首曲目 var i = 0;toggleBtn.onclick = function() if(music.paused) music.play();/播放音乐toggleBtn.innerHTML = 1<img src=nimg/pause.png" width-50" height=,50,/>，；cdlmg.style.animation = 1 rounds 3s infinite1; else music.pause(); /暂停音乐 toggleBtn.innerHTML = 1<img src="img/play.png" width-50” height=,50,/>，；cdlmg.style.animation = 11;/上一首prevBtn.onclick = function() if(i = 0) i = list.length - 1; else i-； music.pause(); music.src = listi; title.innerHTML = titleListi; music.play();)/下一首nextBtn.onclick = function() if(i = list.length - 1) i = 0;elsei+；music.pause();music.src = listi;title.innerHTML = titleListi; music.play();)/设置音量大小volume.onchange = function() music.volume = volume.value;)</script></body></html>3.设计网页版视频播放器，如图5-11所示，进度条显示当前播放了多少秒，分别设置“播 放二”暂停”与“停止”控制视频地播放。“快进二”慢放”与“正常”控制播放地速度。BEI播放|暂停|停止| |快放|慢放|正常图5-11习题3执行效果参考代码：<!DOCTYPE html><html><head><meta charset=nutf-8">title)视频播放器</head><style>#durationBarborder:solid lpx #164900;width:300px;margin-bottom:5px;)#positionBar(height:20px;color:white;font-weight:bold;background:#2D9900;text-align:center;)</style><script>播放function play()var video = document.getElementByld("videoPlayer"); video.play();)暂停function pause()var video = document.getElementByld("videoPlayer");video.pause();)停止function stop()var video = document.getElementByld("videoPlayern);video.pause();video.currentTime = 0;)/快进function speedUp()var video = document.getElementByld(uvideoPlayer");video.play();video.playbackRate = 2;)/慢放function slowDovjn()var video = document.getElementByld("videoPlayerH);video.play();video.playbackRate = 0.5;正常速度function normalSpeed()var video = document.getElementByld("videoPlayerM);video.play();video.playbackRate = 1;)进度条有关function progressUpdate()var video = document.getElementByld("videoPlayer");/动态设置进度条var postionBar = document.getElementByld("positionBar");postionBar.style.width = (video.currentTime / video.duration * 100) +/设置播放时间displaystatus.innerHTML =(Math. round (video, currentTime*100)/100) + “秒”;)</script> <body><video id=',videoPlayer,' src="src/guilin.mp4" width-400” height="300"ontimeupdate=,progressUpdate()" ></video><div id=,durationBar"><div id=",positionBar,xspan id=ndisplayStatusn>0</spanx/div></div><button onclick="play()播放</button)<button onclick=npause()”>暂停/button)<button onclick/stop()”>停止</button)<button onclick="speedUp()”>快进</button)<button onclick="slowDown()”>慢放</button><button onclick=Mnormalspeed()">jEM</button></body></html>
