abstrait：總結(jié)：通過(guò)練習(xí)onclick事件，制作了網(wǎng)頁(yè)音樂(lè)播放按鈕，并了解了document.getElementById引用ID屬性的方法，對(duì)embed對(duì)象有了一點(diǎn)認(rèn)識(shí)。 由于對(duì)JS所學(xué)尚淺，無(wú)法實(shí)現(xiàn)在點(diǎn)擊其他音樂(lè)按鈕的同時(shí)中斷正在播放的音樂(lè)，希望在學(xué)習(xí)完整個(gè)JS篇章后會(huì)有個(gè)不一樣的自己。 <!DOCTYPE html> <html> <head> <
總結(jié)：通過(guò)練習(xí)onclick事件，制作了網(wǎng)頁(yè)音樂(lè)播放按鈕，并了解了document.getElementById引用ID屬性的方法，對(duì)embed對(duì)象有了一點(diǎn)認(rèn)識(shí)。
由于對(duì)JS所學(xué)尚淺，無(wú)法實(shí)現(xiàn)在點(diǎn)擊其他音樂(lè)按鈕的同時(shí)中斷正在播放的音樂(lè)，希望在學(xué)習(xí)完整個(gè)JS篇章后會(huì)有個(gè)不一樣的自己。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>js事件</title>
</head>
<body>
<script type="text/javascript">
function voice1(x,url){
x.style.background="red";
var div1 = document.getElementById('sound1');
div1.innerHTML = '<embed src="'+url+'" autostart="true" hidden="true"></embed>';
};
function voice2(x,url){
x.style.background="orange";
var div2 = document.getElementById('sound2');
div2.innerHTML = '<embed src="'+url+'" autostart="true" hidden="true"></embed>';
};
function voice3(x,url){
x.style.background="yellow";
var div3 = document.getElementById('sound3');
div3.innerHTML = '<embed src="'+url+'" autostart="true" hidden="true"></embed>';
};
function voice4(x,url){
x.style.background="green";
var div4 = document.getElementById('sound4');
div4.innerHTML = '<embed src="'+url+'" autostart="true" hidden="true"></embed>';
};
function voice5(x,url){
x.style.background="Cyan";
var div5 = document.getElementById('sound5');
div5.innerHTML = '<embed src="'+url+'" autostart="true" hidden="true"></embed>';
};
function voice6(x,url){
x.style.background="blue";
var div6 = document.getElementById('sound6');
div6.innerHTML = '<embed src="'+url+'" autostart="true" hidden="true"></embed>';
};
function voice7(x,url){
x.style.background="Violet";
var div7 = document.getElementById('sound7');
div7.innerHTML = '<embed src="'+url+'" autostart="true" hidden="true"></embed>';
};
</script>
<div id="sound1" style="width:80px;height:30px;border-radius:10px;border:1px solid #666;line-height:30px;text-align:center;float:left;margin-right:5px;" onclick="voice1(this,'http://dx.sc.chinaz.com/Files/DownLoad/sound/huang/cd9/mp3/605.mp3');">八音盒</div>
<div id="sound2" style="width:80px;height:30px;border-radius:10px;border:1px solid #666;line-height:30px;text-align:center;float:left;margin-right:5px;" onclick="voice2(this,'http://dx.sc.chinaz.com/Files/DownLoad/sound/huang/cd9/mp3/167.mp3');">古典音樂(lè)</div>
<div id="sound3" style="width:80px;height:30px;border-radius:10px;border:1px solid #666;line-height:30px;text-align:center;float:left;margin-right:5px;" onclick="voice3(this,'http://dx.sc.chinaz.com/Files/DownLoad/sound1/201202/652.mp3');">游戲音樂(lè)</div>
<div id="sound4" style="width:80px;height:30px;border-radius:10px;border:1px solid #666;line-height:30px;text-align:center;float:left;margin-right:5px;" onclick="voice4(this,'http://dx.sc.chinaz.com/Files/DownLoad/sound1/201809/10619.mp3');">抖音熱門</div>
<div id="sound5" style="width:80px;height:30px;border-radius:10px;border:1px solid #666;line-height:30px;text-align:center;float:left;margin-right:5px;" onclick="voice5(this,'http://dx.sc.chinaz.com/Files/DownLoad/sound1/201209/2097.mp3');">傳統(tǒng)音樂(lè)</div>
<div id="sound6" style="width:80px;height:30px;border-radius:10px;border:1px solid #666;line-height:30px;text-align:center;float:left;margin-right:5px;" onclick="voice6(this,'http://dx.sc.chinaz.com/Files/DownLoad/sound1/201202/686.mp3');">超酷動(dòng)漫</div>
<div id="sound7" style="width:80px;height:30px;border-radius:10px;border:1px solid #666;line-height:30px;text-align:center;float:left;margin-right:5px;" onclick="voice7(this,'http://dx.sc.chinaz.com/Files/DownLoad/sound1/201808/10453.mp3');">抒情曲</div>
</body>
</html>
Professeur correcteur：天蓬老師Temps de correction：2018-11-28 23:56:48
Résumé du professeur：標(biāo)簽最常用的幾個(gè)屬性,id, class 這都是重要的選取元素的方式, 后面你還會(huì)學(xué)到表單元素的選取, 會(huì)更加的豐富