版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
实操题:在网页通过"播放","暂停"两个按钮设置背景音乐地播放与关闭。效果如图五-九所示。图五-九题一执行效果参考代码:<!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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 商场2024年度物业管理合同:物业公司与商场之间的管理协议
- 2024年专属供货伙伴合同合同范本版B版
- 2024堵漏劳务合同范本
- 2024年专业通信工程分包合同样本版
- 2024定制版汽车租赁合作三方合同版B版
- 2024年度二手摩托车买卖合同范本样本下载2篇
- 2024年度文化艺术品展览合同(2024版)
- 法律事务科个人工作框架计划
- 2024分公司承包经营合同格式
- 幼儿园学期计划与孩子共同创造奇迹
- 砌筑脚手架施工方案(有计算)
- 《意大利的民俗》课件
- 《法理学》课件(第三章:法的价值-正义与利益)
- 《职场解压与情绪》课件
- 大学生心理健康教育教学进度计划表
- 商业模式创新 PPT商业模式画布
- 第五章-移动支付
- 设备日常点检保养记录表
- 2023年度安徽社区《网格员》真题汇编
- 一年级齐鲁书社传统文化教案
- (2023版)高中化学新课标知识考试题库大全(含答案)
评论
0/150
提交评论