我们的战场在天上-花潮论坛

万顷湖 发表于 2026-7-27 13:37

本帖最后由万顷湖于 2026-7-27 20:42 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_501589">
<br /><br /><div style="position: absolute; left:20px;width:100%;margin-top:120px;">
<style>
#papa {position: relative;
         width: 1286px;
         height:720px;
         margin:
         overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
         background:#800000 url(https://free.picui.cn/free/2026/07/27/6a66e831b11ee.jpg) no-repeat center / cover;
--state: running;
   }
.pTitle { line-height: 2em; color: transparent; font-family: STLiti, NSimSun, 'Microsoft YaHei'; font-size: 40px; font-weight:400; text-align: center; margin: auto; z-index: 5; position: absolute; left: 2%; top: 2%; }
.sp{animation: flashTitle 8slinear 20 var(--state);}
.pTitle span:nth-child(1) { animation-delay: 0s;}
.pTitle span:nth-child(2) { animation-delay: 0.5s;}
.pTitle span:nth-child(3) { animation-delay: 1s; }
.pTitle span:nth-child(4) { animation-delay: 1.5s;}
.pTitle span:nth-child(5) { animation-delay: 2s;}
.pTitle span:nth-child(6) { animation-delay: 2.5s; }
.pTitle span:nth-child(7) { animation-delay: 3s; }
.pTitle span:nth-child(8) { animation-delay: 3.5s; }
.pTitle span:nth-child(9) { animation-delay:4s; }
@keyframes flashTitle { 0%, 100% { color:#ff0000; text-shadow:0px 2px 0px #fff,2px 0px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff; } 50%, 90% { color: transparent; text-shadow: 0px 0px 20px #00ff00; } }
#pa{margin: 40% 70%;position:absolute;width: 200px; height:150px; overflow: hidden;}
#anniu {position: absolute; top:45px; width:140px;left: 40px;}
.start{color: #555;position: absolute; top:18px; left: 4px;}
.end{color: #555;position: absolute;top:18px; right:4px;}
   #btn{position: absolute; top:0px; width: 60px;height:60px; cursor: pointer; left: 40px;z-index: 2;}
#playIcon {display: none; }
#prog {position: absolute; display: grid; place-items: center; width: 180px; height: 140px; right: 0px; bottom: 0px; border-radius: 50% 20% ; -webkit-mask: radial-gra**nt( transparent 68%, #000 68%, #000 0);cursor: pointer;z-index:1; }
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gra**nt(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 40%;bottom: 15%;transform: translate(-50%);font:200 1.8em/1.2em 华文隶书; color: #000080;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0);color: transparent; text-shadow: 0px 0px 10px #00ff00;} }@keyframes cover2 { to { clip-path: inset(0 0 0 0);color: transparent; text-shadow: 0px 0px 10px #fff000;} }
</style>
<audio id="aud" src="https://www.joy127.com/url/156254.mp3" autoplay loop></audio>
<div id="papa">
<div class="pTitle">
   <span class="sp">人</span>
   <span class="sp">民</span>
   <span class="sp">空</span>
   <span class="sp">军-</span>
   <span class="sp">花</span>
   <span class="sp">潮</span>
   <span class="sp">论</span>
   <span class="sp">坛</span>
</div>
<div id="pa">

<div id="anniu">
<span class="start">00:00</span> <svg id="btn" width="60" height="60" fill="#555" viewBox="0 0 24 24">
   <path id="playIcon" d="M8 5v14l11-7z"></path>
   <path id="pauseIcon" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
   </svg>
<span class="end">00:00</span>
</div>
<div id="prog" title=""></div>
</div>
<div data-lrc="" id="lrc"></div>
</div>
<script>

var playIcon = document.getElementById('playIcon');
var pauseIcon = document.getElementById('pauseIcon');

var btn = document.getElementById('btn');
   btn.onclick = function() {
         if (aud.paused) {
            aud.play();
   playIcon.style.display = 'none';
   pauseIcon.style.display = 'block';
papa.style.setProperty('--state', 'running');
            } else {
            aud.pause();
   playIcon.style.display = 'block';
   pauseIcon.style.display = 'none';
papa.style.setProperty('--state', 'paused');
}
};

var start = document.querySelector('.start')
var 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)
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
            deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
            aud.currentTime = aud.duration * deg / 360;
            }
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gra**nt(from -2deg, #fff555, #fff555, #fff555 ' + aud.currentTime / aud.duration * 100 + '%, #555 0)';});
            });
</script>

<script >
(function() {
/*lrc*/
let lrcStr = `我们的战场在天上-花潮论坛

烈风逐海浪

雄鹰过山岗

雷电生长展出翅膀英雄渴望荣光

热血好儿郎

家国有担当

雨骤风狂见胆量

旌旗云端飞扬

我们的战场在天上

日月装进我行囊

呼啸龙吟是我浅歌低唱

航迹如虹有我自在模样

我们的战场在天上

天地放在我胸膛

要打就打他个漂亮胜仗

要战就战他个荡气回肠

烈风逐海浪

雄鹰过山岗

雷电生长出翅膀英雄渴望荣光

热血好儿郎

家国有担当

雨骤风狂见胆量

旌旗云端飞扬

我们的战场在天上

日月装进我行囊

虎啸龙吟是我浅歌低唱

航迹如虹有我自在模样

我们的战场在天上

天地放在我胸膛

要打就打他个漂亮胜仗

要战就战他个荡气回肠

我们的战场在天上

日月装进我行囊

虎啸龙吟是我浅歌低唱

航迹如虹有我自在模样

我们的战场在天上

天地放在我胸膛

要打就打他个漂亮胜仗

要战就战他个荡气回肠

`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, averAdd = 0.3;

/* */
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/* lrc n*3 */
let getLrcAr = (text) => {
   let lrcAr = [];
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/* */
let showLrc = (time) => {
   let name = mFlag ? 'cover1' : 'cover2';
   lrc.innerHTML = lrcAr;
   lrc.dataset.lrc = lrcAr;
   lrc.style.setProperty('--motion', name);
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
   mKey += 1;
   mFlag = !mFlag;
};

/*mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/**/
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;
}

/* л*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/**/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
aud.addEventListener('pause', () => mState());/**/
aud.addEventListener('play', () => mState());/**/
aud.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(lrcStr); /**/
})();
</script>
</div>
<div style="height:960px;"></div>
</td></tr></table>

梦江南 发表于 2026-7-27 15:37

欣赏老师的精彩音画。问好!{:4_187:}

万顷湖 发表于 2026-7-27 16:23

谢谢帮扶，祝您夏安，万事如意。

梦油发表于 2026-7-27 16:50

欣赏精彩制作，问候万顷湖快乐。

万顷湖 发表于 2026-7-27 17:35

梦油发表于 2026-7-27 16:50
欣赏精彩制作，问候万顷湖快乐。

管理员好！谢谢鼓励，祝您夏安，万事如意！

深秋红枫 发表于 2026-7-27 19:36

欣赏万老精彩制作，点赞！问候晚上好，祝您快乐！

红影发表于 2026-7-27 19:39

横正气凌然的歌曲，战士的豪情，令人听得热血沸腾。
欣赏万顷湖好帖{:4_199:}

梦油发表于 2026-7-27 19:48

万顷湖发表于 2026-7-27 17:35
管理员好！谢谢鼓励，祝您夏安，万事如意！

谢谢你的美好祝福。以后，称我老梦就可以了，我们都是朋友。

页: [1]

花潮论坛's Archiver

我们的战场在天上-花潮论坛