加林森 发表于 2022-5-31 17:49

《雲の上を散歩》（音乐欣赏）

<style>
.outer {
      left: -214px;
      width: 1024px;
      height: 640px;
      background: #ccc url('https://pic.imgdb.cn/item/6295e3cd0947543129663be6.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/90616.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-31 18:19

云雾缭绕，蔚为壮观

加林森 发表于 2022-5-31 18:22

马黑黑 发表于 2022-5-31 18:19
云雾缭绕，蔚为壮观

青岛上空的图片。

马黑黑 发表于 2022-5-31 19:09

加林森 发表于 2022-5-31 18:22
青岛上空的图片。

漂酿

加林森 发表于 2022-5-31 19:14

马黑黑 发表于 2022-5-31 19:09
漂酿

是啊。

红影 发表于 2022-5-31 19:50

图片很漂亮，非常开阔。欣赏队长好帖{:4_187:}

加林森 发表于 2022-5-31 20:35

红影 发表于 2022-5-31 19:50
图片很漂亮，非常开阔。欣赏队长好帖

谢谢！

红影 发表于 2022-5-31 21:23

加林森 发表于 2022-5-31 20:35
谢谢！

不客气，问好队长，晚上好{:4_187:}

加林森 发表于 2022-5-31 21:25

红影 发表于 2022-5-31 21:23
不客气，问好队长，晚上好

好的。大家六一儿童节快乐！

梦油 发表于 2022-5-31 21:30

美图配美乐宛若仙境。

加林森 发表于 2022-5-31 21:41

梦油 发表于 2022-5-31 21:30
美图配美乐宛若仙境。

是的。

红影 发表于 2022-6-1 08:54

加林森 发表于 2022-5-31 21:25
好的。大家六一儿童节快乐！

嗯嗯，今天六一了，我们也解封了。虽然还没出去，知道可以出去了，也觉得开心{:4_173:}

加林森 发表于 2022-6-1 08:56

红影 发表于 2022-6-1 08:54
嗯嗯，今天六一了，我们也解封了。虽然还没出去，知道可以出去了，也觉得开心

心里舒服多了吧。但还是要小心点。

红影 发表于 2022-6-1 09:05

加林森 发表于 2022-6-1 08:56
心里舒服多了吧。但还是要小心点。

是啊，一会准备出去转转，不能浪费解放的机会{:4_173:}

加林森 发表于 2022-6-1 09:08

红影 发表于 2022-6-1 09:05
是啊，一会准备出去转转，不能浪费解放的机会

出去透气是最好的。在家里郁闷了这么久，出去吧。还是要带口罩的哦。

红影 发表于 2022-6-1 18:39

加林森 发表于 2022-6-1 09:08
出去透气是最好的。在家里郁闷了这么久，出去吧。还是要带口罩的哦。

现在街上人也挺多了，上海终于恢复了生气{:4_173:}

加林森 发表于 2022-6-1 18:46

这就很好了嘛。又可以看见东方之珠了。
页: [1]
查看完整版本: 《雲の上を散歩》（音乐欣赏）