我的代码：https://jsfiddle.net/m656xw8s/10/
所以，我已经相当努力地工作了很长一段时间，想知道这里的每个人都在想什么。你认为我应该添加什么吗？或者你认为我应该改变什么？
<div style="width:0;" onclick="myc=document.getElementById('mycase'); myc.style.display='block'; this.style.display='none'">
<div style="width: 256px; height: 330px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;text-align: center;">
<p style="font-family: 'Times New Roman'; font-size: 20px;color: #0059dd;line-height:73px;">[ ENJOY THE MUSIC]</p></div></div>
<div id="mycase" style="display: none;">
<div style="margin: 0;width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></div>
<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000; "></div>
<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></div>
<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;color:#000000; "></div>
<div style="margin: -50px 0 0 216px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px; "></div>
<div style="width:0;" onmouseover="myObject=document.getElementById('myObj');
myObject.style.display='block'; this.style.display='none'">
<div style="margin: 0; width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#000000; border-top-left-radius:50px;border-bottom-left-radius:50px;"></div>
<div style="margin: -24px 0 0 89px;width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#000000;"> </div>
<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#000000; border-top-right-radius:50px;border-bottom-right-radius:50px;">
</div></div>
<div id="myObj" style="display: none;">
<div style="margin: 0;width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;">
<button id="playButton" style="border:none;cursor: pointer;background-color:transparent;color:blue;padding:14px 260px 8px 0;margin:0; " onmouseover="
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
var player = document.getElementById('player');
if (player.paused) {
playButton.style.cursor = 'pointer';
playButton.style.backgroundColor = 'transparent';
playButton.style.padding = '14px 260px 8px 0';
player.play();
} else {
playButton.style.cursor = 'pointer';
playButton.style.backgroundColor = 'transparent';
playButton.style.padding = '14px 260px 8px 0';
player.pause();
}">
</button>
</div>
<div style="margin: -24px 0 0 89px; width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#ffffff;">
</div>
<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; ">
</div></div>
<a href="" target="_blank" style="display:block; margin: 0; cursor: pointer; width: 50px; height: 50px;background-color:#00a0b0;color:transparent;"
onmouseover="this.style.backgroundColor='#000000';
this.style.width='40px';this.style.height='40px';
this.style.border='thick solid #5cb378'"
onmouseout="this.style.backgroundColor='#00a0b0';
this.style.width='50px';this.style.height='50px';
this.style.border='none'">
</a>
<a href="" target="_blank" style="display:block; margin: -50px 0 0 54px; width: 50px; height:50px; background-color:#6a4a3c;" onmouseover="this.style.backgroundColor='#badac5';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#6a4a3c'"></a>
<a href="" target="_blank" style="display:block; margin: -50px 0 0 108px; width: 50px; height: 50px;background-color:#cc333f;" onmouseover="this.style.backgroundColor='#b7ab9d';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#cc333f'"></a>
<a href="" target="_blank" style="display:block; margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;" onmouseover="this.style.backgroundColor='#4679c7';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#eb6841'"></a>
<a href="" target="_blank" style="display:block; margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#edc951'"></a>
<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>
<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>
<a href="" target="_blank" style="display:block; margin: -50px 0 0 108px; cursor: pointer; width: 50px; height: 50px;background-color:#cc333f;color:transparent;"
onmouseover="this.style.backgroundColor='#ffffff';
this.style.width='18px';this.style.height='50px'
this.style.borderLeft='thick solid #00ffff';
this.style.borderLeftWidth='16px';
this.style.borderRight='thick solid #ff00ff'
this.style.borderRightWidth='16px'"
onmouseout="this.style.backgroundColor='#cc333f';
this.style.width='50px';this.style.height='50px';
this.style.border='none'">
</a>
<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>
<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>
<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>
<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>
<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;"></div>
<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>
<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>
<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>
<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>
<div style="width:0;" onclick="myObject=document.getElementById('myObj2');
myObject.style.display='block'; this.style.display='none'">
<div style="margin:-50px 0 0 108px; width: 50px; height:50px; cursor: pointer; background-color:#cc333f;">
</div></div>
<div id="myObj2" style="display: none;">
<button id="playButton2" style="display:block;margin:-50px 0 0 108px; width:50px; height:50px; border:none; cursor: pointer; background-color:#000000;" onclick="
var player = document.getElementById('player2').volume='1.0';
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
if (player.paused) {
playButton2.style.backgroundColor = '#000000';
playButton2.style.border = 'thick solid blue';
player.play();
} else {
playButton2.style.backgroundColor = '#cc333f';
playButton2.style.border = 'none';
player.pause();
}">
</button>
</div>
<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>
<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>
<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;border-bottom-left-radius:50px;"></div>
<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>
<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;"></div>
<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>
<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951;color:#000000; border-bottom-right-radius:50px;"></div></div>
<audio id="player" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
<audio id="player2" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
答案 0 :(得分：0)
你应该