人民空军的雄姿

起个网名好难 发表于 2024-11-28 20:29

本帖最后由起个网名好难于 2024-11-29 07:57 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#oBlk {position:relative; width:1080px;height:720px;margin:90px 0 32px calc(50% - 621px);background-color:skyblue;overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#showSVG {width:1080px; position:absolute; left:0px; top:0px;}
#processMeter {position: absolute; left:5%; bottom:5px; width: 200px; height:100px; cursor: pointer; z-index:999;}
@keyframes rot {to {transform:rotate(1turn)}}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 微软雅黑;
pointer-events:none;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
bottom: 0px; left:30%;
}
.lrcShow::before {
color:hsl(0, 50%, 50%);
}
</style>
<div id="oBlk">
<div id="showSVG" ></div>

<div id="processMeter">
<svg viewBox="0 0 200 100" id="svgObj">

<g stroke-width='5'>
<path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="#ebeef5"fill="none" ></path>

<path
   id="pCircle"
   d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
   stroke="darkred"
   fill="none"
></path>
</g>
<g id="pauseBtn" fill="darkred" opacity='1'>
<title>点击暂停</title>
<rect x="85" y="25" width="10" height="50"></rect>
<rect x="95" y="25" width="10" height="50" fill="transparent"></rect>
<rect x="105" y="25" width="10" height="50"></rect>
         </g>

<polygon points="80 25,130 50,80 75" id="playBtn" fill="darkred" opacity='0'></polygon>
<g text-anchor="middle" dominant-baseline="middle" fill='white' style="font:bold 24px;">
<text x="80%" y="50%" id="durTime"> </text>
<text x="20%" y="50%" id="curTime"> </text>
</g>
</svg>
</div>
<div class="lrcShow" data-lrc="我爱祖国的蓝天" >我爱祖国的蓝天</div>
</div>
<script>
var pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiay1ZkicXLUONWicFCfEvfM195S7sd3Mp1mwBuPIe59KcvxZeFzywbvicjog/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayN5bm2CJ5r7Wf4ic6Jfe5ZfBNhzhDc9JaPvus7WrNvZNdheENwicySy3g/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayF4mzHMWsBf9p4t8vsV2WvvLXRQoYia7bWo4SccEaJbbfRPCCH48VDvA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayobb0PxpnefwKBPDvY3pTlnfrOOH7sYxSzBufkiaadWKe37XMYMeqhvA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayspleWzPb3en0brqR43BrHlv7sykQFe3RTUhpnYCSia2A6ZItpicMBqCg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayIGyLyriczOMlia2XFkvGub2jXWL2qcSDcTntdiboH1hSj1CGxRnE4s2oQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayIO7TBWJG9sOcr9Ur3uxiadAaVcWYsic8NVo8XufvCXvVCfx2VNMGclEA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiaytUUdVungfJkWm5k7ibe4hosqbT5zlO6mIBKCye7YQ3aISmEbbahiagRw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiaymGHibyDBLMpxekIhZFbrkgunLFRUKmIULYszzR9OOreAKuK4aKKUFkA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiay1IeDMXIhic25rDjAE2ib7HzepjcIWzD7ouyOpcq87oRWpSlKXvF54ia4A/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiay2DMHBU5MIkAicg4Xdxt9CMPoicgQL82iaWQXgxhM1rCmZYyounp5P5R6w/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiaygRwl7rAj9NCvKkkX5kogd0HxcqZTmibiceibRfnkEBBpVqvAqecVibwJgA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiaycLcwK5nLms3wWzyehxB6E28Ks12ykvg411SQ9j186SaFO85soiclrYA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayiaI3YDZBBkNwVZnIOgmJ7VrcAKRNaIahuq91Nf5zvILJF7ax5ibRFLkg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayWeg6Wa2D2DVEtRZxpic7QAkwYxhydpmviazxtv0GfVeuS4p9sswia3nqg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiay6pufp2nhqhexQJ2K2icg5BUv3yZbdRPTmSGhS6wgKibwCNLlQNdzlFQw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayRJEw8giaA5KtaHOIiaBibV4mZXMf06Jb38OhkfETrc6beRy2PwGibGps9A/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayaL7kGmI9GnoAh72dzxxGKlficicf1JHVflouJBTBiaAboBXTvF4qvF01Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiaytruddtxJZm0LJGkqNOhp321sk7hjZcw6pK0ibpkejibFJbQSmeztpVfA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiaylYiab4bIV1hhnZudy6phzkiaQevpwBTbjrFalG5T4bOhMQMDwD0OZxHQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiaylyMAHGUtibIQEG8zDsYK02MLb0B4jiauiaibYfpB1O0Z3ibeNOtlEpKPoKg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/a9N3A13ydYvnicm3IXeMV63291b2uqCiayqmejoKjgxKRzR1lxjQVEib1s6Ry7dNzcRJzCD7j5pQX4ibk8fEehknxw/640"
];
var sf = document.createElement('script');
sf.type = 'text/javascript';
sf.src = "https://file.uhsea.com/2410/34b933e409e019a1d30f535fa704e5122O.js";
//sf.src = "./genSVG.js";
sf.charset = "utf-8";
document.body.appendChild(sf);

sf.onload = () => {
let opts = {width:1080, height:720, showObj: showSVG};
genSVGtag(opts);
}

var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
let circlePoints = [];
let bgcLen = bgc.getTotalLength();
pCircle.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;

for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
//console.log(circlePoints);
let lrctxt = `我爱祖国的蓝天
我爱祖国的蓝天晴空万里阳光灿烂\n白云为我铺大道东风送我飞向前\n金色的朝霞在我身边飞舞\n脚下是一片锦绣河山\n啊~水兵爱大海骑兵爱草原\n要问飞行员爱什么我爱祖国的蓝天\n我爱祖国的蓝天云海茫茫一望无边\n春雷为我敲战鼓红日照我把敌歼\n毛泽东思想指引我们\n人民空军勇往直前\n啊~水兵爱大海骑兵爱草原\n要问飞行员爱什么我爱祖国的蓝天\n我爱祖国的蓝天云海茫茫一望无边\n春雷为我敲战鼓红日照我把敌歼\n毛泽东思想指引我们\n人民空军勇往直前\n啊~水兵爱大海骑兵爱草原\n要问飞行员爱什么我爱祖国的蓝天\n `;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=5234286.mp3",
}
let player = new lrcPlayerY(opts);
//console.log(player.lrcVec);
   var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function(container) {
var timerSlide = null;
var indexSlide = 0;
container.addEventListener('mouseover', function() {
   clearTimeout(timerSlide);
});
container.addEventListener('mouseout', function() {
   clearTimeout(timerSlide);
   funSlide();
});
// 对应的元素
var eleSlides = [].slice.call(container.querySelectorAll('a'));
var eleButtons = [].slice.call(container.querySelectorAll('button'));
var funSlide = function() {
   eleSlides.forEach(function(slide, index) {
   if (!player.mObj.paused) {
      if (indexSlide == index) {
         slide.classList.add('in');
      } else if (slide.classList.contains('in')) {
         slide.classList.remove('in');
      }
   }
   });
   timerSlide = setTimeout(function() {
   indexSlide++;
   if (indexSlide == eleSlides.length) {
      indexSlide = 0;
   }
   funSlide();
   }, 10000);
}
indexSlide++;
setTimeout(funSlide, 10000);
});
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};

player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
pCircle.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(player.mObj.duration);
curTime.textContent = formatTime(player.mObj.currentTime);
});
let aniSvg = oBlk.querySelector('#showSVG svg');;
let runState = () => {
player.mObj.paused
? (playBtn.style.opacity = '1', pauseBtn.style.opacity = '0' ,aniSvg.pauseAnimations())
: (playBtn.style.opacity = '0', pauseBtn.style.opacity = '1' ,aniSvg.unpauseAnimations());
}

let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX), my = (point.y - event.offsetY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = player.mObj.duration * chkVal;
pCircle.style.strokeDashoffset = bgcLen * (1 - chkVal);
/**
for(i = 0; i < player.lrcVec.length; i++) {
if((player.lrcVec+i).seconds >= chkTime) {
//console.log(player.lrcVec.seconds, i);
player.idx = i;
player.mObj.currentTime = chkTime;
break;
}
};
**/
let fIdx = -1;
player.lrcVec.forEach((lrc,idx) => {
if(fIdx < 0 && lrc.seconds >= chkTime ) {
fIdx = player.idx = idx;
player.mObj.currentTime = chkTime;
//console.log(lrc.seconds, idx);
return fIdx;
}
});

};
pCircle.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
pCircle.onclick = bgc.onclick = () => seeking = !seeking;

pauseBtn.onclick = playBtn.onclick = () => {
player.mObj.paused ? player.mObj.play() : player.mObj.pause();
}
player.mObj.addEventListener('play', () => runState());
player.mObj.addEventListener('pause', () => runState());
player.mObj.play().catch(_ = () => runState());
}
</script>

愤怒的葡萄 发表于 2024-11-28 20:35

中国首款5代机歼20，葡萄也期待中国航母的舰载机歼35。

醉美水芙蓉 发表于 2024-11-28 21:01

起个网名好难 发表于 2024-11-28 21:02

愤怒的葡萄发表于 2024-11-28 20:35
中国首款5代机歼20，葡萄也期待中国航母的舰载机歼35。

https://inews.gtimg.com/news_bt/OqxE0VJETf29UUkaD2k4ZoQOx-4TRc0jDLvyK-XGXRKGQAA/641

起个网名好难 发表于 2024-11-28 21:02

醉美水芙蓉发表于 2024-11-28 21:01
欣赏老师的精彩！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

愤怒的葡萄 发表于 2024-11-28 21:05

起个网名好难发表于 2024-11-28 21:02

中国首款歼35舰载机，听闻歼35的作战力要远强于F35。

起个网名好难 发表于 2024-11-28 21:10

愤怒的葡萄发表于 2024-11-28 21:05
中国首款歼35舰载机，听闻歼35的作战力要远强于F35。

中美终有一战

愤怒的葡萄 发表于 2024-11-28 21:23

起个网名好难发表于 2024-11-28 21:10
中美终有一战

中美之间应该不会引发战争的，但是金融战、贸易战或许会上演，不知道明年特朗普上台之后会不会再挥舞大棒政策。

我们国人要相信我们中国政治精英的智慧，我相信咱们东大最终会获胜的。

红影发表于 2024-11-28 21:27

很威武雄壮的气势，铮铮铁骨，这的帖子看着很振奋{:4_199:}

红影发表于 2024-11-28 21:28

帖子漂亮，轮播效果十分奇妙。欣赏难难好帖{:4_199:}

起个网名好难 发表于 2024-11-28 21:44

愤怒的葡萄发表于 2024-11-28 21:23
中美之间应该不会引发战争的，但是金融战、贸易战或许会上演，不知道明年特朗普上台之后会不会再挥舞大棒 ...

金融战、贸易战或许会上演把或许去掉

不知道明年特朗普上台之后会不会再挥舞大棒政策去掉不知道和不会

起个网名好难 发表于 2024-11-28 21:45

红影发表于 2024-11-28 21:27
很威武雄壮的气势，铮铮铁骨，这的帖子看着很振奋

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-11-28 21:46

红影发表于 2024-11-28 21:28
帖子漂亮，轮播效果十分奇妙。欣赏难难好帖
https://cccimg.com/view.php/6a1acfd3b4d74a20d5526242c682e519.webp

杨帆发表于 2024-11-28 23:40

壮我国威，振奋人心，谢谢老师精彩分享{:4_191:}

起个网名好难 发表于 2024-11-28 23:50

杨帆发表于 2024-11-28 23:40
壮我国威，振奋人心，谢谢老师精彩分享

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

愤怒的葡萄 发表于 2024-11-29 05:29

红影发表于 2024-11-28 21:27
很威武雄壮的气势，铮铮铁骨，这的帖子看着很振奋

最近十年我国海空军的硬实力逐渐上升，国产航母、055大驱和歼20的入伍让军迷们振奋，葡萄以前从来不关注军事方面的东西，但是最近十年咱们的解放军先进武器的逐渐入列的确让军迷们振奋的。

红影发表于 2024-11-29 21:03

起个网名好难发表于 2024-11-28 21:45

问好难难，再赏好帖{:4_187:}

红影发表于 2024-11-29 21:03

起个网名好难发表于 2024-11-28 21:46

难难的帖子很正能量{:4_199:}

红影发表于 2024-11-29 21:04

愤怒的葡萄发表于 2024-11-29 05:29
最近十年我国海空军的硬实力逐渐上升，国产航母、055大驱和歼20的入伍让军迷们振奋，葡萄以前从来不关注 ...

是啊，我们的军事实力在上升，让人振奋也让人自豪呢{:4_187:}

小辣椒 发表于 2024-11-29 21:19

难难打开帖就听到那熟悉威武的军歌，再看那转换中的各种战机，太给力了{:4_178:}

页: [1] 2 3

花潮论坛's Archiver

人民空军的雄姿