HTML5应用开发课后习题题库期末考试试卷及答案_第1页
HTML5应用开发课后习题题库期末考试试卷及答案_第2页
HTML5应用开发课后习题题库期末考试试卷及答案_第3页
HTML5应用开发课后习题题库期末考试试卷及答案_第4页
HTML5应用开发课后习题题库期末考试试卷及答案_第5页
已阅读5页,还剩2页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

实操题:在网页通过"播放","暂停"两个按钮设置背景音乐地播放与关闭。效果如图五-九所示。图五-九题一执行效果参考代码:<!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>二.设计网页版音乐播放器,如图五-一零所示,点击播放当前音乐,旋转,控制当前音量地大小。再点击,音乐暂停,按钮切换到图片,停止旋转。切换到上一首与下一首音乐。文字显示当前播放第*首音乐,也可以用来显示当前曲名地名称。图五-一零题二执行效果参考代码:<!DOCTYPEhtml><html> <head> <metacharset="utf-八"> <title>简单音乐播放器</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> 当前浏览器不支持HTML五音频播放 </audio> <divid="CDimage"> <imgsrc="img/record.png"/> </div> <!--音量调节--> <div> <inputid="volume"type="range"min="零"max="一"step="零.一"/> </div> <div> 当前正在播放:第<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三"); //音乐标题 vartitleList=newArray("一","二","三"); //当前是第几首曲目 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(); } //设置音量大小 volume.onchange=function(){ music.volume=volume.value; } </script> </body></html>三.设计网页版视频播放器,如图五-一一所示,度条显示当前播放了多少秒,分别设置"播放","暂停"与"停止"控制视频地播放。"快","慢放"与"正常"控制播放地速度。图五-一一题三执行效果参考代码:<!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=一;}//度条有关functionprogressUpdate(){varvideo=document.getElementById("videoPlayer");//动态设置度条varpostionBar=document.getElementById("positionBar");postionBar.style.width=(video.currentTime/video.duration*一零零)+"%";//设置播放时间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等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论