《美人痛》- 杨曼莉
本帖最后由 加林森 于 2022-6-20 20:41 编辑 <br /><br /><style>.outer { left: -214px; width: 1024px; height: 640px; background: transparent; box-shadow: 0 2px 24px #00AEAE; position: relative; }
.picbox { position: absolute; width: 1024px; height: 640px; animation: fadeout 2s; }
.mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
.wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
.mama meter { width: 90px; position: relative; }
.wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.lrcbox { transform: translate(20px, 20px); font: bold 1.2em / 2em sans-serif; color: lightgreen; text-shadow: 1px 1px 1px #000; border-radius: 100% 0; position: absolute; }
@keyframes up { from { top: -6px; } to { top: -16px; } }
@keyframes fadein { from { opacity: .1; } to {opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to {opacity: .1; } }
</style>
<div class="outer">
<img class="picbox" src="https://s1.ax1x.com/2022/06/20/XvnYBn.jpg" alt="" />
<div class="mama">
<h2>美人痛--杨曼莉</h2>
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
<div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90887.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mama = document.querySelector('.mama'),
picbox = document.querySelector('.picbox'),
wrap = document.querySelector('.wrap'),
lrcbox = document.querySelector('.lrcbox'),
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;
let idx = 0, flag = true, slip= 1;
let picAr = [
'https://s1.ax1x.com/2022/06/20/XvnYBn.jpg',
'https://s1.ax1x.com/2022/06/20/XvuiEq.jpg',
'https://s1.ax1x.com/2022/06/20/XvuyRS.jpg ',
'https://s1.ax1x.com/2022/06/20/XvKpRO.jpg',
'https://s1.ax1x.com/2022/06/20/XvKDm9.jpg',
'https://s1.ax1x.com/2022/06/20/XvQ0aR.jpg',
'https://s1.ax1x.com/2022/06/20/XvGjPA.jpg'
];
Array.from({length: 10}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.left = key * 6 + key * 3 + 'px';
ele.style.height = num(10,60) + 'px';
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(10, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
let timer = setInterval(() => {
idx ++;
if(idx >= picAr.length) idx = 0;
picbox.src = picAr;
flag ? (picbox.style.animation = 'fadein .8s', flag = false) : (picbox.style.animation = 'fadeout .8s', flag = true);
}, 10000);
</script>
痛到歌词都出不来，腻害腻害{:4_173:}
问题：JS里缺失歌词数组，也就是歌词没有 马黑黑 发表于 2022-6-20 12:34
痛到歌词都出不来，腻害腻害
问题：JS里缺失歌词数组，也就是歌词没有
我没有放歌词的。偷哈懒。 嗬，特写啊！ 漂亮，恭喜队长做成功{:4_187:} 加林森 发表于 2022-6-20 12:38
我没有放歌词的。偷哈懒。
但播放器监听里还有处理歌词的，这是不允许的。你按F12，在右边会查到你的错误 好的。 加林森 发表于 2022-6-20 13:07
好的。
嗯，要么放歌词，要么删掉处理歌词的JS代码，不然不合法，浏览器实际上是报错的 梦油 发表于 2022-6-20 12:53
嗬，特写啊！
在做实验。 红影 发表于 2022-6-20 12:53
漂亮，恭喜队长做成功
谢谢红影。{:4_204:} 马黑黑 发表于 2022-6-20 13:11
嗯，要么放歌词，要么删掉处理歌词的JS代码，不然不合法，浏览器实际上是报错的
我已经删除了怎么还有啊？晕了。 加林森 发表于 2022-6-20 13:15
在做实验。
试验的很好啊。 梦油 发表于 2022-6-20 15:29
试验的很好啊。
还不算成功。 加林森 发表于 2022-6-20 16:31
还不算成功。
没有最好，只有更好。 梦油 发表于 2022-6-20 16:37
没有最好，只有更好。
谢谢老梦！{:4_190:} 醉美水芙蓉 发表于 2022-6-20 16:54
队长做得很漂亮！
才学习的，好没有做好。 加林森 发表于 2022-6-20 16:46
谢谢老梦！
别客气。 梦油 发表于 2022-6-20 17:02
别客气。
嗯嗯。 队长做得漂亮，赞
页:
[1]
2