学习按钮01（马黑黑原创）

朵拉

大猫咪

恭喜朵拉成功了，图片很浪漫，制作的真漂亮。 周末快乐！  

朵拉

@马黑黑 马老师好，按钮移到帖子里 改动哪段语句？

马黑黑

效果不错。按钮可以放在帖子内

马黑黑

你的代码改动如下，播放器就会在图片上方，具体位置可以自己调整left和top的值：
（红色部分为添加的代码，水鸭色的部分为位置调整的代码）

<style type="text/css">
   #circleDiv { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0px 0px 2px #000; cursor: pointer; }
</style>

<img src = 'https://tuchuangs.com/imgs/2022/04/09/d40b97491dce7c20.jpg' alt="" />

<div id="circleDiv" style="position: absolute; left: 20px; top: 20px;"></div>

<script language="javascript">

let tt;
let cc = document.getElementById('circleDiv');
let aud = document.createElement('audio');
aud.loop = true;
aud.src = 'http://music.163.com/song/media/outer/url?id=523250334.mp3';
cc.appendChild(aud);
merge();
autoPlay();

cc.onclick = function() { autoPlay(); }

function merge(){
   let num = 45;
   let bgStr = 'conic-gradient(';
   for(j=0; j<360/num; j++) {
      bgStr += `#${Math.random().toString(16).substr(-6)} ${j*num}deg,`;
   }
   bgStr = bgStr.slice(0, bgStr.length-1) + ")";
   cc.style.background = `#${Math.random().toString(16).substr(-6)} ${bgStr}`;
}

function autoPlay() { aud.paused == true ? (tt = setInterval(merge, 100), aud.play()) : (clearInterval(tt), aud.pause()); }

</script>

红影

图意和歌曲真符合，两个窗口遥遥相对，虽然隔着楼房，却隔不断那份爱。欣赏朵宝好帖

朵拉

马老师 看过来，按钮重新调整了

马黑黑

朵拉 发表于 2022-4-10 20:46
马老师 看过来，按钮重新调整了

嗯，你现在调到左侧去了

加林森

朵拉制作得真漂亮。我提一个建议，你可以把播放器放在左上方可能效果更加好看。