本帖最后由 加林森 于 2022-5-28 12:39 编辑 <br /><br />红影 发表于 2021-12-1 20:31
不管怎样都会进入新的一年啊
哈哈哈哈，你厉害啊。
<style>
.myBox {
left: -302px;
width: 1200px;
height: 600px;
box-shadow: 2px 2px 4px gray;
position: relative;
}
.reflect {
width: 600px;
height: 600px;
background: url('https://pic.imgdb.cn/item/6291a69009475431292a099b.jpg') no-repeat;
box-reflect: right;
-webkit-box-reflect: right;
}
.tube {
display: flex;
justify-content: center;
width: 10px;
height: 100px;
left: 415px; top: 50px;
background-color: #eee;
background: linear-gradient(#aaa 1px, #eee 1px);
background-size: 8px 10px;
box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.meter {
position: absolute;
width: 4px;
height: 0;
background: rgba(255,0,0,.65);
bottom: 0;
}
</style>
<div class="myBox">
<div class="reflect">
<div class="tube">
<div class="meter"></div>
</div>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90574.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let tube = document.querySelector('.tube'), meter = document.querySelector('.meter'), aud = document.querySelector('#aud');
let current, task;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
tube.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
meter.style.height = prog + '%';
circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>