单曲循环/播放一次[特殊符号按钮]
本帖最后由 亚伦影音工作室 于 2026-5-19 09:33 编辑 <br /><br /><style>#loopbnt{margin: 0px 100px ; width: 45px;height: 45px; background: #000; border-radius: 50%;display: flex;
justify-content: center; font-size: 24px;box-shadow:0px 0px 0px 2px #eee,0px 0px 0px 3px #000;
align-items: center; position: relative; cursor: pointer; color: #fff;}
#play{position: absolute; transform:scale(1)rotate(0deg) }
#pause{position: absolute; opacity:0; transform:scale(0.9)rotate(0deg)}
#bnt{margin: 0px 0px ; top: -45px; width: 45px;height: 45px; background: #000; border-radius: 50%;display: flex;
justify-content: center; font-size: 26px;box-shadow:0px 0px 0px 2px #eee,0px 0px 0px 3px #000;
align-items: center; position: relative; cursor: pointer; color: #fff;}
#mplay{position: absolute; transform:scale(0.9)rotate(90deg) }
#mpause{position: absolute;opacity:0;transform:scale(1)rotate(-90deg)}
</style>
<div id="loopbnt">
<div id="play" >⇄</div>
<div id="pause">↹</div>
</div>
<div id="bnt">
<div id="mplay" >〓</div>
<div id="mpause">▼</div>
</div>
<audio id="aud" controls="controls"autoplay loop src="https://www.oldkids.com.cn/upload/2026/05/15/blog_260855907_20260515160023279.mp3"></audio>
<script >
loopbnt.onclick= () =>{
if (aud.loop ==false,pause.style.opacity == '1') {aud.loop =true;aud.play();
play.style.opacity = '1';pause.style.opacity = '0';
}else{aud.loop =false;
play.style.opacity = '0';pause.style.opacity = '1';
}
};
bnt.onclick= () =>{
if (mplay.style.opacity == "0") {aud.play();
mplay.style.opacity = '1';mpause.style.opacity = '0';
}else{aud.pause();
mplay.style.opacity = '0';mpause.style.opacity = '1';
}
};
</script >
漂亮的符号按钮，恭喜亚伦老师再创新品{:4_190:} 这按钮也能控制播放呢，尤其双箭头那个，可以一次性改变三角按钮的控制形态呢。
欣赏亚伦老师的制作{:4_187:}
页:
[1]