不客气了，欣赏队长好帖
嗯嗯。{:4_171:}
<style>
.mama { left: -400px; width: 1400px; height:900px; top: 150px;background: #eee url('https://pic.imgdb.cn/item/62a030ab0947543129d3d918.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left: 680px; top: 588px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
.stone { position: absolute;left: 700px;top: 300px; right: 50px; width: 50px; height: 50px; background-color: rgba(255,255,255,.35); background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65)); border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;box-shadow: inset 10px 10px 10px rgba(0,0,0,.05), 15px 25px 10px rgba(0,0,0,.1), 15px 20px 20px rgba(0,0,0,.05), inset -10px -10px 15px rgba(255,255,255,.9); }
#lrcDiv_outer { position: absolute; left: 730px; top: 550px; width: fit-content; height: fit-content;padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #2E63A5; border-radius: 6px; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px;overflow: hidden; }
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>
<div class="mama">
<div class="stone"></div>
<div id="lrcDiv_outer">
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://www.joy127.com/url/90732.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<div style="position: absolute; left:620px; top: 1200px; width:75px; height: 20px; ">
<img alt="" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif"/></div>
</div><br><br><br><br><br><br>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['00:01.06','红玫瑰 - 孙露'],
['00:02.30','词：李焯雄'],
['00:03.38','曲：梁翘柏'],
['00:05.62','梦里梦到醒不来的梦'],
['00:36.50','红线里被软禁的红'],
['00:41.38','所有刺激剩下疲乏的痛'],
['00:44.57','再无动于衷'],
['00:48.02','从背后抱你的时候'],
['00:51.58','期待的却是她的面容'],
['00:55.44','说来实在嘲讽'],
['00:57.77','我不太懂偏渴望你懂'],
['01:02.50','是否幸福轻得太沉重'],
['01:06.27','过度使用不痒不痛'],
['01:09.89','烂熟透红空洞了的瞳孔'],
['01:14.04','终于掏空终于有始无终'],
['01:17.39','得不到的永远在骚动'],
['01:21.11','被偏爱的都有恃无恐'],
['01:24.82','玫瑰的红容易受伤的梦'],
['01:29.13','握在手中却流失于指缝'],
['01:32.52','又落空'],
['01:48.35','红是朱砂剂烙印心口'],
['01:51.50','红是蚊子血般平庸'],
['01:55.79','世间美化那仅有的悸动'],
['01:59.49','也磨平悸动'],
['02:02.92','从背后抱你的时候'],
['02:06.49','期待的却是她的面容'],
['02:10.18','说来实在嘲讽'],
['02:12.79','我不太懂偏渴望你懂'],
['02:17.51','是否说爱都太过沉重'],
['02:20.55','过度使用不痒不痛'],
['02:24.82','烧得火红手心缠绕心中'],
['02:30.44','终于冷冻终于有始无终'],
['02:30.56','得不到的永远在骚动'],
['02:32.51','被偏爱的都有恃无恐'],
['02:39.83','玫瑰的红容易受伤的梦'],
['02:44.11','握在手中却流失于指缝'],
['02:47.65','又落空'],
['02:59.72','得不到的永远在骚动'],
['03:06.12','被偏爱的都有恃无恐'],
['03:09.73','玫瑰的红容易受伤的梦'],
['03:14.14','握在手中却流失于指缝'],
['03:17.27','得不到的永远在骚动'],
['03:20.88','被偏爱的都有恃无恐'],
['03:24.77','玫瑰的红容易受伤的梦'],
['03:29.17','握在手中却流失于指缝'],
['03:32.40','又落空'],
['03:38.99','得不到的永远在骚动'],
['03:43.49','被偏爱的都有恃无恐'],
['03:47.22','玫瑰的红伤口绽放的梦'],
['03:51.34','握在手中却流失于指缝'],
['03:57.21','再落空'],
['04:11.73','谢谢欣赏']
];
let toSec = (lrcTime) => {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
meter.value = prog;
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'lightgreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'gold';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightgreen';
lrcUl.style.top = 0;
})
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br><br><br>
页:
1
[2]