论坛 › 欢乐水吧 › 后宫一景

马黑黑 发表于 2022-5-29 20:53

后宫一景

<style>
.outer {
        left: -214px;
        width: 1024px;
        height: 652px;
        background: #ccc url('/data/attachment/forum/202205/29/204847kxuap28yiotxai03.jpg') no-repeat;
        cursor: pointer;
        position: relative;
}
.outer img { position: absolute; bottom: 0; width: 292px; }
.mama { left: calc(100% - 130px); width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
.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">
        <img src="/data/attachment/forum/202205/29/204737vts37uitesbqosdr.png" alt="" />
        <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://music.163.com/song/media/outer/url?id=1945802993.mp3" autoplay="autoplay" loop="loop"></audio>
        </div>
</div>

<script>

let mama = document.querySelector('.mama'), 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>

千羽 发表于 2022-5-29 20:57

哈哈，笑S我了{:4_196:}

绿叶清舟 发表于 2022-5-29 20:57

拿枪干吗啊{:4_189:}

千羽 发表于 2022-5-29 20:58

东篱老师端枪守家园？{:4_196:}

沧海一声啸 发表于 2022-5-29 21:00

有谁来闯后宫了

加林森 发表于 2022-5-29 21:05

老兄连后宫都不放心啊。。。。。{:4_170:}

小九 发表于 2022-5-29 21:08

老头的后宫好辉煌

你师父有疯人院，你有后宫， 齐活了{:4_189:}

醉美水芙蓉 发表于 2022-5-29 21:18

马黑黑 发表于 2022-5-29 21:29

千羽 发表于 2022-5-29 20:57
哈哈，笑S我了

{:5_106:}

马黑黑 发表于 2022-5-29 21:31

醉美水芙蓉 发表于 2022-5-29 21:18
东篱老师家富丽堂皇呀！

富可敌国

马黑黑 发表于 2022-5-29 21:32

绿叶清舟 发表于 2022-5-29 20:57
拿枪干吗啊

严防死守

马黑黑 发表于 2022-5-29 21:32

小九 发表于 2022-5-29 21:08
老头的后宫好辉煌

你师父有疯人院，你有后宫， 齐活了

啥也不缺呢

马黑黑 发表于 2022-5-29 21:33

千羽 发表于 2022-5-29 20:58
东篱老师端枪守家园？

枪杆子里面出安全

马黑黑 发表于 2022-5-29 21:33

加林森 发表于 2022-5-29 21:05
老兄连后宫都不放心啊。。。。。

你不是刚来挑战过么{:4_189:}

千羽 发表于 2022-5-29 21:37

马黑黑 发表于 2022-5-29 21:33
枪杆子里面出安全

哈哈，，你让东篱老师飘在地上的{:4_189:}

马黑黑 发表于 2022-5-29 21:38

千羽 发表于 2022-5-29 21:37
哈哈，，你让东篱老师飘在地上的

人家有轻功

加林森 发表于 2022-5-29 21:38

马黑黑 发表于 2022-5-29 21:33
你不是刚来挑战过么

也是哈，我都忘记了。。。。{:4_189:}

马黑黑 发表于 2022-5-29 21:39

加林森 发表于 2022-5-29 21:38
也是哈，我都忘记了。。。。

败阵的事情是最容易忘记的{:4_170:}

千羽 发表于 2022-5-29 21:41

马黑黑 发表于 2022-5-29 21:38
人家有轻功

哈哈，东篱老师为了守住他的后宫也太遭罪了{:4_196:}

加林森 发表于 2022-5-29 21:42

马黑黑 发表于 2022-5-29 21:39
败阵的事情是最容易忘记的

他的子弹打不着我的。我闪闪闪。。。。。{:4_193:}

查看完整版本: 后宫一景