起个网名好难 发表于 2022-11-9 20:36

24节气歌

本帖最后由 起个网名好难 于 2022-11-12 15:19 编辑 <br /><br />这帖子很奇怪，在同一个网内的三台电脑仅有一台可以正常观看，三台电脑系统相同、浏览器相同但结果不同。<br>

更奇怪的是两部手机系统也相同、浏览器（两个）也相同并且也是在同一网内，但一部手机甲浏览器可观看，乙浏览器则不行，而另一部手机就刚好相反。<br>
<meta name="referrer" content="no-referrer">
<style type="text/css">
        #jqt        {width:640px;padding:8px;margin:32px auto;overflow:hidden;border-radius:24px;
        background-image:url(https://z3.ax1x.com/2021/06/28/RtQMMn.jpg);}
.lyricDisp{filter:drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);font-family:微软雅黑;transition:.3s all ease;font-size:1.5em;}.lyricDisp:nth-child(1){color:gray;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:1.2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}#LRCShow{position:absolute;left:25%;bottom:-30px;width:80%;height:100px;margin:16px auto
                position:relative;}#rdisk{position:absolute;left:16%;bottom:10px;font-size:3em;color:red;cursor:pointer;animation:circleSmall2 10s linear infinite;animation-play-state:paused;}@keyframes circleSmall2{0%{transform:rotateX(30deg) rotateY(-45deg) rotateZ(0deg);}100%{transform:rotateX(30deg) rotateY(-45deg) rotate(360deg);}}

</style>
<div style="width:800px;position:relative;height:auto !impotant;min-height:1000px;">
        <div id="jqt"></div>
    <div id="rdisk">❄</div>
    <div id="LRCShow"></div>
</div>
<!--audio src="https://www.qqmc.com/up/kwlink.php?id=5405556&.mp3" loop autoplay id="mp"></audio-->
<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=new Array();for(k=0;k<2;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';this.showLrcObj.appendChild(this.gclines)}this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(opts.lrcDoc);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx>=that.lrcVec.length)return;if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},}
</script>

<script type="text/javascript">
(function()        {
let pics = [
"https://s3.bmp.ovh/imgs/2022/11/08/1cd7e1dd87c1b152.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/58ac83a5061014c0.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/635fcdad4c34b623.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/a43972c5c8db3e56.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/2ce1544b5083b826.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/45c91eab995af563.gif",

"https://s3.bmp.ovh/imgs/2022/11/08/4bf7d2a8ec5a9166.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/4b8e302800ba8eec.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/863a0bb864efb581.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/c03f6b2cc2dbe862.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/656df48729a74b17.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/d6e8e2cb6cba3a02.gif",

"https://s3.bmp.ovh/imgs/2022/11/08/b081da092b943455.gif",
"https://s3.bmp.ovh/imgs/2022/11/09/363b88a48866a98a.gif",
"https://s3.bmp.ovh/imgs/2022/11/09/cefd35cd3eb8ec16.gif",
"https://s3.bmp.ovh/imgs/2022/11/09/8dcaf1b7d70069d8.gif",
"https://s3.bmp.ovh/imgs/2022/11/09/140ba9349011eae1.gif",
"https://s3.bmp.ovh/imgs/2022/11/09/6160d3260f148b62.gif",

"https://s3.bmp.ovh/imgs/2022/11/08/f3352c565ff9d6eb.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/5d8b827b77359d94.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/66e5f1ebc836a641.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/08c9d1dda0cd70f3.gif",
"https://s3.bmp.ovh/imgs/2022/11/08/81d75ddf18de7010.gif",
"https://s3.bmp.ovh/imgs/2022/11/09/5419bfca91b35f80.gif"
];
let lrctxt = `
二十四节气歌 - 闫学晶
打春阳气转 雨水沿河边
惊蛰乌鸦叫 春分地皮干
清明忙种麦 谷雨种大田
哎唻哎嗨哎嗨哟 春呀吗春天
立夏鹅毛住 小满雀来全
芒种开了铲 夏至不拿棉
小暑不算热 大暑三伏天
哎唻哎嗨哎嗨哟 夏呀吗夏天
立秋忙打甸 处暑动刀镰
白露割蜜薯 秋分不生田
寒露不算冷 霜降变了天
哎唻哎嗨哎嗨哟 秋呀吗秋天
立冬交十月 小雪地封严
大雪河汊牢 冬至不行船
小寒大寒冰如铁 迎来又一年
盼望冰消雪化艳阳天
哎唻哎嗨嗯哎哎嗨哟

`;
var opts = {
        lrcDoc:lrctxt,
        audioURL:"https://www.qqmc.com/up/kwlink.php?id=5405556&.mp3",
        lrcShowID:"LRCShow",
        audioCtrl:'rdisk'
};
new lrcPlayer2(opts);
let jqt = document.querySelector('#jqt');
let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewbox="0 0 640 1080">`;
console.log(document.referrer);
let viewWidth = 640;
let viewHeight = 1080;
jqt.onclick = () => {
        let mp = document.querySelector('#mp');
        if(mp.paused)        mp.play();
}
let makeImageObj = (url, width,height,idx) => {
        let ratioX = viewWidth / width;
        let ratioY = viewHeight / height;
        let scaleRatio = ratioX < ratioY ? ratioX : ratioY;
        let imgObjStr ="";
        imgObjStr += `<image id="p${idx}" xlink:href="${url}" width="${width * scaleRatio}" `;
        imgObjStr += `height="${height * scaleRatio}" x="0" y="${(viewHeight - height * scaleRatio) / 2}" `;
        imgObjStr += `opacity="0" preserveAspectRatio="none">\n`;
       
        imgObjStr += `<animate id="fpic${idx}" attributename="opacity" from="0" to="1" dur="2s" `;
        let bt = idx == 0?`0;e${pics.length-1}.end-2`:`e${idx-1}.end-2`;
        imgObjStr += `begin="${bt}" fill="freeze" ></animate>\n`;
       
        imgObjStr += `<animate id="e${idx}" attributename="opacity" from="1" to="0" dur="2s" `;
        imgObjStr += `begin="fpic${idx}.begin+10" fill="freeze" ></animate>\n</image>\n`;
       
        return        imgObjStr;
}
let imgSize = new Array(), errCount=0;
let getPictureSize = (url, idx) => {
        let img = new Image();
        img.src = url;
        img.onerror = () => {
                console.log(url+" 图片加载失败，请检查url是否正确");
                errCount++;
                return false;
        };

        img.onload = () =>        {
                //console.log('load ' + img.width+" "+img.height);
                img.onload=null;//避免重复加载
               
                let imgObjStr = makeImageObj(url, img.width, img.height, idx);
                imgSize.push(imgObjStr);
        }
}

for(idx = 0; idx < pics.length; idx++)        {
        getPictureSize(pics,idx);
}
let dataReady = () => {
        if(imgSize.length != pics.length)        setTimeout(dataReady,100);
        else {
                for(n=0;n<imgSize.length;n++)        {
                        svgContent += imgSize;
                }
                jqt.innerHTML = svgContent + "</svg>\n";
        }
}
dataReady();

})();
//https://blog.csdn.net/joyopirate/article/details/126589331
</script>

起个网名好难 发表于 2022-11-10 16:08

红影 发表于 2022-11-10 14:28
单位电脑和家里电脑都看不到。

很失败的帖子{:5_148:}

红影 发表于 2022-11-9 20:49

看不到图图？

相约爱晚亭 发表于 2022-11-9 20:49

欣赏精美动图音画佳作！

起个网名好难 发表于 2022-11-9 20:56

红影 发表于 2022-11-9 20:49
看不到图图？

等一下能看到吧。

起个网名好难 发表于 2022-11-9 21:00

相约爱晚亭 发表于 2022-11-9 20:49
欣赏精美动图音画佳作！

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670590758&t=1a6d62045e90a8f77d11933dd78e29db

红影 发表于 2022-11-9 22:43

起个网名好难 发表于 2022-11-9 20:56
等一下能看到吧。

我只看到一个小长条。

起个网名好难 发表于 2022-11-9 23:18

红影 发表于 2022-11-9 22:43
我只看到一个小长条。

可能是图库那边的问题，没办法图片都是gif很难找到能接受的网站。

红影 发表于 2022-11-10 14:28

起个网名好难 发表于 2022-11-9 23:18
可能是图库那边的问题，没办法图片都是gif很难找到能接受的网站。

单位电脑和家里电脑都看不到。

红影 发表于 2022-11-10 21:36

起个网名好难 发表于 2022-11-10 16:08
很失败的帖子

也可能是我电脑问题。

起个网名好难 发表于 2022-11-10 22:11

红影 发表于 2022-11-10 21:36
也可能是我电脑问题。

我自己的电脑和手机也不是都行，搞不清楚问题在哪里。

醉美水芙蓉 发表于 2022-11-11 10:48

深秋红枫 发表于 2022-11-11 12:26

起个网名好难 发表于 2022-11-10 16:08
很失败的帖子

手机能看到，很棒！

起个网名好难 发表于 2022-11-11 12:28

醉美水芙蓉 发表于 2022-11-11 10:48
动图漂亮！欣赏老师精彩音画！

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670590758&t=1a6d62045e90a8f77d11933dd78e29db

起个网名好难 发表于 2022-11-11 12:28

深秋红枫 发表于 2022-11-11 12:26
手机能看到，很棒！

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670590758&t=1a6d62045e90a8f77d11933dd78e29db

起个网名好难 发表于 2022-11-11 12:30

深秋红枫 发表于 2022-11-11 12:26
手机能看到，很棒！

我的手机上的两个浏览器一个行，一个不行；
换一部手机，还是同样的两个浏览器，结果又反过来了。

搞不懂{:5_148:}

红影 发表于 2022-11-11 21:33

起个网名好难 发表于 2022-11-10 22:11
我自己的电脑和手机也不是都行，搞不清楚问题在哪里。

你都搞不清的，我就更搞不清了{:4_173:}

起个网名好难 发表于 2022-11-11 22:12

红影 发表于 2022-11-11 21:33
你都搞不清的，我就更搞不清了

问题是也还有可以看见的，看不见是什么原因真没法猜。

寒冬残荷 发表于 2022-11-11 23:59

老师，我的手机和电脑也都看不了，是GIF图片的问题，音乐部分手机的和电脑都正常。

寒冬残荷 发表于 2022-11-11 23:59

老师，我的手机和电脑也都看不了，是GIF图片的问题，音乐部分手机的和电脑都正常。
页: [1] 2 3
查看完整版本: 24节气歌