HTML5应用开发课后习题题库期末考试试卷及答案 (7).docx

《HTML5应用开发课后习题题库期末考试试卷及答案 (7).docx》由会员分享，可在线阅读，更多相关《HTML5应用开发课后习题题库期末考试试卷及答案 (7).docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实操题：1.在网页中通过“播放T暂停“两个按钮设置背景音乐地播放与关闭。效果如图5-9所示。楮放背曷音乐暂停背曷音乐图5-9习题1执行效果参考代码：test function autoPlay() var myAuto = document.getElementById(myaudio1); myAuto.play();)function closePlay() var myAuto = document.getElementById(myaudio*);myAuto.pause();myAuto.load();) 2.设计网页版音乐播放器，如图5-10所示，点播放当前音乐旋转， 控制当前音量

2、地大小。再点击，音乐暂停，按钮切换到图片“，O停止旋转。,隔切 换到上一首与下一首音乐。文字显示当前播放第*首音乐，也可以用来显示当前曲名地名称。第1 首图5-10习题2执行效果参考代码： 简单音乐播放器 #CDimage img width: 200px; height: 200px; transform-origin: center; animation:;)keyframes rounds from rotate(0deg);rotate(360deg);transform: to transform:)当前浏览器不支持HTML5音频播放 !-音量调节 当前正在播放:第span id=t

3、itle”l/span首 /*获取音乐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.getE

4、lementById(title);var prevBtn = document.getElementById(prevBtn);var nextBtn = document.getElementByld(nextBtn);/音乐路径var list = new ArrayCsrc/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();/播

5、放音乐toggleBtn.innerHTML = 1，；cdlmg.style.animation = 1 rounds 3s infinite1; else music.pause(); /暂停音乐 toggleBtn.innerHTML = 1，；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

6、();)/下一首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;)3.设计网页版视频播放器，如图5-11所示，进度条显示当前播放了多少秒，分别设置“播 放二”暂停”与“停止”控制视频地播放。“快进二”慢放”与“正常”控制播放地速度。BE

7、I播放|暂停|停止| |快放|慢放|正常图5-11习题3执行效果参考代码：title)视频播放器#durationBarborder:solid lpx #164900;width:300px;margin-bottom:5px;)#positionBar(height:20px;color:white;font-weight:bold;background:#2D9900;text-align:center;)播放function play()var video = document.getElementByld(videoPlayer); video.play();)暂停function

8、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 slowD

9、ovjn()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) + “秒”;) 0button onclick=play()播放/button)暂停/button)停止/button)快进/button)慢放jEM