朵拉 发表于 2022-4-9 22:50

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

本帖最后由 朵拉 于 2022-5-3 22:22 编辑 <br /><br /><img src = 'https://tuchuangs.com/imgs/2022/04/09/d40b97491dce7c20.jpg' />

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



<div id="circleDiv" style="position: absolute; left: 450px; top: 1150px;"></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-9 22:57

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

朵拉 发表于 2022-4-9 23:07

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

马黑黑 发表于 2022-4-10 09:03

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

马黑黑 发表于 2022-4-10 09:47

你的代码改动如下，播放器就会在图片上方，具体位置可以自己调整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 09:47

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

朵拉 发表于 2022-4-10 20:46

本帖最后由 朵拉 于 2022-4-10 20:48 编辑

马老师 看过来，按钮重新调整了{:4_190:}

马黑黑 发表于 2022-4-10 21:18

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

嗯，你现在调到左侧去了

加林森 发表于 2022-4-10 21:35

朵拉制作得真漂亮。我提一个建议，你可以把播放器放在左上方可能效果更加好看。
页: [1]
查看完整版本: 学习按钮01（马黑黑原创）