《有趣的灵魂》（学习老黑的柱状波形播放器代码制作）
本帖最后由 加林森 于 2022-5-29 11:35 编辑 <br /><br /><style>.outer {
left: -214px;
width: 1024px;
height: 640px;
background: #ccc url('https://pic.imgdb.cn/item/6292d6d90947543129ab27b6.jpg') no-repeat;
cursor: pointer;
position: relative;
}
.wrap {
left: 10px; top: calc(100% - 60px);
width: 70px;
height: 60px;
position: relative;
}
.sskey {
width: 6px;
height: 0px;
background-color: rgba(255,0,0,.6);
display: inline-block;
position: relative;
}
</style>
<div class="outer">
<div class="wrap"></div>
<audio id="aud" src="https://www.joy127.com/url/90585.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let getnum = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.backgroundColor = `rgba(${getnum(0,255)},${getnum(0,255)},${getnum(0,255)},.6)`;
wrap.appendChild(ele);
});
let sskey = document.querySelectorAll('.sskey');
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = getnum(30, 60) + 'px';
});
});
</script>
@马黑黑 这个动作快呀 马黑黑 发表于 2022-5-29 10:34
这个动作快呀
肯定要快啊。。。。。{:4_170:} 加林森 发表于 2022-5-29 10:55
肯定要快啊。。。。。
不要囫囵吞枣就成 马黑黑 发表于 2022-5-29 11:12
不要囫囵吞枣就成
先学上来，再去修改，这个应该是个好办法的吧。 加林森 发表于 2022-5-29 11:18
先学上来，再去修改，这个应该是个好办法的吧。
冲动的心情可以理解{:4_170:} 马黑黑 发表于 2022-5-29 11:26
冲动的心情可以理解
我的精神就是这样的{:4_170:} 加林森 发表于 2022-5-29 11:34
我的精神就是这样的
什么血型？ 马黑黑 发表于 2022-5-29 12:19
什么血型？
B 你的悟性真高，你学得真快。 梦油 发表于 2022-5-29 13:36
你的悟性真高，你学得真快。
只要好玩我的动作很快的。{:4_189:} 加林森 发表于 2022-5-29 12:34
B
怪不得。B型的有部分人性子急。 真漂亮，这个底下没固定，我去看看队长的另一个{:4_187:} 马黑黑 发表于 2022-5-29 14:20
怪不得。B型的有部分人性子急。
有这种说法？ 红影 发表于 2022-5-29 14:26
真漂亮，这个底下没固定，我去看看队长的另一个
都是我自己的了。 加林森 发表于 2022-5-29 14:33
有这种说法？
林黛玉就是B型的。血型与性格有关系但不绝对，还要看其它情形 哦哦哦。。。。。。 加林森 发表于 2022-5-29 13:47
只要好玩我的动作很快的。
兵贵神速。 梦油 发表于 2022-5-29 15:10
兵贵神速。
就是这个道理。
页:
[1]
2