论坛 › 欢乐水吧 › 黑客成长记（套用黑黑作业）

小辣椒 发表于 2022-8-28 18:31

黑客成长记（套用黑黑作业）

<style>
#papa { margin: auto; width: 1024px; height: 660px;left: -210px;TOP:120px; background: gray url('https://pic.imgdb.cn/item/630b422316f2c2beb16808f8.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#player { padding: 10px; position: absolute; left: 20px; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; }
#lrctext { font: bold 1.4em sans-serif; color: silver; text-shadow: 1px 1px 2px #000; user-select: none; transition: all 1.5s; }
#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(0,0,0,.5); border-radius: 50%; cursor: pointer; transition: all 2s; }
#btnmain:hover { background: orange; }
#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: 200px; 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; }
</style>

<div id="papa">
      <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 = [
                ['00.00','作词 : Mc光光'],
        ['2.44','作曲 : Mc光光/李啦LIL4'],
        ['5.75','编曲：Lil4 混音：孤矢'],
        ['10.06','LRC编辑：小辣椒'],
        ['15.17','没有任何防火墙能防住你'],
        ['18.46','杀毒软件也无法能阻止你'],
        ['22.38','你的完美作案表现像个黑客'],
        ['26.01','面对你没有任何对策'],
        ['30.14','那些代码没人学的会'],
        ['33.60','猜不出来你是谁'],
        ['38.13','你的身手像个黑客'],
        ['40.85','让我失去一切对策'],
        ['45.23','最坚硬的先进的防御网面对你都不管用'],
        ['47.75','像天命你兼并着迷人的魅力会让人感动'],
        ['51.65','你让人上瘾 到无法忘记 像最贵的口渴'],
        ['55.10','却没那么顶 回家就醒 就像一场梦'],
        ['59.10','那梦里的女孩在告别时从来不会对我招手'],
        ['63.08','每一次的邂逅我被伤透她却都及时的逃走'],
        ['66.69','runaway runaway run escape'],
        ['69.44','看不清 摸不透 究竟 你是谁'],
        ['74.01','come back to my town'],
        ['75.82','脑里思索着你all day'],
        ['77.97','受再多的伤 不搞定你绝不后退'],
        ['81.49','翻越那道墙 take u down n take it slowly'],
        ['85.33','我就是那道光 everythin will b ok'],
        ['89.28','ok ok ok'],
        ['93.36','是你让我变的像个酒鬼'],
        ['97.17','no way no way'],
        ['100.70','我喝的一定是最烈的勾兑'],
        ['104.46','没有任何防火墙能防住你'],
        ['109.69','杀毒软件也无法能阻止你'],
        ['113.38','你的完美作案表现像个黑客'],
        ['116.86','面对你没有任何对策'],
        ['121.23','那些代码没人学的会'],
        ['124.21','猜不出来你是谁'],
        ['128.87','你的身手像个黑客'],
        ['131.56','让我失去一切对策'],
        ['136.04','谢谢欣赏！'],
        ['138.33','谢谢欣赏！']
];
let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=1415732182.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.duration) + ' | ' + toMin(aud.currentTime);
      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>
<br><br><br><br><br><br><br>

小辣椒 发表于 2022-8-28 18:35

{:4_172:}

小辣椒 发表于 2022-8-28 18:36

黑黑你代码高手@马黑黑

梦油 发表于 2022-8-28 20:07

小辣椒朋友晚上好！真是上乘之作。
                   {:4_199:}

加林森 发表于 2022-8-28 20:11

看哪个黑啊？{:4_189:}

红影 发表于 2022-8-28 20:31

这个图图还带着黑黑的头像呢，呵呵，挺适合黑黑的{:4_187:}

红影 发表于 2022-8-28 20:34

“那些代码没人学得会”，看到这句歌词笑喷，黑黑的代码无穷无尽，真的学也学不会呢{:4_173:}

马黑黑 发表于 2022-8-28 20:57

小辣椒 发表于 2022-8-28 18:36
黑黑你代码高手@马黑黑

红客不行么

小辣椒 发表于 2022-8-29 21:33

马黑黑 发表于 2022-8-28 20:57
红客不行么

你的头像换红的就可以是红客了{:4_170:}

小辣椒 发表于 2022-8-29 21:34

红影 发表于 2022-8-28 20:34
“那些代码没人学得会”，看到这句歌词笑喷，黑黑的代码无穷无尽，真的学也学不会呢

是啊，每天看代码我都眼睛更加眯了{:4_201:}

小辣椒 发表于 2022-8-29 21:34

红影 发表于 2022-8-28 20:31
这个图图还带着黑黑的头像呢，呵呵，挺适合黑黑的

哈哈，就是送黑黑这个黑客的{:4_189:}

小辣椒 发表于 2022-8-29 21:35

加林森 发表于 2022-8-28 20:11
看哪个黑啊？

队长晚上好，我今天上来迟了

小辣椒 发表于 2022-8-29 21:35

梦油 发表于 2022-8-28 20:07
小辣椒朋友晚上好！真是上乘之作。

谢谢梦油支持鼓励{:4_187:}

加林森 发表于 2022-8-29 21:37

小辣椒 发表于 2022-8-29 21:35
队长晚上好，我今天上来迟了

小辣椒晚上好！没有关系的。上来就好！{:4_190:}

小辣椒 发表于 2022-8-29 21:40

加林森 发表于 2022-8-29 21:37
小辣椒晚上好！没有关系的。上来就好！

我来看看黑黑有没有新的分享

加林森 发表于 2022-8-29 21:41

小辣椒 发表于 2022-8-29 21:40
我来看看黑黑有没有新的分享

有的。

青青子衿 发表于 2022-8-29 21:48

小辣椒友友，好棒的作品，赞一个{:4_204:}

马黑黑 发表于 2022-8-29 21:49

小辣椒 发表于 2022-8-29 21:33
你的头像换红的就可以是红客了

我不喜欢披红戴绿的

青青子衿 发表于 2022-8-29 21:51

小马黑黑友，以后带我们翻墙打怪兽。。。哪天，去一趟白房子{:4_191:}加油，小马黑黑

梦油 发表于 2022-8-30 10:37

小辣椒 发表于 2022-8-29 21:35
谢谢梦油支持鼓励

你对俺的支持更大。

查看完整版本: 黑客成长记（套用黑黑作业）