嗯嗯，谢谢你的提醒。
队长客气了。早上好{:4_187:} 本帖最后由 加林森 于 2022-5-21 19:22 编辑 <br /><br />红影 发表于 2022-3-5 09:57
队长客气了。早上好
红影上午好！{:4_187:}
<style>
.wrap {
left: -242px;
width: 1080px; height: 625px;
background: teal url('https://pic.imgdb.cn/item/6288c0a809475431292f6cc4.jpg') no-repeat center/cover;
position: relative;
}
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 80px; height: 80px;
left: 10px; bottom: 10px;
border: solid 6px transparent;
border-radius: 50%;
background-image: radial-gradient(ghostwhite, transparent), linear-gradient(120deg,tomato,green,red,gold);
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
font: normal 14px sans-serif;
position: absolute;
}
.circle::before { position: absolute; content: attr(data-per); bottom: 20%;}
.circle::after { position: absolute; content: ''; width: 10px; height: 10px; background: olive; border-radius: 50%; }
.hand {
position: absolute; width: 2px; height: 50%;
bottom: 50%; background: rgba(200,20,20,.45);
transform-origin: bottom;
}
.wrap::before {
content: '';
position: absolute;
width: 50%;
height: 50%;
background: url('https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif') no-repeat
center/cover;
opacity: .55;
left:30px; top: 20px;
}
</style>
<div class="wrap">
<div class="circle" data-per="0%">
<div class="hand"></div>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/83367.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;
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;
hand.style.transform = `rotate(${360*prog/100}deg`;
circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>
加林森 发表于 2022-3-5 10:38
红影上午好！
周六快乐{:4_187:} 红影 发表于 2022-3-5 10:39
周六快乐
大家一起快乐。{:4_204:}{:4_190:} 加林森 发表于 2022-3-5 10:49
大家一起快乐。
{:4_204:} 红影 发表于 2022-3-5 14:13
{:4_190:}
页:
1
[2]