下雨天 - 与少年他/芝麻Mochi
本帖最后由 加林森 于 2022-9-2 18:07 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 623px; background: gray url('https://pic.imgdb.cn/item/6311c27416f2c2beb1faa768.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; right: 20px; top: 20px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
#btnwrap { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #FFFFFF linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #FFFFFF; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 300px; height: 2px; background: #FFFFFF linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(0,200,200,.15); }
#tmsg { font: normal 16px sans-serif; color: lightblue;}
#lrc { position: absolute;right: 680px; top: 10px; font: bold 1.5em sans-serif; color:#FFFFFF； lightblue; text-shadow: 1px 1px 2px #FFFFFF; text-align: center; }
#lrc:hover, #FFFFFF:hover { color: snow; }
#vid { position: absolute; width: 1024px; height: 680px; top: -55px; object-fit: cover;opacity: .25; }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
<div id="lrc">lrc歌词</div>
</div>
<script>
let lrcAr = [
['00.00','下雨天 - 与少年他/芝麻Mochi'],
['14.60','下雨天了怎么办 我好想你'],
['21.73','不敢打给你 我找不到原因'],
['29.03','为什么失眠的声音'],
['32.83','变得好熟悉'],
['36.04','沉默的场景 做你的代替'],
['39.79','陪我等雨停'],
['44.37','期待让人越来越沉溺'],
['51.37','谁和我一样'],
['53.83','等不到他的谁'],
['58.63','爱上你我总在学会'],
['62.89','寂寞的滋味'],
['65.78','一个人撑伞 一个人擦泪'],
['69.23','一个人好累'],
['72.53','怎样的雨 怎样的夜'],
['76.03','怎样的我能让你更想念'],
['79.90','雨要多大'],
['81.50','天要多黑 才能够有你的体贴'],
['87.56','其实 没有我你分不清那些'],
['90.97','差别 结局还能多明显'],
['94.34','别说你会难过'],
['97.41','别说你想改变'],
['102.49','被爱的人不用道歉'],
['138.47','期待让人越来越疲惫'],
['145.57','谁和我一样'],
['149.62','等不到他的谁'],
['154.31','爱上你我总在学会'],
['157.19','寂寞的滋味'],
['160.04','一个人撑伞 一个人擦泪'],
['163.51','一个人好累'],
['166.84','怎样的雨 怎样的夜'],
['170.44','怎样的我能让你更想念'],
['174.18','雨要多大'],
['175.88','天要多黑 才能够有你的体贴'],
['181.76','其实 没有我你分不清那些'],
['185.57','差别 结局还能多明显'],
['189.14','别说你会难过'],
['191.69','别说你想改变'],
['196.69','被爱的人不用道歉'],
['202.15','怎样的雨 怎样的夜'],
['205.67','怎样的我能让你更想念'],
['209.26','雨要多大'],
['210.96','天要多黑 才能够有你的体贴'],
['216.84','其实 没有我你分不清那些'],
['220.54','差别 结局还能多明显'],
['224.32','别说你会难过'],
['226.79','别说你想改变'],
['231.92','被爱的人不用道歉']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1426112587.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
</script>
@马黑黑 @小辣椒 加林森 发表于 2022-9-2 17:54
@马黑黑 @小辣椒
他们没空，我来喝这杯雨水吧，但愿能成仙{:4_189:} 欣赏队长精美的作品 这个雨天的视频倒是挺合适的，漂亮，欣赏队长好帖{:4_187:} 队长这雨下得漂亮了 上海朝阳 发表于 2022-9-2 19:06
他们没空，我来喝这杯雨水吧，但愿能成仙
没有问题的。。。。{:4_189:} 马黑黑 发表于 2022-9-2 19:12
欣赏队长精美的作品
谢谢老黑支持！ 红影 发表于 2022-9-2 19:23
这个雨天的视频倒是挺合适的，漂亮，欣赏队长好帖
谢谢！ 绿叶清舟 发表于 2022-9-2 19:26
队长这雨下得漂亮了
久旱逢甘雨，现在需要雨水了。{:4_189:} 队长这图的创意真好，想知道这杯子多久才能接满雨水{:4_203:} 千羽 发表于 2022-9-2 20:00
队长这图的创意真好，想知道这杯子多久才能接满雨水
困难的。{:4_189:} 加林森 发表于 2022-9-2 20:01
困难的。
俺要等着喝{:4_189:} 千羽 发表于 2022-9-2 20:04
俺要等着喝
那就得等2个小时了。。。。{:4_170:} 加林森 发表于 2022-9-2 19:56
久旱逢甘雨，现在需要雨水了。
是啊，最近雨水开始多了 加林森 发表于 2022-9-2 20:06
那就得等2个小时了。。。。
有点等不及了哈哈{:4_189:} 千羽 发表于 2022-9-2 20:20
有点等不及了哈哈
哈哈哈哈，继续等吧。 绿叶清舟 发表于 2022-9-2 20:15
是啊，最近雨水开始多了
现在发电没有问题了。 队长这个是今天新的吧 队长这个视频背景用的好{:4_178:}