加林森 发表于 2022-5-29 19:52

【童心飞扬】《小兔子乖乖》- 《贝乐虎儿歌》

本帖最后由 小九 于 2022-5-29 20:22 编辑 <br /><br /><style>
.outer {
      left: -214px;
      width: 1024px;
      height: 640px;
      background: #ccc url('https://pic.imgdb.cn/item/62935b67094754312975c42b.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="http://www.kumeiwp.com/sub/filestores/2021/12/28/a397e90b48a6612b3e0b962a2aa5fda4.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>

加林森 发表于 2022-5-29 19:53

@马黑黑谢谢老黑教导！

梦油 发表于 2022-5-29 20:19

祝花潮论坛的小儿童、老儿童节日快乐！

小九 发表于 2022-5-29 20:29

祝队长儿童节快乐！童心不老{:4_187:}

加林森 发表于 2022-5-29 20:36

梦油 发表于 2022-5-29 20:19
祝花潮论坛的小儿童、老儿童节日快乐！

谢谢老梦支持！

加林森 发表于 2022-5-29 20:37

小九 发表于 2022-5-29 20:29
祝队长儿童节快乐！童心不老

小九节日活动开始了吧！祝你快乐！也祝大家儿童节快乐！{:4_204:}

东篱闲人 发表于 2022-5-29 20:39

牛！{:5_116:}

加林森 发表于 2022-5-29 20:43

东篱闲人 发表于 2022-5-29 20:39
牛！

小试牛刀。。。。{:4_189:}

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

满满的童趣，快乐无限{:4_187:}

醉美水芙蓉 发表于 2022-5-29 20:47

红影 发表于 2022-5-29 20:53

好可爱的童趣帖子，小兔子乖乖，把门打开，打开门儿，迎接六一{:4_173:}

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

千羽 发表于 2022-5-29 20:46
满满的童趣，快乐无限

好玩吧。{:4_189:}

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

醉美水芙蓉 发表于 2022-5-29 20:47
队长儿童节快乐！

水芙蓉儿童节快乐！

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

加林森 发表于 2022-5-29 21:00
好玩吧。

嗯{:4_181:}

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

红影 发表于 2022-5-29 20:53
好可爱的童趣帖子，小兔子乖乖，把门打开，打开门儿，迎接六一

好玩哈。祝福花潮论坛所有老儿童都快乐！

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

千羽 发表于 2022-5-29 21:00
嗯

千羽也玩一下啊。

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

加林森 发表于 2022-5-29 21:02
千羽也玩一下啊。

嗯，要做一个{:4_181:}

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

千羽 发表于 2022-5-29 21:04
嗯，要做一个

我又制作了儿童节的，你看看。

梦油 发表于 2022-5-29 21:10

加林森 发表于 2022-5-29 20:36
谢谢老梦支持！

别客气

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

梦油 发表于 2022-5-29 21:10
别客气

我又制作了一个出来，你看看。
页: [1] 2
查看完整版本: 【童心飞扬】《小兔子乖乖》- 《贝乐虎儿歌》