2035去台湾
本帖最后由 宁静 于 2022-9-3 12:54 编辑 <br /><br /><style>#papa { left: -214px; 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: 470px; 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年'],
['166.76','去看看那情歌阿里山'],
['170.76','还有那神奇的日月潭'],
['176.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> 首席欣赏{:10_402:} 背景视频汹涌彭拜，勇往直前 2035一起去宝岛台湾 合唱版好听{:9022:} 好像还有一个单唱没有这个好听 界面清晰，简洁大气 css播放器现在感觉运用比较流行了 这个制作也是简单，我那边代码上传后发布更加稳定 去看看今天我发的