敲敲门
本帖最后由 绿叶清舟 于 2022-7-24 19:57 编辑 <br /><br /><style>#papa { left: -92px; width: 900px; height: 500px; background: #eee url('https://img2.baidu.com/it/u=387880593,2733558045&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500') no-repeat; background-position: 1200px 0; box-shadow: 4px 4px 20px #000; overflow: hidden; position: relative; }
#prologue { position: absolute; width: 240px; height: 240px; left: calc(50% - 120px); top: calc(50% - 120px); cursor: pointer; transition: left 4s; }
#papa p { margin: 0; padding: 0; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#playbox { position: absolute; left: 1200px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: #663399; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div id="papa">
<img id="prologue" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp2.itc.cn%2Fq_70%2Fimages03%2F20200705%2F2c7793a28ca34c04a7e875b1f98c02f1.gif&refer=http%3A%2F%2Fp2.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661244682&t=87dc19a7e29f9c6facf06484a09d4c3c" alt="" />
<div id="playbox">
<p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0%</span>
</p>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=309909.mp3"></audio>
<script>
let ww = papa.offsetWidth;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr = [
['2.88','敲敲门'],
['3.84','徐小凤'],
['4.96','编辑：韵薇Rhyme'],
['17.35','敲敲门你在不在'],
['21.12','有人说你没回来'],
['24.97','满园花儿为你开'],
['28.84','你为什么不来采'],
['32.67','敲敲门你在不在'],
['36.40','有人说你没回来'],
['40.21','要是你还不来采'],
['44.19','花儿不再为你开'],
['48.28','美丽的花朵人人爱'],
['51.63','世界充满了情和爱'],
['55.42','把不把握就在你自己'],
['59.14','需要她就快回来'],
['70.71','敲敲门你在不在'],
['74.40','有人说你没回来'],
['78.21','满园花儿为你开'],
['82.02','你为什么不来采'],
['85.88','敲敲门你在不在'],
['89.61','有人说你没回来'],
['93.44','要是你还不来采'],
['97.28','花儿不再为你开'],
['101.48','美丽的花朵人人爱'],
['104.91','世界充满了情和爱'],
['108.80','把不把握就在你自己'],
['112.65','需要她就快回来'],
['131.51','美丽的花朵人人爱'],
['135.27','世界充满了情和爱'],
['138.97','把不把握就在你自己'],
['142.78','需要她就快回来'],
['146.88','需要她就快回来']
];
prologue.onclick = () => {
prologue.style.transform = 'scale(1,1)';
prologue.style.left = '-240px';
aud.play();
iniBg(papa,0,0);
iniBg(playbox,1,10);
}
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('ended', () => {
iniBg(papa,0,ww);
iniBg(playbox,1,ww);
prologue.style.transform = 'scale(-1,1)';
prologue.style.left = 'calc(50% - 120px)';
prologue.style.top = 'calc(50% - 120px)';
});
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr) geci.innerHTML = lrcAr;
}
});
let toMin = (val) => {
if(!val) return '0:0';
val = Math.floor(val);
return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
let iniBg = (ele,id,number) => {
ele.style.transition = 'all 4s';
id == 0 ? ele.style.backgroundPosition = number + 'px' : ele.style.left = number + 'px';
}
</script>
这匹马敲得太粗暴了，还是那只小鸟儿敲得温柔又有节奏感{:4_173:} 哇瑟~~~清舟这个敲门砖真的运用的太好了{:4_178:} 清舟里面应该出来个大灰狼也是好的，门打开一只大灰狼跳出来，刺激{:4_170:} 这个好玩，敲敲门就能见到镁铝，俺也去找个们敲敲 小辣椒 发表于 2022-7-24 19:42
清舟里面应该出来个大灰狼也是好的，门打开一只大灰狼跳出来，刺激
变成狼外婆啦{:4_189:} 马黑黑 发表于 2022-7-24 19:51
这个好玩，敲敲门就能见到镁铝，俺也去找个们敲敲
再去敲个看看{:4_189:} 红影 发表于 2022-7-24 19:26
这匹马敲得太粗暴了，还是那只小鸟儿敲得温柔又有节奏感
男马就这样啦{:4_189:} 哈哈哈，太好玩了，可怎么回答呢？在呢！还有大象老虎犀牛都在{:4_189:} 绿叶清舟 发表于 2022-7-24 19:58
再去敲个看看
敲了，人家不开门 好玩好玩，里面藏看狼人啊。{:4_199:} 绿叶清舟 发表于 2022-7-24 19:58
男马就这样啦
很豪横{:4_189:} 上海朝阳 发表于 2022-7-24 20:38
哈哈哈，太好玩了，可怎么回答呢？在呢！还有大象老虎犀牛都在
是个狼外婆呢{:4_189:} 马黑黑 发表于 2022-7-24 21:01
敲了，人家不开门
是不是敲错门了啊 加林森 发表于 2022-7-24 21:05
好玩好玩，里面藏看狼人啊。
狼外婆了{:4_189:} 绿叶清舟 发表于 2022-7-25 10:07
狼外婆了
厉害了。 绿叶清舟 发表于 2022-7-25 10:06
是不是敲错门了啊
我敲的是猪栏门 哈哈，不应该是狼外婆敲门么 顾-念 发表于 2022-7-27 18:31
哈哈，不应该是狼外婆敲门么
马想找狼外婆聊聊了{:4_189:}
页:
[1]