Rayhon - Tomchi

马黑黑 · 发表于 2022-5-21 11:56

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-5-21 11:58

主要是想测试新播放器控制按钮：

<style>
.mama {
width: 800px;
height: 600px;
background-color: teal;
background-image: linear-gradient(gray 5%, transparent, lightseagreen),
radial-gradient(circle at 20% 20%, yellow, gold);
}
.mama img {
position: absolute;
width: 200px;
border-radius: 50%;
transform: translate(610px, 100px);
}
.circle {
top: 10px; left: 10px;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
border: 10px solid #5d513c;
border-radius: 50%;
background: linear-gradient(45deg, #ccc, #fff);
cursor: pointer;
position: relative;
}
.circle::before, .circle::after { position: absolute; content: ''; }
.circle::before { font: normal 14px sans-serif; content: attr(data-per); }
.circle::after {
width: 10px;
height: 10px;
border-radius: 50%;
background: #eee;
right: -10px;
}
.ball {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #eee;
background-image: radial-gradient(#fff, transparent);
}
@keyframes rot {
from {transform: rotate(-90deg) translate(105px); }
to { transform: rotate(270deg) translate(105px); }
}
</style>
<div class="mama">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1332775473.mp3" autoplay="autoplay" loop="loop"></audio>
<div class="circle" data-per="0%">
<div class="ball"></div>
<img src="/data/attachment/forum/202205/21/115239abqv8h8mab7razrw.jpg" alt="" />
</div>
</div>
<script>
let task, current;
let aud = document.querySelector('#aud');
let circle = document.querySelector('.circle');
let ball = document.querySelector('.ball');
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
ball.style.transform = `rotate(${360*prog/100}deg) translate(45px)`;
circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>