小辣椒 发表于 2022-9-2 22:54

2035去台湾（学习黑黑视频背景加播放器）

<style>
#papa { left: -344px; width: 1280px; height: 750px; top: 150px;background: gray url('https://pic.imgdb.cn/item/631213af16f2c2beb12c632f.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; bottom: 50px; right: 300px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
#btnwrap { position: relative; width: 40px; height: 40px; 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: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; 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; }
#prog { width: 500px; height: 2px; background: #ccc 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; left: 510px; bottom: 300px; font: bold 2em sans-serif; color: Beige; text-shadow: 1px 1px 2px #000; text-align: center; }
#lrc:hover, #tmsg:hover { color: snow; }
#vid { position: absolute; width: 1280px; height: 815px; top: -65px; object-fit: cover; opacity: 0.25; }
#dt{ position: absolute; width: 500px; height: 200px; top: 65px; left: 114px; }
</style>

<div id="papa">

      <img id="dt" src="https://pic.imgdb.cn/item/631213e216f2c2beb12c7bed.png" alt="" />
      <video id="vid" src="https://wj.zp68.com/lxx/mp4/5d1eb2fd2cb22.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 = [
                ['0.00','2035去台湾'],
        ['5.72','歌手：孟煦东/庞惠晨'],
        ['11.22','2035之前必须扫平那些台独分子 '],
        ['20.42','威慑作用是必须的'],
        ['29.01','坐上那动车去台湾'],
        ['32.99','就在那2035年'],
        ['37.06','去看看那外婆澎湖湾'],
        ['41.25','还有那脚印两对半'],
        ['45.55','坐上那动车去台湾'],
        ['49.54','就在那2035年'],
        ['53.77','去看看那情歌阿里山'],
        ['57.85','还有那神奇的日月潭'],
        ['62.20','啦~'],
        ['70.10','啦~'],
        ['78.60','坐上那动车去北京'],
        ['82.70','日夜思念啊在心中'],
        ['86.97','去看看那天安门上太阳升'],
        ['92.98','还有那雄伟的万里长城'],
        ['99.55','坐上那动车去北京'],
        ['102.55','日夜思念啊在心中'],
        ['106.70','去看看那红旗漫卷映山红'],
        ['112.61','还有那伟大的复兴中国梦'],
        ['118.28','LRC编辑：小辣椒'],
        ['143.10','坐上那动车去台湾'],
        ['146.90','就在那2035年'],
        ['151.01','去看看那外婆澎湖湾'],
        ['155.22','还有那脚印两对半'],
        ['159.39','坐上那动车去台湾'],
        ['163.49','就在那2035年'],
        ['167.76','去看看那情歌阿里山'],
        ['174.76','还有那神奇的日月潭'],
        ['180.31','啦~'],
        ['184.51','啦~'],
        ['192.74','坐上那动车去北京'],
        ['196.68','日夜思念啊在心中'],
        ['200.86','去看看那天安门上太阳升'],
        ['206.84','还有那雄伟的万里长城'],
        ['212.40','坐上那动车去北京'],
        ['216.30','日夜思念啊在心中'],
        ['220.87','去看看那红旗漫卷映山红'],
        ['226.32','还有那伟大的复兴中国梦'],
        ['231.70','啦~'],
        ['239.78','啦~'],
        ['250.82','谢谢欣赏！']
];
let aud = new Audio();
aud.src = 'https://wj.zp68.com/lxx/yunhua/20211114/001.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>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-9-2 22:55

@马黑黑

黑黑快表扬一下，作业完成了{:4_170:}

加林森 发表于 2022-9-2 23:17

厉害厉害，一下就完成作业了。{:4_199:}

马黑黑 发表于 2022-9-2 23:28

乘风破浪会有时

青青子衿 发表于 2022-9-2 23:46

好大气的帖子。。。欣赏小辣椒美帖子。。。{:4_204:}

青青子衿 发表于 2022-9-2 23:47

俺有点伤心。。。根据某些国际惯例，好似2028年不收回台湾，会有点麻烦。。。

红影 发表于 2022-9-3 10:11

亲爱的，这个太豪迈了，非常赞{:4_178:}

红影 发表于 2022-9-3 10:13

坐上那军舰去台湾，就在哪2035年。亲爱的，咱们一起去，去看看回归的宝岛{:4_187:}

红影 发表于 2022-9-3 10:14

溅起的浪花太爽了，把咱们甲板上的酒杯都打湿了{:4_173:}

红影 发表于 2022-9-3 10:15

海浪好大啊，亲爱的，你晕船不{:4_173:}

梦油 发表于 2022-9-3 10:17

小辣椒朋友早晨好！满满的正能量，赞！

千羽 发表于 2022-9-3 15:43

哈哈，就坐舰艇去台湾也挺好的{:4_205:}

千羽 发表于 2022-9-3 15:44

这首歌挺好听的，小辣椒周末快乐{:4_187:}

加林森 发表于 2022-9-3 20:01

{:4_178:}
页: [1]
查看完整版本: 2035去台湾（学习黑黑视频背景加播放器）