加林森 发表于 2021-12-16 21:13
你继续黑
还是你黑
本帖最后由 加林森 于 2022-5-30 10:08 编辑 <br /><br />马黑黑 发表于 2021-12-16 22:19
还是你黑
我感觉你挺喜欢这歌曲的
<style>
.outer {
left: -214px;
width: 1024px;
height: 640px;
background: #ccc url('https://pic.imgdb.cn/item/6294260509475431295f78af.jpg') no-repeat;
cursor: pointer;
position: relative;
}
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 20px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 60px; bottom: -6px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
</style>
<div class="outer">
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
<audio id="aud" src="https://www.joy127.com/url/86256.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
</div>
<script>
let mama = document.querySelector('.outer'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(20, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
})
</script>
加林森 发表于 2021-12-16 22:20
我感觉你挺喜欢这歌曲的
还行还行
马黑黑 发表于 2021-12-16 22:20
还行还行
明白的
加林森 发表于 2021-12-16 22:25
明白的
如此甚好
马黑黑 发表于 2021-12-16 23:37
如此甚好
老黑还没有上来啊？
加林森 发表于 2021-12-17 18:51
老黑还没有上来啊？
不急慢慢来
马黑黑 发表于 2021-12-17 18:52
不急慢慢来
啊，你在的啊。怎么显示是离线呢？有点晕。
加林森 发表于 2021-12-17 18:58
啊，你在的啊。怎么显示是离线呢？有点晕。
用了隐身卡
马黑黑 发表于 2021-12-17 20:03
用了隐身卡
哦，厉害厉害。
匿名者 发表于 2021-12-17 21:04
哦，厉害厉害。
{:4_199:}
马黑黑 发表于 2021-12-18 08:06
整得人都看不见了{:4_189:}
加林森 发表于 2021-12-18 17:36
整得人都看不见了
都跑光了么
马黑黑 发表于 2021-12-18 17:52
都跑光了么
不好玩
加林森 发表于 2021-12-18 18:48
不好玩
叫东篱来
非常经典的老歌，继续欣赏 {:4_187:} 队长辛苦{:4_190:}
大猫咪 发表于 2021-12-18 20:03
非常经典的老歌，继续欣赏队长辛苦
不辛苦不辛苦。猫猫晚上好！{:4_204:}{:4_190:}
马黑黑 发表于 2021-12-18 19:50
叫东篱来
叫不动，只有小辫子才能把他叫出来。
我也听出是，喀秋莎了，很经典好听。
感觉队长挺温暖，总有好听的歌
顾-念 发表于 2021-12-18 21:18
我也听出是，喀秋莎了，很经典好听。
感觉队长挺温暖，总有好听的歌
谢谢老顾支持！