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

上传人：唯*** IP属地：河北上传时间：2023-12-29 格式：PDF 页数：7 大小：613.40KB 积分：12 举报 版权申诉

已阅读5页，还剩2页未读，继续免费阅读

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

文档简介

实操题：

1.在网页中通过"播放","暂停"两个按钮设置背景音乐地播放与关闭。

效果如图5-9所示。

播放背景音乐暂停背景音乐

图5-9习题1执行效果

参考代码：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf"8">

<scriptlanguage="javascript"type="text/javascript">

functionautoPlay(){

varmyAuto=document.getElementById(^yaudio*);

myAuto.play();

)

functionclosePlay(){

varmyAuto=document.getElementById(^yaudio');

myAuto.pause();

myAuto.load();

)

</script>

</head>

<body>

<audiosrc=nsrc/l.mp3"id="myaudio"controls="controls"

loop="false"hidden="true">

</audio>

<inputtype="button"onclick="autoPlay()"value二“播放”/>

<inputtype="button"onclick="closePlay()"value="暂停"/>

</body>

</html>

2.设计网页版音乐播放器，如图5-10所示,点击;A播放当前音乐，❷旋转,

控制当前音量地大小。再点击，音乐暂停，按钮切换到图片“停止旋转。“附切

换到上一首与下一首音乐。文字显示当前播放第*首音乐，也可以用来显示当前曲名地名称。

嘉放:第1首

图5-10习题2执行效果

参考代码：

<!D0CTYPEhtml>

<html>

<head>

<metacharset="utf-8">

〈title)简单音乐播放器<八R16>

<styletype="text/css">

#CDimageimg{

width:200px;

height:200px;

transform-origin:center;

animation:;

)

@keyframesrounds{

from{

transform:rotate(Odeg);

}

to{

transform:rotate(360deg);

)

}

</style>

</head>

<body>

<audioid="audio,'src="src/2.mp3"preload>

当前浏览器不支持HTML5音频播放

</audio>

<divid=',CDimagen>

<imgsrc="img/record.png"/>

</div>

<div>

<inputid="volume"type="range"min="0"max="lnstep="0.1"/>

</div>

<div>

当前正在播放：第<spanid="title”>l</span>首

</div>

<div>

<buttonid="prevBtn"ximgsrc="img/prev.png"width="50"

height="50"/></button>

<buttonid="toggleBtn"ximgsrc="img/play.png"width=“50”

height二"50"/></button>

<buttonid="nextBtn"ximgsrc="img/next.png"width""50”

height="50"/></button>

</div>

/*获取音乐audio,音量volume,暂停播放toggleBtn,歌曲名称title

varmusic=document.getElementById("audio");

varvolume=document.getElementByld("volume");

vartoggleBtn=document.getElementByld("toggleBtn");

varcdlmg=

document.getElementById("CDimage").getElementsByTagName(1img')[0];

vartitle=document.getElementByld("title");

varprevBtn=document.getElementByld("prevBtn");

varnextBtn=document.getElementByld("nextBtn");

//音乐路径

varlist=newArray("src/l.mp3","src/2•叩3","src/3.mp3");

〃音乐标题

vartitleList=newArray("l'\"2","3");

〃当前是第几首曲目

vari=0;

toggleBtn.onclick=function(){

if(music.paused){

music.play();

//播放音乐

toggleBtn.innerHTML=1<imgsrc="img/pause.png*'

width二“50"height="50'7>，；

cdlmg.style.animation='rounds3sinfinite,;

}else{

music.pause();

〃暂停音乐

toggleBtn.innerHTML=1<imgsrc="img/play.png"

width二“50"height="50"/>，；

cdlmg.style.animation=1';

)

}

〃上一首

prevBtn.onclick=function(){

if(i==0){

i=list.length-1;

}else{

i--；

music.pause();

music.src=listfi];

title.innerHTML=titleList[i];

music.play();

)

〃下一首

nextBtn.onclick=function(){

if(i==list.length-1)

i=0;

else

i++；

music.pause();

music.src=list[i];

title.innerHTML=titleList[i];

music.play();

)

//设置音量大小

volume.onchange=function(){

music.volume=volume.value;

)

</script>

</body>

</html>

3.设计网页版视频播放器，如图5-11所示，进度条显示当前播放了多少秒，分别设置“播

放:“暂停“与“停止”控制视频地播放。“快进二“慢放“与“正常“控制播放地速度。

函〕

|播放11•限^±\|由-慢放|加

图5-11习题3执行效果

参考代码：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

视频播放器〈/title)

</head>

<style>

#durationBar{

border:solidlpx#164900;

width:300px;

margin-bottom:5px;

)

#positionBar{

height:20px;

color:white;

font-weight:bold;

background:#2D9900;

text-align:center;

)

</style>

〃播放

functionplay(){

vanvideo=document.getElementByld("videoPlayer");

video.play();

)

//暂停

functionpause(){