论坛 › 人机音画视频 › 盛世中国-彭科伟

万顷湖 发表于 2026-8-27 16:19

盛世中国-彭科伟

<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_485343">

<div style="position: absolute; left:0px;width:100%;margin-top:120px;">
<style>
#papa { margin: width: 1286px;height: 620px;background: url( ) no-repeat center/cover; box-shadow: 2px 2px 8px #000; overflow: hidden; z-index: 1; position: relative;}
#reflect-right { width:100%;z-index: 2;
position:absolute;margin: 0px 0px;
-webkit-box-reflect:left;
}
.lrc { z-index: 21; position: absolute; top: 20%; left: 41%; width: 740px; height: 350px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #FFFF00; font: 300 20px 'YouYuan', sans-serif; transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px; line-height: 50px; margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.2); color: #FF0000; font-weight: 650; }
#bfq{position: absolute;width:450px;height: 50px;overflow: hidden; z-index: 20;left: 20%; top:90%;}
.start{color: #FFFF00;position: absolute; top:12px; left: 0px;}
.end{color: #FFFF00;position: absolute;top:12px; left: 33%;}
#btn{background: url(https://free.picui.cn/free/6377/2026/08/26/6a8e27f8baf4b.jpeg) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 15%; top: 0px;position: absolute;z-index: 20;cursor: pointer;}
</style>
<div id="papa">
<marquee id="m" behavior="scroll" scrollamount="8" height=620>
<img src="https://free.picui.cn/free/6377/2026/08/26/6a8ea839ba5cd.jpg"id="reflect-right">

</marquee>
<div id="bfq">
<span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
</div>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="aud" src="https://pan.suyanw.cn/view.php/7efdabe57305a9b21b8fb947958dfebe.mp3" autoplay loop ></audio>

<script>
var music = document.getElementById('aud');
var m= document.getElementById('m');

var btn = document.getElementById('btn');
btn.onclick = function() {
if (aud.paused) {
aud.play();m.start();
btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
} else {aud.pause();m.stop();
btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
}
};
const start = document.querySelector('.start')
const end= document.querySelector('.end')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)

}, 1000)

</script>

<script>
let lrc = `盛世中国一彭科伟
绵绵山脉滔滔江河
广阔的神州大地
纵横着千载传说
走过硝烟历遍战火
坚强的华夏儿女
建设起崭新的中国
啊中国啊中国
你见证了多少辉煌
刻下多少苦乐
复兴的梦想 无惧的拼搏
你是繁花似锦的盛世 最美的歌
啊中国啊中国
你是一条腾飞的巨龙
是万家灯火
千万个梦想 千万人拼搏
你是繁花似锦的盛世 最美的歌
绵绵山脉滔滔江河
古老的东方文明
结出那累累硕果
走过沧桑历遍坎坷
智慧的华夏儿女
创造出富强的中国
啊中国啊中国
你点燃了多少辉煌
咽下多少苦痛
复兴的梦想 无尽的拼搏
你是繁花似锦的盛世 最美的歌
啊中国啊中国
你是一条腾飞的巨龙
是万家灯火
千万次梦想 千万人拼搏
你是繁花似锦的盛世 最美
的歌
最美
的歌

"},"code":200}
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#aud");
var ul = document.querySelector("#ul");
var container = document.querySelector(".lrc");

for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
if (lrcData.length < 2) continue;
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData.trim()
}
result.push(obj);
}

function parseTime(lrcTime) {
let lrcTimeArr = lrcTime.split(":");
return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
}

function getIndex() {
let time = audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > time) {
return i - 1;
}
}
return result.length - 1;
}

function createElements() {
let fragment = document.createDocumentFragment();

for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;

li.addEventListener("click", function () {
audio.currentTime = result.time;
setOffset();
});

fragment.appendChild(li);
}

ul.appendChild(fragment);
}

createElements();
let containerHeight = container.clientHeight;
let liHeight = ul.children?.clientHeight || 50;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;

function setOffset() {
const index = getIndex();
if (index < 0) return;

const liHeight = ul.children?.clientHeight || 50;
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

offset = Math.max(minOffset, Math.min(offset, maxOffset));

ul.style.transform = `translateY(${-offset}px)`;

ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
if (index < ul.children.length) {
ul.children.classList.add('active');
}
}

audio.addEventListener("timeupdate", setOffset);
</script>

</div>
<div style="height:960px;"></td></tr></table>

梦油 发表于 2026-8-27 17:13

欣赏朋友精彩佳作，我和朋友天天快乐。

红影 发表于 2026-8-28 13:20

拼接的另一侧貌似有点跳跃，其实两端应该都是均匀滚动才是。
好听的歌曲，欣赏万顷湖老师好帖{:4_187:}

万顷湖 发表于 2026-8-28 14:18

梦油 发表于 2026-8-27 17:13
欣赏朋友精彩佳作，祝福朋友天天快乐。
梦油管理好！谢谢关注，谢谢鼓励。

万顷湖 发表于 2026-8-28 14:19

红影 发表于 2026-8-28 13:20
拼接的另一侧貌似有点跳跃，其实两端应该都是均匀滚动才是。
好听的歌曲，欣赏万顷湖老师好帖

红影管理好！谢谢关注，谢谢指导。

梦油 发表于 2026-8-28 17:05

万顷湖 发表于 2026-8-28 14:18
梦油管理好！谢谢关注，谢谢鼓励。

万顷湖朋友别客气，以后，你就称我老梦吧。

查看完整版本: 盛世中国-彭科伟