你的酒馆对我打了烊 TO：樵哥哥 （学习黑黑嫦娥奔月代码）
<style>
#papa {
margin: 0 0 0 calc(50% - 721px);
width: 1280px;
height: 800px;
top:150px;
background: lightblue url('https://pan.365.tf/uploads/lxx/20221117/002.jpg') no-repeat;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
user-select: none;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
display: grid;
grid-template-areas:
'cur btnplay dur'
'prog prog prog';
gap: 0 4px;
place-items: end center;
left: 100px;
font-size: 14px;
bottom: 30px;
}
#cur { grid-area: cur; color: Azure; }
#dur { grid-area: dur; color: Azure; }
#btnplay {
grid-area: btnplay;
display: grid;
grid-auto-flow: column;
place-items: end center;
gap: 0 4px;
height: 60px;
cursor: pointer;
}
#btnplay > span {
background: red;
width: 2px;
transition: .3s;
}
#prog {
grid-area: prog;
width: 300px;
height: 16px;
opacity: .65;
cursor: pointer;
position: relative;
}
</style>
<div id="papa">
<div id="mplayer">
<div id="cur">00:00</div>
<div id="btnplay"></div>
<div id="dur">00:00</div>
<progress id="prog" max="100"></progress>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/20210508/002.mp3" loop autoplay></audio>
<img src="https://pan.365.tf/uploads/lxx/20221117/hygl.gif" alt="" style="position: absolute; width: 200px; top: 150px; left: 550px;" />
<img src="https://pan.365.tf/uploads/lxx/20221117/rw1.gif" alt="" style="position: absolute; width: 100px; top: 550px; left: 920px; " />
<img src="https://pan.365.tf/uploads/lxx/20221117/rw2.gif" alt="" style="position: absolute; width: 174px; top: 500px; left: 620px; " />
<img src="https://pan.365.tf/uploads/lxx/20221117/yhua.jpg" alt="" style="position: absolute; width: 450px; top: -20px; left: 880px;right: 30px; transform: rotate(-35deg);" />
</div>
<script>
(function() {
(function() {
for(j=0; j<20; j++) {
let pinpu = document.createElement('span');
pinpu.className = 'pinpu';
pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
btnplay.appendChild(pinpu);
}
})();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('timeupdate', () => {
prog.value = aud.currentTime / aud.duration * 100;
cur.innerText = toMin(aud.currentTime);
dur.innerText = toMin(aud.duration);
setPinpu();
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
let setPinpu = ()=> {
let eles = document.querySelectorAll('.pinpu');
eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
};
})();
</script>
<br><br><br><br><br><br><br><br><br><br><br> 你的酒馆对我打了烊
歌手:陈雪凝
你出现
就沉醉了时间
没有酒
我像个荒诞的可怜人
可是你
却不曾施舍二两
你的酒馆对我打了烊
子弹在我心头上了膛
请告诉我今后怎么扛
遍体鳞伤还笑着原谅
你的酒馆对我打了烊
承诺是小孩子说的谎
请告诉我今后怎么扛
你无关痛痒
我敬你
给我感动欢喜
为了你
杀光了世间的烂俗人
可是你
却不曾施舍二两
你的酒馆对我打了烊
子弹在我心头上了膛
请告诉我今后怎么扛
遍体鳞伤还笑着原谅
你的酒馆对我打了烊
承诺是小孩子说的谎
请告诉我今后怎么扛
你无关痛痒
转啊转啊转啊转啊转
没能转进你的心上
看啊看啊看啊看啊看
谁能再把自己点亮
你的酒馆对我打了烊
（转啊转啊转啊转啊转）
子弹在我心头上了膛
（没能转进你的心上）
请告诉我今后怎么扛
（看啊看啊看啊看啊看）
遍体鳞伤还笑着原谅
你的酒馆对我打了烊
承诺是小孩子说的谎
请告诉我今后怎么扛
你无关痛痒
请告诉我今后怎么扛
你无关痛痒
@马黑黑
黑黑这个确实简单了一点，直接套用秒做了{:4_173:} @樵歌
樵哥哥你家的酒馆不让我进去，我只能路过了{:4_170:} 谢谢黑黑的代码分享{:4_187:} 一看到有礼物，樵哥哥立马坐火箭前来{:4_205:} 樵歌 发表于 2022-11-17 20:26
一看到有礼物，樵哥哥立马坐火箭前来
哈哈~~樵哥哥你家大酒店不让我进去{:4_189:} 确认是樵哥哥家酒店，如此，当大宴三个月，凡花潮人民免费。{:4_189:} 樵歌 发表于 2022-11-17 20:27
确认是樵哥哥家酒店，如此，当大宴三个月，凡花潮人民免费。
哈哈~~~每天客满，座无虚席{:4_170:} 小辣椒 发表于 2022-11-17 20:19
@樵歌
樵哥哥你家的酒馆不让我进去，我只能路过了
是哪个狗腿子在看门，我立马去打断他的狗腿，敢让俺家小公主吃闭门羹，哼{:4_173:} 樵歌 发表于 2022-11-17 20:29
是哪个狗腿子在看门，我立马去打断他的狗腿，敢让俺家小公主吃闭门羹，哼
哈哈~~~笑S、了{:4_170:} 别老看手机了，樵哥哥出门亲自来迎接{:4_185:} 樵歌 发表于 2022-11-17 20:31
别老看手机了，樵哥哥出门亲自来迎接
樵哥哥你上来有时间了吧，快下了去休息 小辣椒 发表于 2022-11-17 20:18
@马黑黑
黑黑这个确实简单了一点，直接套用秒做了
{:4_199:} 哈哈，像真的一样啊，好逼真啊{:4_205:} 千羽 发表于 2022-11-17 20:47
哈哈，像真的一样啊，好逼真啊
哈哈，就是套用代码。所以艾特你的，你也是可以玩 樵歌老师家的大酒店好气派啊，哈哈，{:4_173:} 马黑黑 发表于 2022-11-17 20:43
哈哈，这个网络搜一个图以前的音乐，加几个特效，速度就快了 千羽 发表于 2022-11-17 20:49
樵歌老师家的大酒店好气派啊，哈哈，
樵哥哥是土豪{:4_170:} 樵歌老师家的大酒店是新开张的吗？闪烁的霓虹灯，靓丽礼花好美啊{:4_187:}
页:
[1]
2