HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案 (七)

上傳人：唯*** IP屬地：河北上傳時間：2023-12-29 格式：PDF 頁數(shù)：7 大小：613.40KB 積分：12 舉報 版權(quán)申訴

HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案 (七)_第2頁

HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案 (七)_第3頁

HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案 (七)_第4頁

HTML5應(yīng)用開發(fā)課后習(xí)題題庫期末考試試卷及答案 (七)_第5頁

已閱讀5頁，還剩2頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

實操題：

1.在網(wǎng)頁中通過"播放","暫停"兩個按鈕設(shè)置背景音樂地播放與關(guān)閉。

效果如圖5-9所示。

播放背景音樂暫停背景音樂

圖5-9習(xí)題1執(zhí)行效果

參考代碼：

<!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.設(shè)計網(wǎng)頁版音樂播放器，如圖5-10所示,點擊;A播放當(dāng)前音樂，?旋轉(zhuǎn),

控制當(dāng)前音量地大小。再點擊，音樂暫停，按鈕切換到圖片“停止旋轉(zhuǎn)?！案角?/p>

換到上一首與下一首音樂。文字顯示當(dāng)前播放第*首音樂，也可以用來顯示當(dāng)前曲名地名稱。

嘉放:第1首

圖5-10習(xí)題2執(zhí)行效果

參考代碼：

<!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>

當(dāng)前瀏覽器不支持HTML5音頻播放

</audio>

<divid=',CDimagen>

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

</div>

<div>

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

</div>

<div>

當(dāng)前正在播放：第<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");

〃音樂標(biāo)題

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

〃當(dāng)前是第幾首曲目

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();

)

//設(shè)置音量大小

volume.onchange=function(){

music.volume=volume.value;

)

</script>

</body>

</html>

3.設(shè)計網(wǎng)頁版視頻播放器，如圖5-11所示，進(jìn)度條顯示當(dāng)前播放了多少秒，分別設(shè)置“播

放:“暫停“與“停止”控制視頻地播放?！翱爝M(jìn)二“慢放“與“正?！翱刂撇シ诺厮俣?。

函〕

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

圖5-11習(xí)題3執(zhí)行效果

參考代碼：

<!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(){