孤勇者（回礼马黑黑）
<style>#papa { left:-302px; width: 1200px; height: 675px; background: gray url('https://pic.imgdb.cn/item/630ac71b16f2c2beb11532b5.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; overflow: hidden; }
#player { padding: 10px; position: absolute; left: 20px; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 20px; flex-direction: column; }
#lrctext { font: bold 1.4em sans-serif; color: #1ABDE6; text-shadow: 1px 1px 2px #000; user-select: none; transition: all 1.5s;text-align: center;}
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnmain { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255,215,0,.5); border-radius: 50%; cursor: pointer; transition: all 2s; }
#btnmain:hover { background: tomato; }
#btnplay {width: 16px; height: 16px; background: #ccc; 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; }
#prgline { width: 220px; height: 4px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer;}
#tmsg { font: normal 16px sans-serif; color: orange; user-select: none; text-shadow: 1px 1px 1px #000; transition: 1.5s; }
#tmsg:hover, #lrctext:hover { color: tomato; }
.shipin { position: absolute; width: 100%; height: 735px; top:-90px; object-fit: cover; }
</style>
<div id="papa">
<video class="shipin" src="https://img.tukuppt.com/video_show/2629112/00/01/89/5b4cab01220fb.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<div style="position: absolute; left:0px; bottom: 0px; width:1200px;">
<img alt="" src="https://pic.imgdb.cn/item/630aca4416f2c2beb1168ecb.png"/></div>
<div style="position: absolute; left:20px; top: 0px; width:280px;">
<img alt="" src="https://pic.imgdb.cn/item/630ad2b916f2c2beb11b36be.png"/></div>
<div id="player">
<div id="lrctext">lrc歌词</div>
<div id="btnwrap">
<span id="btnmain"><span id="btnplay"></span><span id="btnpause"></span></span>
<span id="prgline"></span><span id="tmsg">00:00 | 00:00</span>
</div>
</div>
</div>
<script>
let lrcAr = [
['0.02','孤勇者- 陈奕迅'],
['12.02','学习马黑黑彩虹进度条'],
['22.02','都是勇敢的'],
['28.04','你额头的伤口你的不同你犯的错'],
['36.10','都不必隐藏'],
['43.04','你破旧的玩偶你的面具你的自我'],
['51.06','他们说要带着光驯服每一头怪兽'],
['58.07','他们说要缝好你的伤没有人爱小丑'],
['65.08','为何孤独不可光荣'],
['69.01','人只有不完美值得歌颂'],
['73.03','谁说污泥满身的不算英雄'],
['80.08','爱你孤身走暗巷'],
['82.06','爱你不跪的模样'],
['84.05','爱你对峙过绝望'],
['86.03','不肯哭一场'],
['88.02','爱你破烂的衣裳'],
['89.10','却敢堵命运的枪'],
['91.09','爱你和我那么像'],
['93.08','缺口都一样'],
['95.06','去吗 配吗 这褴褛的披风'],
['99.04','战吗 战啊 以最卑微的梦'],
['103.00','致那黑夜中的呜咽与怒吼'],
['110.02','谁说站在光里的才算英雄'],
['128.06','他们说要戒了你的狂'],
['131.06','就像擦掉了污垢'],
['136.01','他们说要顺台阶而上而代价是低头'],
['143.04','那就让我不可乘风'],
['146.05','你一样骄傲着那种孤勇'],
['150.09','谁说对弈平凡的不算英雄'],
['158.04','爱你孤身走暗巷'],
['160.02','爱你不跪的模样'],
['161.10','爱你对峙过绝望'],
['163.09','不肯哭一场'],
['165.07','爱你破烂的衣裳'],
['167.06','却敢堵命运的枪'],
['169.04','爱你和我那么像'],
['171.03','缺口都一样'],
['173.02','去吗 配吗 这褴褛的披风'],
['176.08','战吗 战啊 以最卑微的梦'],
['180.05','致那黑夜中的呜咽与怒吼'],
['187.08','谁说站在光里的才算英雄'],
['192.07','你的斑驳与众不同'],
['199.09','你的沉默震耳欲聋'],
['205.08','You Are The Hero'],
['206.06','爱你孤身走暗巷'],
['208.02','爱你不跪的模样'],
['209.09','爱你对峙过绝望'],
['211.08','不肯哭一场 (You Are The Hero)'],
['213.09','爱你来自于蛮荒'],
['215.05','一生不借谁的光'],
['217.03','你将造你的城邦'],
['219.02','在废墟之上'],
['221.02','去吗 去啊 以最卑微的梦'],
['224.08','战吗 战啊 以最孤高的梦'],
['228.05','致那黑夜中的呜咽与怒吼'],
['235.08','谁说站在光里的才算英雄']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1901371647.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prgline.style.backgroundSize = prgline.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctext.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> 感谢黑黑好礼，送个孤胆英雄给你。做的比较仓促，不够细致。请笑纳@马黑黑{:4_187:} 红影 发表于 2022-8-28 10:48
感谢黑黑好礼，送个孤胆英雄给你。做的比较仓促，不够细致。请笑纳@马黑黑
我恐高，我孤而无勇{:4_170:}
很精致的作品。欣赏大作，并感谢用心之作 漂亮的视频背景。真好！ 这勇往直前的气势和马师绝配~~
送礼的 收礼的 都开心哈{:4_204:} 马黑黑 发表于 2022-8-28 10:56
我恐高，我孤而无勇
很精致的作品。欣赏大作，并感谢用心之作
哪里，“他们说要带着光 驯服每一头代码怪兽”，“为何孤独不可光荣”{:4_187:} 加林森 发表于 2022-8-28 11:09
漂亮的视频背景。真好！
谢谢队长鼓励{:4_187:} 朵拉 发表于 2022-8-28 11:24
这勇往直前的气势和马师绝配~~
送礼的 收礼的 都开心哈
是啊，黑黑在代码的路上一往无前，绝对是天生的勇者{:4_187:} 醉美水芙蓉 发表于 2022-8-28 12:59
做得真漂亮！
多谢水芙蓉美女{:4_187:} 红影 发表于 2022-8-28 13:40
谢谢队长鼓励
不客气的。 亲爱的，制作特棒！{:4_177:} 黑黑收礼开心{:4_187:} 红影 发表于 2022-8-28 13:40
哪里，“他们说要带着光 驯服每一头代码怪兽”，“为何孤独不可光荣”
那就可吧 小辣椒 发表于 2022-8-28 14:47
亲爱的，制作特棒！
谢谢亲爱的，收到礼物赶紧做了个回礼{:4_173:} 马黑黑 发表于 2022-8-28 21:06
那就可吧
这个播放时间，我咋觉得应该把总时间放在小竖线后面，变化的时间放在竖线的前面？ 红影 发表于 2022-8-28 10:48
感谢黑黑好礼，送个孤胆英雄给你。做的比较仓促，不够细致。请笑纳@马黑黑
快去收礼！老兄送你的。 加林森 发表于 2022-8-28 22:15
快去收礼！老兄送你的。
看到了，那个特别漂亮，谢谢队长提醒{:4_187:} 红影 发表于 2022-8-28 22:55
看到了，那个特别漂亮，谢谢队长提醒
好的。 是的，不只站在光里的才是英雄。。。自身发光的更是英雄。。。小马黑黑，一直坚持写代码，俺这样的小笨笨，已经赖上了，每天上来看，再忙再晚，也看看。。。红影友友说的对，小马黑黑是个论坛的孤勇者，敬佩这样的精神，这样的精神多么难能可贵。。太可贵~！