论坛 › 人机音画视频 › 军校校歌-代代相传

万顷湖 发表于 2026-8-15 21:06

军校校歌-代代相传

本帖最后由 万顷湖 于 2026-8-15 21:17 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_485343">

<div style="position: absolute; left:0px;width:120%;margin-top:120px;">
<style>
#papa { margin: width: 1286px;height: 640px;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: 250px; 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: 550; }
#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/11/6a7b023ea154f.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/157374.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-16 00:23

雄壮有力好听的校歌，谢谢万顷湖老师精彩分享{:4_199:}

万顷湖 发表于 2026-8-16 06:44

杨帆 发表于 2026-8-16 00:23
雄壮有力好听的校歌，谢谢万顷湖老师精彩分享

版主好！谢谢您的鼓励。

梦江南 发表于 2026-8-16 15:13

欣赏老师精美制作：雄壮有力好听的军校校歌，点赞！{:4_187:}

万顷湖 发表于 2026-8-16 18:04

梦江南好！谢谢您的鼓励。

查看完整版本: 军校校歌-代代相传