战友之歌-王宏伟
本帖最后由 万顷湖 于 2026-8-22 17:28 编辑 <br /><br /><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: 520px;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 15px '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://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) 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/2026/08/22/6a893ca8cdb6d.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://www.joy127.com/url/157974.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>
{:4_174:} 制作大气{:4_187:} 正能量的好帖{:4_199:} 欣赏万老师的精彩音画。{:4_178:} 王宏伟唱的歌可不少了。
问好万顷湖朋友。 很令人动容的战友情，很正能量的帖子，欣赏万顷湖老师好帖{:4_199:} 红影 发表于 2026-8-22 22:11
很令人动容的战友情，很正能量的帖子，欣赏万顷湖老师好帖
谢谢持续扶助！赞花潮好天地，赞虹影好管理。
梦油 发表于 2026-8-22 17:00
王宏伟唱的歌可不少了。
问好万顷湖朋友。
谢谢持续扶助！赞花潮好天地，赞梦油好管理。
梦江南 发表于 2026-8-22 15:33
欣赏万老师的精彩音画。
处处花潮涌，人人梦江南。谢谢持续扶助！
万顷湖 发表于 2026-8-23 11:08
谢谢持续扶助！赞花潮好天地，赞梦油好管理。
万顷湖朋友别客气。
页:
[1]