论坛 › 〖互。助〗求助探讨 › 请教夕阳老师：直发代码为何此贴不显示呢？如何实现全屏？谢谢[已解决]

杨帆 发表于 2024-12-10 22:55

请教夕阳老师：直发代码为何此贴不显示呢？如何实现全屏？谢谢[已解决]

本帖最后由 杨帆 于 2024-12-12 12:54 编辑 <br /><br /><div style="">&lt;style&gt;</div><div style="">@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);</div><div style="">:root{--rState:running;--w:1400px;--h:800px;}</div><div style=""><br></div><div style="">#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em&nbsp; 华文新魏; opacity: 0.8; cursor: pointer; z-index: 5}</div><div style=""><br></div><div style=""><br></div><div style="">.lrcShow{font:bold 2.4em 楷体,楷体_GD2312,sans-serif;pointer-events:none;left:20%;bottom:0px;filter:drop-shadow(1px 0px 0px white)drop-shadow(0px 1px 0px white)drop-shadow(-1px 0px 0px white)drop-shadow(0px -1px 0px white);z-index:4;}</div><div style="">.lrcShow::before{color:hsl(0,80%,80%);}</div><div style="">#outBlk{position:relative;width:var(--w);height:var(--h);background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center / cover;overflow:hidden;margin: 130px 0 30px calc(50% - 780px);box-shadow:4px 4px 10px #000;}</div><div style="">zxx-slide{width:var(--w);height:var(--h);position:absolute;z-index:1;}</div><div style="">.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;}</div><div style="">.zxx-slide-a.in{z-index:2;animation-duration:2s;animation-name:brightnessIn;transition:1s;}</div><div style="">.zxx-slide-img{width:var(--w);height:var(--h);}</div><div style="">@keyframes brightnessIn{0%{transform:scale(0.1);opacity:0;}10%{transform:scale(0.5);opacity:1;}100%{transform:scale(1)}}</div><div style="">#processMeter{position:absolute;right:20px;bottom:10px;width:200px;height:100px;cursor:pointer;z-index:3;}</div><div style="">#rPlayer{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}</div><div style="">@keyframes rot{to{transform: rotate(1turn)}}</div><div style="">&lt;/style&gt;</div><div style="">&lt;div id="outBlk"&gt;</div><div style=""><br></div><div style="">&lt;span id="fullscreen"&gt;全屏观赏&lt;/span&gt;</div><div style=""><br></div><div style=""><br></div><div style="">&nbsp; &lt;zxx-slide&gt;</div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>&lt;svg stroke-width="5" viewBox="0 0 200 100" id="processMeter"&gt;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&lt;!-- 背景圆形 --&gt;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&lt;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"&nbsp; fill="none" &gt;&lt;/path&gt;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&lt;!-- 进度条 --&gt;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&lt;path</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&nbsp; class="process-circle"</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&nbsp; d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&nbsp; stroke="darkred"</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&nbsp; fill="none"</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&nbsp; stroke-dasharray="455"</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&nbsp; stroke-dashoffset="455"</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&gt;&lt;/path&gt;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&lt;defs&gt;</span></div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="white-space:pre">        </span>&lt;clipPath id="clip"&gt;</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="white-space:pre">                </span>&lt;circle cx="100" cy="50" r="41" /&gt;</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="white-space:pre">        </span>&lt;/clilpPath&gt;</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/defs&gt;</div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&lt;image xlink:href="https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png" width="100" height='100' x="50" y="0" id="rPlayer" clip-path="url(#clip)" preserveAspectRatio="none" /&gt;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&lt;text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"&gt; &lt;/text&gt;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>&lt;text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"&gt; &lt;/text&gt;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>&lt;/svg&gt;&lt;/zxx-slide&gt;<span style="white-space:pre">        </span></span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>&lt;div class="lrcShow" data-lrc="碧水蓝天" &gt;碧水蓝天&lt;/div&gt;</span></div><div style="">&lt;/div&gt;</div><div style=""><br></div><div style="">&lt;script&gt;</div><div style=""><br></div><div style="">&nbsp; &nbsp; const processCircle = document.querySelector('.process-circle');</div><div style="">&nbsp; &nbsp; // 获取圆的周长</div><div style="">&nbsp; &nbsp; const circumference = processCircle.getTotalLength();</div><div style="">&nbsp; &nbsp; // 把周长赋值给 strokeDasharray</div><div style="">&nbsp; &nbsp; processCircle.style.strokeDasharray = circumference;</div><div style=""><br></div><div style="">&nbsp; &nbsp; function setProcessCircle(percent = 0) {</div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>// 动态计算 offset 赋值给 strokeDashoffset</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>// 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>processCircle.style.strokeDashoffset =</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>&nbsp; circumference * (1 - parseInt(percent) / 100)</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>}</span></div><div style=""><span style="white-space: pre; white-space: normal;">        </span></div><div style="">var sf0 = document.createElement('script');</div><div style="">sf0.type = 'text/javascript';</div><div style="">sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";</div><div style="">sf0.charset = "utf-8";</div><div style="">document.body.appendChild(sf0);</div><div style=""><br></div><div style="">sf0.onload = () =&gt; {</div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let circlePoints = [];</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let bgcLen = bgc.getTotalLength();</span></div><div style=""><span style="white-space: pre; white-space: normal;">        </span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>for(let i = 0; i &lt; bgcLen; i++)<span style="white-space:pre">        </span>{</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>circlePoints.push(bgc.getPointAtLength(i));</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>}</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>console.log(circlePoints);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let lrctxt = `</span></div><div style=""></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>`;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let opts = {</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>lrcTxt:lrctxt,</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>audioURL:"https://www.joy127.com/url/109961.mp3",</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>}</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let player = new lrcPlayerY(opts);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>//console.log(player.lrcVec);</span></div><div style="">let pics = [</div><div style="">"https://pic.imgdb.cn/item/674d81d5d0e0a243d4dbf77e.gif",</div><div style="">"https://pic.imgdb.cn/item/674d81f8d0e0a243d4dbf7e1.gif",</div><div style="">"https://pic.imgdb.cn/item/674d8215d0e0a243d4dbf830.gif",</div><div style="">"https://pic.imgdb.cn/item/674d822ed0e0a243d4dbf862.gif",</div><div style="">"https://pic.imgdb.cn/item/674d8244d0e0a243d4dbf891.gif",</div><div style="">"https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif",</div><div style="">"https://pic.imgdb.cn/item/674d826dd0e0a243d4dbf8d4.gif",</div><div style="">"https://pic.imgdb.cn/item/674d8282d0e0a243d4dbf8f2.gif",</div><div style="">"https://pic.imgdb.cn/item/674d8295d0e0a243d4dbf916.gif",</div><div style="">"https://pic.imgdb.cn/item/674d82a8d0e0a243d4dbf930.gif",</div><div style="">];</div><div style="">let eleZxxSlides = document.querySelectorAll('zxx-slide');</div><div style="">pics.forEach(pic =&gt; {</div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let aObj = document.createElement('a');</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>aObj.className = 'zxx-slide-a';</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let imgObj = document.createElement('img');</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>imgObj.src = pic;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>imgObj.className = 'zxx-slide-img';</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>aObj.appendChild(imgObj);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>eleZxxSlides.appendChild(aObj);</span></div><div style="">});</div><div style="">&nbsp; [].slice.call(eleZxxSlides).forEach(function(container) {</div><div style="">&nbsp; &nbsp; let timerSlide = null;</div><div style="">&nbsp; &nbsp; let indexSlide = 0;</div><div style="">&nbsp; &nbsp; container.addEventListener('mouseover', function() {</div><div style="">&nbsp; &nbsp; &nbsp; clearTimeout(timerSlide);</div><div style="">&nbsp; &nbsp; });</div><div style="">&nbsp; &nbsp; container.addEventListener('mouseout', function() {</div><div style="">&nbsp; &nbsp; &nbsp; clearTimeout(timerSlide);</div><div style="">&nbsp; &nbsp; &nbsp; funSlide();</div><div style="">&nbsp; &nbsp; });</div><div style="">&nbsp; &nbsp; // 对应的元素</div><div style="">&nbsp; &nbsp; let eleSlides = [].slice.call(container.querySelectorAll('a'));</div><div style="">&nbsp; &nbsp; let eleButtons = [].slice.call(container.querySelectorAll('button'));</div><div style="">&nbsp; &nbsp; let funSlide = function() {</div><div style="">&nbsp; &nbsp; &nbsp; eleSlides.forEach(function(slide, index) {</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; if (!player.mObj.paused) {</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (indexSlide == index) {</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slide.classList.add('in');</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (slide.classList.contains('in')) {</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slide.classList.remove('in');</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; }</div><div style="">&nbsp; &nbsp; &nbsp; });</div><div style="">&nbsp; &nbsp; &nbsp; timerSlide = setTimeout(function() {</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; indexSlide++;</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; if (indexSlide == eleSlides.length) {</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; indexSlide = 0;</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; }</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; funSlide();</div><div style="">&nbsp; &nbsp; &nbsp; }, 12000);</div><div style="">&nbsp; &nbsp; }</div><div style="">&nbsp; &nbsp; indexSlide++;</div><div style="">&nbsp; &nbsp; setTimeout(funSlide, 12000);</div><div style="">&nbsp; });</div><div style=""><br></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let formatTime = (time) =&gt; {</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>let str = '';</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>let min = parseInt(time / 60);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>let sec = parseInt(time % 60);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>return ((min &lt; 10 ? '0'+min:min) + ":" + (sec &lt; 10 ? '0'+sec:sec));</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>};</span></div><div style=""><span style="white-space: pre; white-space: normal;">        </span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>player.mObj.addEventListener('timeupdate', function() {</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>let processValue = player.mObj.currentTime / player.mObj.duration;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>processCircle.style.strokeDashoffset = circumference * (1 - processValue);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>durTime.textContent = formatTime(player.mObj.duration);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>curTime.textContent = formatTime(player.mObj.currentTime);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>});</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>rPlayer.onclick = () =&gt; {</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>player.mObj.paused ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.style.setProperty('--rState','paused'), player.mObj.pause());</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>}</span></div><div style=""><br></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let seeking = false;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>let moveEventProc = (event)<span style="white-space:pre">        </span>=&gt;<span style="white-space:pre">        </span>{</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>if(!seeking)<span style="white-space:pre">        </span>return;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>let thePoint = 0, minV = 100;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>circlePoints.forEach((point, idx ) =&gt; {</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>let mx = (point.x - event.offsetX), my = (point.y - event.offsetY)</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>let mv = mx*mx + my*my;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>if(mv &lt; minV)<span style="white-space:pre">        </span>{</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                                </span>minV = mv; thePoint = idx;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>}</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>})</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>let chkVal = thePoint / circumference;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>let chkTime = player.mObj.duration * chkVal;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>processCircle.style.strokeDashoffset = circumference * (1 - chkVal);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>for(i = 0; i &lt; player.lrcVec.length; i++)<span style="white-space:pre">        </span>{</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>if(player.lrcVec.seconds &gt;= chkTime)<span style="white-space:pre">        </span>{</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                                </span>//console.log(player.lrcVec.seconds, i);</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                                </span>player.idx = i;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                                </span>player.mObj.currentTime = chkTime;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                                </span>break;</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                        </span>}</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">                </span>};</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>};</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>processCircle.addEventListener("mousemove", (event) =&gt; moveEventProc(event));</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>bgc.addEventListener("mousemove", (event) =&gt; moveEventProc(event));</span></div><div style=""><span style="white-space: normal;"><span style="white-space:pre">        </span>processCircle.onclick = bgc.onclick = () =&gt; seeking = !seeking; <span style="white-space:pre">        </span></span></div><div style="">}</div><div style=""><br></div><div style="">let fs = true;</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; fullscreen.onclick = () =&gt; {</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fs ? (fullscreen.innerText = '退出全屏',outBlk.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fs = !fs;</div><div style="">&nbsp; &nbsp; &nbsp; &nbsp; };</div><div style="">&lt;/script&gt;</div><div style="font-style: italic;"><br></div>

杨帆 发表于 2024-12-10 23:04

本帖最后由 杨帆 于 2024-12-10 23:29 编辑

夕阳老师，您好！此贴在本地测试，除了不能实现全屏，其它功能显示正常

此外，此贴以网页发显示正常，以代码直发论坛为何就显示不了呢？

请帮我看看，给予指导！由衷感谢~@夕阳黄昏

红影 发表于 2024-12-10 23:47

我的天，这么长的代码{:4_173:}

夕阳黄昏 发表于 2024-12-11 06:20

本帖最后由 夕阳黄昏 于 2024-12-12 20:29 编辑 <br /><br /><style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root{--rState:running;--w:1400px;--h:800px;--fw:1400px;--fh:800px}

#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 0.8; cursor: pointer; z-index: 5}


.lrcShow{font:bold 2.4em 楷体,楷体_GD2312,sans-serif;pointer-events:none;left:20%;bottom:0px;filter:drop-shadow(1px 0px 0px white)drop-shadow(0px 1px 0px white)drop-shadow(-1px 0px 0px white)drop-shadow(0px -1px 0px white);z-index:4;}
.lrcShow::before{color:hsl(0,80%,80%);}
#outBlk{position:relative;width:var(--w);height:var(--h);background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center / cover;overflow:hidden;margin: 130px 0 30px calc(50% - 780px);box-shadow:4px 4px 10px #000;}
zxx-slide{width:var(--fw);height:var(--fh);position:absolute;z-index:1;}
.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;}
.zxx-slide-a.in{z-index:2;animation-duration:2s;animation-name:brightnessIn;transition:1s;}
.zxx-slide-img{width:var(--fw);height:var(--fh);}
@keyframes brightnessIn{0%{transform:scale(0.1);opacity:0;}10%{transform:scale(0.5);opacity:1;}100%{transform:scale(1)}}
#processMeter{position:absolute;right:20px;bottom:10px;width:200px;height:100px;cursor:pointer;z-index:33;}
#rPlayer{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
</style>
<div id="outBlk">

<span id="fullscreen">全屏观赏</span>


<zxx-slide></zxx-slide>
                <svg stroke-width="5" viewBox="0 0 200 100" id="processMeter">
                        <!-- 背景圆形 -->
                        <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
                        class="process-circle"
                        d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
                        stroke="darkred"
                        fill="none"
                        stroke-dasharray="455"
                        stroke-dashoffset="455"
                        ></path>
                        <defs>
                  <clipPath id="clip">
                            <circle cx="100" cy="50" r="41" />
                  </clilpPath>
            </defs>
                        <image xlink:href="https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png" width="100" height='100' x="50" y="0" id="rPlayer" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
                        <text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
                </svg>      
      <div class="lrcShow" data-lrc="碧水蓝天" >碧水蓝天</div>
</div>

<script>

    const processCircle = document.querySelector('.process-circle');
    // 获取圆的周长
    const circumference = processCircle.getTotalLength();
    // 把周长赋值给 strokeDasharray
    processCircle.style.strokeDasharray = circumference;

    function setProcessCircle(percent = 0) {
                // 动态计算 offset 赋值给 strokeDashoffset
                // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
                processCircle.style.strokeDashoffset =
                  circumference * (1 - parseInt(percent) / 100)
      }
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();
      for(let i = 0; i < bgcLen; i++)      {
                circlePoints.push(bgc.getPointAtLength(i));
      }
      console.log(circlePoints);
      let lrctxt = `

      `;
      let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://www.joy127.com/url/109961.mp3",
      }
      let player = new lrcPlayerY(opts);
      //console.log(player.lrcVec);
let pics = [
"https://pic.imgdb.cn/item/674d81d5d0e0a243d4dbf77e.gif",
"https://pic.imgdb.cn/item/674d81f8d0e0a243d4dbf7e1.gif",
"https://pic.imgdb.cn/item/674d8215d0e0a243d4dbf830.gif",
"https://pic.imgdb.cn/item/674d822ed0e0a243d4dbf862.gif",
"https://pic.imgdb.cn/item/674d8244d0e0a243d4dbf891.gif",
"https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif",
"https://pic.imgdb.cn/item/674d826dd0e0a243d4dbf8d4.gif",
"https://pic.imgdb.cn/item/674d8282d0e0a243d4dbf8f2.gif",
"https://pic.imgdb.cn/item/674d8295d0e0a243d4dbf916.gif",
"https://pic.imgdb.cn/item/674d82a8d0e0a243d4dbf930.gif",
];
let eleZxxSlides = document.querySelectorAll('zxx-slide');
pics.forEach(pic => {
      let aObj = document.createElement('a');
      aObj.className = 'zxx-slide-a';
      let imgObj = document.createElement('img');
      imgObj.src = pic;
      imgObj.className = 'zxx-slide-img';
      aObj.appendChild(imgObj);
      eleZxxSlides.appendChild(aObj);
});
[].slice.call(eleZxxSlides).forEach(function(container) {
    let timerSlide = null;
    let indexSlide = 0;
   
    // 对应的元素
    let eleSlides = [].slice.call(container.querySelectorAll('a'));
    let eleButtons = [].slice.call(container.querySelectorAll('button'));
    let 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();
      }, 8000);
    }
    indexSlide++;
    setTimeout(funSlide, 8000);
});

      let formatTime = (time) => {
                let str = '';
                let min = parseInt(time / 60);
                let sec = parseInt(time % 60);
                return ((min < 10 ? '0'+min:min) + ":" + (sec < 10 ? '0'+sec:sec));
      };
      player.mObj.addEventListener('timeupdate', function() {
                let processValue = player.mObj.currentTime / player.mObj.duration;
                processCircle.style.strokeDashoffset = circumference * (1 - processValue);
                durTime.textContent = formatTime(player.mObj.duration);
                curTime.textContent = formatTime(player.mObj.currentTime);
      });
      rPlayer.onclick = () => {
                player.mObj.paused ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.style.setProperty('--rState','paused'), player.mObj.pause());
      }

      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 / circumference;
                let chkTime = player.mObj.duration * chkVal;
                processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
                for(i = 0; i < player.lrcVec.length; i++)      {
                        if(player.lrcVec.seconds >= chkTime)      {
                              //console.log(player.lrcVec.seconds, i);
                              player.idx = i;
                              player.mObj.currentTime = chkTime;
                              break;
                        }
                };
      };
      processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
      bgc.addEventListener("mousemove", (event) => moveEventProc(event));
      processCircle.onclick = bgc.onclick = () => seeking = !seeking;         
}

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',outBlk.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                              if(fs) {outBlk.style.setProperty('--fw',window.screen.width + 'px');outBlk.style.setProperty('--fh',window.screen.height + 'px');}
                fs = !fs;
      };
</script>

夕阳黄昏 发表于 2024-12-11 06:21

4#一字没改

杨帆 发表于 2024-12-11 11:20

夕阳黄昏 发表于 2024-12-11 06:21
4#一字没改

夕阳老师威武！请看看，如何实现全屏呢？谢谢@夕阳黄昏

杨帆 发表于 2024-12-11 12:20

红影 发表于 2024-12-10 23:47
我的天，这么长的代码

谢谢影子关注与支持！也许有些代码多余，不清楚其逻辑关系，未敢妄动

夕阳黄昏 发表于 2024-12-11 13:13

杨帆 发表于 2024-12-11 11:20
夕阳老师威武！请看看，如何实现全屏呢？谢谢@夕阳黄昏

全屏我不熟悉，不过看其他有这功能的帖子也只是背景全屏而附在上面的其他元素并没受到影响。

红影 发表于 2024-12-11 13:18

杨帆 发表于 2024-12-11 12:20
谢谢影子关注与支持！也许有些代码多余，不清楚其逻辑关系，未敢妄动

不是，我是说一多了，我就看迷糊了，我学习代码也是半瓶水，看到多的就怕了{:4_173:}

杨帆 发表于 2024-12-11 13:22

本帖最后由 杨帆 于 2024-12-11 13:54 编辑

夕阳黄昏 发表于 2024-12-11 13:13
全屏我不熟悉，不过看其他有这功能的帖子也只是背景全屏而附在上面的其他元素并没受到影响。
辛苦了，夕阳老师！

上一个贴也是图片轮播，在您的指导下终于实现了全屏

这一个贴，我相信您有办法让它也实现全屏{:4_191:}

牧羊人的一天
https://www.huachaowang.com/foru ... =79819&fromuid=7894
(出处: 花潮论坛)

杨帆 发表于 2024-12-11 13:30

红影 发表于 2024-12-11 13:18
不是，我是说一多了，我就看迷糊了，我学习代码也是半瓶水，看到多的就怕了

哈哈，似懂非懂之际，代码多了也挺有趣呀，但不用怕，我们论坛有这么多大师呢{:4_199:}

夕阳黄昏 发表于 2024-12-11 16:08

杨帆 发表于 2024-12-11 13:22
辛苦了，夕阳老师！

上一个贴也是图片轮播，在您的指导下终于实现了全屏


我真做不到，把这帖的图片换到那帖也不行

杨帆 发表于 2024-12-11 16:18

夕阳黄昏 发表于 2024-12-11 16:08
我真做不到，把这帖的图片换到那帖也不行

谢谢夕阳老师，您辛苦了！

我只是好奇，不急，等老师慢慢研究吧{:4_190:}

杨帆 发表于 2024-12-11 16:26

夕阳黄昏 发表于 2024-12-11 16:08
我真做不到，把这帖的图片换到那帖也不行

谢谢夕阳老师！此贴的基础代码是您的《红枫叶》，或许与图片有关呢？

https://www.huachaowang.com/forum.php?mod=viewthread&tid=79448&fromuid=7894
(出处: 花潮论坛)

夕阳黄昏 发表于 2024-12-11 18:04

杨帆 发表于 2024-12-11 16:26
谢谢夕阳老师！此贴的基础代码是您的《红枫叶》，或许与图片有关呢？

https://www.huachaowang.com/fo ...
对全屏代码不熟悉，我的所有帖子都没有用过全屏代码，到底哪出了问题搞不清楚。

杨帆 发表于 2024-12-11 19:11

本帖最后由 杨帆 于 2024-12-11 19:12 编辑

谢谢夕阳老师！全屏代码也挺有趣呢，老师您有空了不妨研究一下呗@夕阳黄昏

红影 发表于 2024-12-11 20:26

杨帆 发表于 2024-12-11 13:30
哈哈，似懂非懂之际，代码多了也挺有趣呀，但不用怕，我们论坛有这么多大师呢

是的，只能麻烦大师们了{:4_173:}

夕阳黄昏 发表于 2024-12-12 10:37

杨帆 发表于 2024-12-11 19:11
谢谢夕阳老师！全屏代码也挺有趣呢，老师您有空了不妨研究一下呗@夕阳黄昏

再试试

<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root{--rState:running;--w:1400px;--h:800px;--fw:1400px;--fh:800px}

#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 0.8; cursor: pointer; z-index: 5}


.lrcShow{font:bold 2.4em 楷体,楷体_GD2312,sans-serif;pointer-events:none;left:20%;bottom:0px;filter:drop-shadow(1px 0px 0px white)drop-shadow(0px 1px 0px white)drop-shadow(-1px 0px 0px white)drop-shadow(0px -1px 0px white);z-index:4;}
.lrcShow::before{color:hsl(0,80%,80%);}
#outBlk{position:relative;width:var(--w);height:var(--h);background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center / cover;overflow:hidden;margin: 130px 0 30px calc(50% - 780px);box-shadow:4px 4px 10px #000;}
zxx-slide{width:var(--fw);height:var(--fh);position:absolute;z-index:1;}
.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;}
.zxx-slide-a.in{z-index:2;animation-duration:2s;animation-name:brightnessIn;transition:1s;}
.zxx-slide-img{width:var(--fw);height:var(--fh);}
@keyframes brightnessIn{0%{transform:scale(0.1);opacity:0;}10%{transform:scale(0.5);opacity:1;}100%{transform:scale(1)}}
#processMeter{position:absolute;right:20px;bottom:10px;width:200px;height:100px;cursor:pointer;z-index:33;}
#rPlayer{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
</style>
<div id="outBlk">

<span id="fullscreen">全屏观赏</span>


<zxx-slide></zxx-slide>
                <svg stroke-width="5" viewBox="0 0 200 100" id="processMeter">
                        <!-- 背景圆形 -->
                        <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
                          class="process-circle"
                          d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
                          stroke="darkred"
                          fill="none"
                          stroke-dasharray="455"
                          stroke-dashoffset="455"
                        ></path>
                        <defs>
                    <clipPath id="clip">
                            <circle cx="100" cy="50" r="41" />
                    </clilpPath>
            </defs>
                        <image xlink:href="https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png" width="100" height='100' x="50" y="0" id="rPlayer" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
                        <text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
                </svg>       
        <div class="lrcShow" data-lrc="碧水蓝天" >碧水蓝天</div>
</div>

<script>

    const processCircle = document.querySelector('.process-circle');
    // 获取圆的周长
    const circumference = processCircle.getTotalLength();
    // 把周长赋值给 strokeDasharray
    processCircle.style.strokeDasharray = circumference;

    function setProcessCircle(percent = 0) {
                // 动态计算 offset 赋值给 strokeDashoffset
                // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
                processCircle.style.strokeDashoffset =
                  circumference * (1 - parseInt(percent) / 100)
        }
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();
        for(let i = 0; i < bgcLen; i++)        {
                circlePoints.push(bgc.getPointAtLength(i));
        }
        console.log(circlePoints);
        let lrctxt = `

        `;
        let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://www.joy127.com/url/109961.mp3",
        }
        let player = new lrcPlayerY(opts);
        //console.log(player.lrcVec);
let pics = [
"https://pic.imgdb.cn/item/674d81d5d0e0a243d4dbf77e.gif",
"https://pic.imgdb.cn/item/674d81f8d0e0a243d4dbf7e1.gif",
"https://pic.imgdb.cn/item/674d8215d0e0a243d4dbf830.gif",
"https://pic.imgdb.cn/item/674d822ed0e0a243d4dbf862.gif",
"https://pic.imgdb.cn/item/674d8244d0e0a243d4dbf891.gif",
"https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif",
"https://pic.imgdb.cn/item/674d826dd0e0a243d4dbf8d4.gif",
"https://pic.imgdb.cn/item/674d8282d0e0a243d4dbf8f2.gif",
"https://pic.imgdb.cn/item/674d8295d0e0a243d4dbf916.gif",
"https://pic.imgdb.cn/item/674d82a8d0e0a243d4dbf930.gif",
];
let eleZxxSlides = document.querySelectorAll('zxx-slide');
pics.forEach(pic => {
        let aObj = document.createElement('a');
        aObj.className = 'zxx-slide-a';
        let imgObj = document.createElement('img');
        imgObj.src = pic;
        imgObj.className = 'zxx-slide-img';
        aObj.appendChild(imgObj);
        eleZxxSlides.appendChild(aObj);
});
[].slice.call(eleZxxSlides).forEach(function(container) {
    let timerSlide = null;
    let indexSlide = 0;
    container.addEventListener('mouseover', function() {
      clearTimeout(timerSlide);
    });
    container.addEventListener('mouseout', function() {
      clearTimeout(timerSlide);
      funSlide();
    });
    // 对应的元素
    let eleSlides = [].slice.call(container.querySelectorAll('a'));
    let eleButtons = [].slice.call(container.querySelectorAll('button'));
    let 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();
      }, 12000);
    }
    indexSlide++;
    setTimeout(funSlide, 12000);
});

        let formatTime = (time) => {
                let str = '';
                let min = parseInt(time / 60);
                let sec = parseInt(time % 60);
                return ((min < 10 ? '0'+min:min) + ":" + (sec < 10 ? '0'+sec:sec));
        };
        player.mObj.addEventListener('timeupdate', function() {
                let processValue = player.mObj.currentTime / player.mObj.duration;
                processCircle.style.strokeDashoffset = circumference * (1 - processValue);
                durTime.textContent = formatTime(player.mObj.duration);
                curTime.textContent = formatTime(player.mObj.currentTime);
        });
        rPlayer.onclick = () => {
                player.mObj.paused ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.style.setProperty('--rState','paused'), player.mObj.pause());
        }

        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 / circumference;
                let chkTime = player.mObj.duration * chkVal;
                processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
                for(i = 0; i < player.lrcVec.length; i++)        {
                        if(player.lrcVec.seconds >= chkTime)        {
                                //console.log(player.lrcVec.seconds, i);
                                player.idx = i;
                                player.mObj.currentTime = chkTime;
                                break;
                        }
                };
        };
        processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
        bgc.addEventListener("mousemove", (event) => moveEventProc(event));
        processCircle.onclick = bgc.onclick = () => seeking = !seeking;        
}

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',outBlk.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                                if(fs) {outBlk.style.setProperty('--fw',window.screen.width + 'px');outBlk.style.setProperty('--fh',window.screen.height + 'px');}
                fs = !fs;
      };
</script>

杨帆 发表于 2024-12-12 12:44

红影 发表于 2024-12-11 20:26
是的，只能麻烦大师们了

赞同~大师们是花潮的脊梁，是引领论坛高质量发展砥砺前行的源动力，向大师们致敬！

杨帆 发表于 2024-12-12 12:50

夕阳黄昏 发表于 2024-12-12 10:37
再试试

感恩夕阳老师，您太厉害了！@夕阳黄昏

为攻无不克、战无不胜的夕阳老师点一个大大的赞{:5_116:}{:5_116:}{:5_116:}

查看完整版本: 请教夕阳老师：直发代码为何此贴不显示呢？如何实现全屏？谢谢[已解决]