abstract：总结：通过练习onclick事件，制作了网页音乐播放按钮，并了解了document.getElementById引用ID属性的方法，对embed对象有了一点认识。 由于对JS所学尚浅，无法实现在点击其他音乐按钮的同时中断正在播放的音乐，希望在学习完整个JS篇章后会有个不一样的自己。 <!DOCTYPE html> <html> <head> <
总结：通过练习onclick事件，制作了网页音乐播放按钮，并了解了document.getElementById引用ID属性的方法，对embed对象有了一点认识。
由于对JS所学尚浅，无法实现在点击其他音乐按钮的同时中断正在播放的音乐，希望在学习完整个JS篇章后会有个不一样的自己。
<!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');">古典音乐</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');">游戏音乐</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');">传统音乐</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');">超酷动漫</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>
Correcting teacher：天蓬老师Correction time：2018-11-28 23:56:48
Teacher's summary：标签最常用的几个属性,id, class 这都是重要的选取元素的方式, 后面你还会学到表单元素的选取, 会更加的丰富