Javascript 关于我的代码，你有什么要更改的吗？如果有，是什么？

我的代码：

所以，我在这方面已经努力了很长一段时间，我想知道在座的每个人都是怎么想的。你认为我还有什么需要补充的吗？或者你认为我应该改变什么

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

你应该

印前 将内联样式移动到单独的CSS 将内联JS移动到单独的JS文件

---

我投票将这个问题作为主题外的问题来结束，因为它属于打开状态。@mplungjan-这应该是优先级1。将css放在标题部分，有或没有外部文件，将js放在页面底部，有或没有外部js文件。还有更多，但我会立即改变。