请教亚伦老师：倒计时牌位置预览正常，发在论坛咋就不可控呢？（附源码）,音画教程,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 音画教程 › 请教亚伦老师：倒计时牌位置预览正常，发在论坛咋就不可控呢？（附源码）

klxf 发表于前天 14:29

请教亚伦老师：倒计时牌位置预览正常，发在论坛咋就不可控呢？（附源码）

<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class='mum'>
<cl-cd data-idx="1"><!DOCTYPE html></cl-cd>
<cl-cd data-idx="2"><<span class="tDarkRed">html</span>></cl-cd>
<cl-cd data-idx="3"><<span class="tDarkRed">head</span>></cl-cd>
<cl-cd data-idx="4"><<span class="tDarkRed">meta</span> charset=<span class="tMagenta">"utf-8"</span>></cl-cd>
<cl-cd data-idx="5"><<span class="tDarkRed">title</span>>欢乐中国年▪2025春节倒计时</cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">/title</span>></cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/head</span>></cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">body</span>></cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">style</span> type=<span class="tMagenta">"text/css"</span>></cl-cd>
<cl-cd data-idx="10">#papa { <span class="tBlue">margin:</span> 130px 0 30px calc(50% - 721px);<span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 720px; <span class="tBlue">background-blend-mode:</span>hue;<span class="tBlue">background:</span>url(<span class="tMagenta">'https://pic.imgdb.cn/item/65bba435871b83018a4e2002.jpg'</span>)no-repeatcenter/cover;<span class="tBlue">box-shadow:</span>0px 0px 0px 2px #fff,0px 0px 0px 4px #fff; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span>2; <span class="tBlue">position:</span> relative; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center;<span class="tBlue">animation:</span> rotating 5s linear infinite<span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="11">@keyframes rotating{50%{<span class="tBlue">filter:</span>hue-rotate(360deg)contrast(110%)brightness(100%);}}</cl-cd>
<cl-cd data-idx="12">#pic{<span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> 100%; <span class="tBlue">position:</span> absolute;<span class="tBlue">top:</span>0px; <span class="tBlue">left:</span>0px;<span class="tBlue">z-index:</span>3;<span class="tBlue">mix-blend-mode:</span> screen;}</cl-cd>
<cl-cd data-idx="13">#pic img{<span class="tBlue">height:</span> 100%;<span class="tBlue">width:</span> 100%;}</cl-cd>
<cl-cd data-idx="14">#btnFs {</cl-cd>
<cl-cd data-idx="15">    <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="16">    <span class="tBlue">left:</span> 20px;</cl-cd>
<cl-cd data-idx="17">    <span class="tBlue">top:</span> 20px;</cl-cd>
<cl-cd data-idx="18">    <span class="tBlue">padding:</span> 6px;</cl-cd>
<cl-cd data-idx="19">    <span class="tBlue">background:</span> green;</cl-cd>
<cl-cd data-idx="20">    <span class="tBlue">color:</span> white;</cl-cd>
<cl-cd data-idx="21">    <span class="tBlue">border:</span> 2px solid white;</cl-cd>
<cl-cd data-idx="22">    <span class="tBlue">border-radius:</span> 8px;</cl-cd>
<cl-cd data-idx="23">    <span class="tBlue">cursor:</span> pointer;</cl-cd>
<cl-cd data-idx="24">    <span class="tBlue">pointer-events:</span> auto;</cl-cd>
<cl-cd data-idx="25">    <span class="tBlue">z-index:</span> 8;</cl-cd>
<cl-cd data-idx="26">}</cl-cd>
<cl-cd data-idx="27">#vid1 {</cl-cd>
<cl-cd data-idx="28"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">left:</span>0px;</cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">top:</span>-90px;</cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">width:</span> 100%; </cl-cd>
<cl-cd data-idx="32"> <span class="tBlue">height:</span>130%; </cl-cd>
<cl-cd data-idx="33"> <span class="tBlue">mix-blend-mode:</span>screen;</cl-cd>
<cl-cd data-idx="34"> <span class="tBlue">opacity:</span> 0.8; </cl-cd>
<cl-cd data-idx="35"> <span class="tBlue">object-fit:</span> cover;</cl-cd>
<cl-cd data-idx="36"> <span class="tBlue">z-index:</span>3;</cl-cd>
<cl-cd data-idx="37">}</cl-cd>
<cl-cd data-idx="38">#vid2 {</cl-cd>
<cl-cd data-idx="39"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="40"> <span class="tBlue">left:</span>0px;</cl-cd>
<cl-cd data-idx="41"> <span class="tBlue">top:</span>-90px;</cl-cd>
<cl-cd data-idx="42"> <span class="tBlue">width:</span> 100%; </cl-cd>
<cl-cd data-idx="43"> <span class="tBlue">height:</span>130%; </cl-cd>
<cl-cd data-idx="44"> <span class="tBlue">mix-blend-mode:</span>screen;</cl-cd>
<cl-cd data-idx="45"> <span class="tBlue">opacity:</span> 0.8; </cl-cd>
<cl-cd data-idx="46"> <span class="tBlue">object-fit:</span> cover;</cl-cd>
<cl-cd data-idx="47"> <span class="tBlue">z-index:</span>4;</cl-cd>
<cl-cd data-idx="48">}</cl-cd>
<cl-cd data-idx="49">#player {</cl-cd>
<cl-cd data-idx="50">    <span class="tBlue">position:</span> absolute;<span class="tBlue">z-index:</span> 20;</cl-cd>
<cl-cd data-idx="51">    <span class="tBlue">right:</span> 3%;<span class="tBlue">bottom:</span>5%; </cl-cd>
<cl-cd data-idx="52">    <span class="tBlue">width:</span> 50px;</cl-cd>
<cl-cd data-idx="53">    <span class="tBlue">height:</span> 50px;</cl-cd>
<cl-cd data-idx="54">    <span class="tBlue">border:</span> 3px solid #cccccc;</cl-cd>
<cl-cd data-idx="55">    <span class="tBlue">border-radius:</span> 50%;</cl-cd>
<cl-cd data-idx="56">    <span class="tBlue">opacity:</span> 1;    </cl-cd>
<cl-cd data-idx="57">    <span class="tBlue">cursor:</span> pointer;</cl-cd>
<cl-cd data-idx="58">    <span class="tBlue">pointer-events:</span> auto;</cl-cd>
<cl-cd data-idx="59">    <span class="tBlue">z-index:</span>8;</cl-cd>
<cl-cd data-idx="60">}</cl-cd>
<cl-cd data-idx="61">#djs {<span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="62"> <span class="tBlue">left:</span> 1%; <span class="tBlue">bottom:</span> -57%;</cl-cd>
<cl-cd data-idx="63"> <span class="tBlue">width:</span>100%;</cl-cd>
<cl-cd data-idx="64"> <span class="tBlue">height:</span>100%;</cl-cd>
<cl-cd data-idx="65"> <span class="tBlue">mix-blend-mode:</span>screen;</cl-cd>
<cl-cd data-idx="66"> <span class="tBlue">opacity:</span> 0.8; </cl-cd>
<cl-cd data-idx="67"> <span class="tBlue">background-blend-mode:</span> darken;</cl-cd>
<cl-cd data-idx="68"> <span class="tBlue">z-index:</span>6;</cl-cd>
<cl-cd data-idx="69">}</cl-cd>
<cl-cd data-idx="70">.lrc{</cl-cd>
<cl-cd data-idx="71"> <span class="tBlue">width:</span> 100%;</cl-cd>
<cl-cd data-idx="72"> <span class="tBlue">height:</span> 120px;</cl-cd>
<cl-cd data-idx="73"> <span class="tBlue">overflow:</span> hidden;</cl-cd>
<cl-cd data-idx="74"> <span class="tBlue">display:</span> block;<span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="75"> <span class="tBlue">top:</span>12%; </cl-cd>
<cl-cd data-idx="76"> <span class="tBlue">left:</span>-20%;<span class="tBlue">z-index:</span> 7;</cl-cd>
<cl-cd data-idx="77"> <span class="tBlue">margin:</span> 0 auto;}</cl-cd>
<cl-cd data-idx="78"> </cl-cd>
<cl-cd data-idx="79"><span class="tGreen">/*歌词普通样式*/</span></cl-cd>
<cl-cd data-idx="80"> .lrc #ullrc li{</cl-cd>
<cl-cd data-idx="81"> <span class="tBlue">height:</span> 70px;</cl-cd>
<cl-cd data-idx="82"> <span class="tBlue">line-height:</span> 60px;</cl-cd>
<cl-cd data-idx="83"> <span class="tBlue">font-family:</span>华文隶书;</cl-cd>
<cl-cd data-idx="84"> <span class="tBlue">font-size:</span> 0px;</cl-cd>
<cl-cd data-idx="85"> <span class="tBlue">color:</span> #000078;</cl-cd>
<cl-cd data-idx="86"> <span class="tBlue">font-weight:</span> bold;</cl-cd>
<cl-cd data-idx="87"> <span class="tBlue">transition:</span> .3s all ease;</cl-cd>
<cl-cd data-idx="88"> <span class="tBlue">list-style-type:</span> none;</cl-cd>
<cl-cd data-idx="89"> <span class="tBlue">text-align:</span> center;<span class="tBlue">display:</span> block;</cl-cd>
<cl-cd data-idx="90"> <span class="tBlue">width:</span> 100%;</cl-cd>
<cl-cd data-idx="91"> <span class="tBlue">margin:</span> 0 auto;}</cl-cd>
<cl-cd data-idx="92"><span class="tGreen">/*动态歌词样式*/</span></cl-cd>
<cl-cd data-idx="93"> .lrc #ullrc li.active{ </cl-cd>
<cl-cd data-idx="94"> <span class="tBlue">font-size:</span> 55px;</cl-cd>
<cl-cd data-idx="95"><span class="tBlue">text-align:</span> center; <span class="tBlue">color:</span> transparent; <span class="tBlue">background:</span> repeating-linear-gradient(to right, gold, lightgreen) 50%/100px 80px; <span class="tBlue">-webkit-background-clip:</span> text;<span class="tBlue">filter:</span>drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);</cl-cd>
<cl-cd data-idx="96">}</cl-cd>
<cl-cd data-idx="97">. tz{ <span class="tBlue">position:</span> absolute; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center; </cl-cd>
<cl-cd data-idx="98">    }</cl-cd>
<cl-cd data-idx="99">    h1 {<span class="tBlue">font-size:</span> 2em;<span class="tBlue">margin-bottom:</span> 20px;</cl-cd>
<cl-cd data-idx="100">    }</cl-cd>
<cl-cd data-idx="101">    #countdown {<span class="tBlue">font-size:</span>1.5em;<span class="tBlue">margin-bottom:</span> 20px;</cl-cd>
<cl-cd data-idx="102">    }</cl-cd>
<cl-cd data-idx="103">    .container {<span class="tBlue">display:</span> inline-block; <span class="tBlue">padding:</span> 20px;<span class="tBlue">border-radius:</span> 10px;<span class="tBlue">background:</span>#1E90FF;<span class="tBlue">color:</span>#7CFC00;<span class="tBlue">margin:</span>30px auto;</cl-cd>
<cl-cd data-idx="104">    }</cl-cd>
<cl-cd data-idx="105">    .time-box { <span class="tBlue">display:</span> inline-block;<span class="tBlue">margin:</span> 0 10px;<span class="tBlue">padding:</span> 10px;<span class="tBlue">background:</span> #FF3030;<span class="tBlue">color:</span> #FFD700;<span class="tBlue">border-radius:</span> 5px;</cl-cd>
<cl-cd data-idx="106">}</cl-cd>
<cl-cd data-idx="107">    .time-box span {<span class="tBlue">display:</span> block;<span class="tBlue">font-size:</span> 1.5em;</cl-cd>
<cl-cd data-idx="108">    }</cl-cd>
<cl-cd data-idx="109">    .time-box b {<span class="tBlue">font-size:</span> 1.8em;</cl-cd>
<cl-cd data-idx="110">    }</cl-cd>
<cl-cd data-idx="111"> </cl-cd>
<cl-cd data-idx="112"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="113"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span> ></cl-cd>
<cl-cd data-idx="114"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"djs"</span>><<span class="tDarkRed">div</span> class=<span class="tMagenta">"container"</span> class=<span class="tMagenta">"tz"</span>></cl-cd>
<cl-cd data-idx="115">    <<span class="tDarkRed">h</span>1>2025春节大年初一倒计时<<span class="tDarkRed">/h</span>1></cl-cd>
<cl-cd data-idx="116">    <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"countdown"</span>></cl-cd>
<cl-cd data-idx="117">          <<span class="tDarkRed">div</span> class=<span class="tMagenta">"time-box"</span>><<span class="tDarkRed">span</span>>天<<span class="tDarkRed">/span</span>><<span class="tDarkRed">b</span> <span class="tRed">id</span>=<span class="tMagenta">"days"</span>><<span class="tDarkRed">/b</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="118">          <<span class="tDarkRed">div</span> class=<span class="tMagenta">"time-box"</span>><<span class="tDarkRed">span</span>>时<<span class="tDarkRed">/span</span>><<span class="tDarkRed">b</span> <span class="tRed">id</span>=<span class="tMagenta">"hours"</span>><<span class="tDarkRed">/b</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="119">          <<span class="tDarkRed">div</span> class=<span class="tMagenta">"time-box"</span>><<span class="tDarkRed">span</span>>分<<span class="tDarkRed">/span</span>><<span class="tDarkRed">b</span> <span class="tRed">id</span>=<span class="tMagenta">"minutes"</span>><<span class="tDarkRed">/b</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="120">          <<span class="tDarkRed">div</span> class=<span class="tMagenta">"time-box"</span>><<span class="tDarkRed">span</span>>秒<<span class="tDarkRed">/span</span>><<span class="tDarkRed">b</span> <span class="tRed">id</span>=<span class="tMagenta">"seconds"</span>><<span class="tDarkRed">/b</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="121">    <<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="122"> <<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="123"> <<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="124"><<span class="tDarkRed">span</span> <span class="tRed">id</span>=<span class="tMagenta">"btnFs"</span>><<span class="tDarkRed">/span</span>></cl-cd>
<cl-cd data-idx="125"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"pic"</span> ><<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"Img"</span> src=<span class="tMagenta">"https://wimg.588ku.com/gif620/22/01/07/57eef3f535fb1ea56925950f32f58a5d.gif"</span> alt=<span class="tMagenta">""</span> /><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="126"><<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid1"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4"</span> autoplay loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="127"><<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid2"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2418175/00/08/42/5d2228836b4e9.mp4"</span> autoplay loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="128"><<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> alt=<span class="tMagenta">""</span> src=<span class="tMagenta">"https://xlaj.cn/upfile/202411/30/07.gif"</span> title=<span class="tMagenta">"播放/暂停"</span> /></cl-cd>
<cl-cd data-idx="129"><<span class="tDarkRed">div</span> class=<span class="tMagenta">"lrc"</span>></cl-cd>
<cl-cd data-idx="130">    <<span class="tDarkRed">ul</span> <span class="tRed">id</span>=<span class="tMagenta">"ullrc"</span>><<span class="tDarkRed">/ul</span>></cl-cd>
<cl-cd data-idx="131">    <<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="132"><<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://cccimg.com/view.php/c61b104506de5c4c3661bdff879437d8.mp3"</span> loop autoplay><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="133"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="134"><<span class="tDarkRed">script</span> type=<span class="tMagenta">"module"</span>></cl-cd>
<cl-cd data-idx="135">    <span class="tBlue">import</span> qp from <span class="tMagenta">'https://638183.freep.cn/638183/web/mod/fscreen.js'</span>;</cl-cd>
<cl-cd data-idx="136">    qp.fs(<span class="tMagenta">'papa'</span>,<span class="tMagenta">'btnFs'</span>);</cl-cd>
<cl-cd data-idx="137"><<span class="tDarkRed">/script</span>></cl-cd>
<cl-cd data-idx="138"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="139"><span class="tBlue">var</span> mState = () => {</cl-cd>
<cl-cd data-idx="140"> player.style.setProperty(<span class="tMagenta">'--state'</span>, aud.paused ? <span class="tMagenta">'paused'</span> : <span class="tMagenta">'running'</span>); </cl-cd>
<cl-cd data-idx="141"> papa.style.setProperty(<span class="tMagenta">'--state'</span>, aud.paused ? <span class="tMagenta">'paused'</span> : <span class="tMagenta">'running'</span>)</cl-cd>
<cl-cd data-idx="142"> aud.paused ? (vid1.pause(),vid2.pause(), image0.stop()) : (vid1.play(),vid2.play(), image0.play());</cl-cd>
<cl-cd data-idx="143">};</cl-cd>
<cl-cd data-idx="144"> aud.oncanplay = aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="145"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="146"><<span class="tDarkRed">/script</span>></cl-cd>
<cl-cd data-idx="147"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="148"><span class="tBlue">if</span> (<span class="tMagenta">'getContext'</span> <span class="tBlue">in</span> <span class="tRed">document</span>.createElement(<span class="tMagenta">'canvas'</span>)) {</cl-cd>
<cl-cd data-idx="149"> HTMLImageElement.prototype.play = <span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="150">    <span class="tBlue">if</span> (<span class="tBlue">this</span>.storeCanvas) {</cl-cd>
<cl-cd data-idx="151">          <span class="tGreen">// 移除存储的canvas</span></cl-cd>
<cl-cd data-idx="152">          <span class="tBlue">this</span>.storeCanvas.parentElement.removeChild(<span class="tBlue">this</span>.storeCanvas);</cl-cd>
<cl-cd data-idx="153">          <span class="tBlue">this</span>.storeCanvas = null;</cl-cd>
<cl-cd data-idx="154">          <span class="tGreen">// 透明度还原</span></cl-cd>
<cl-cd data-idx="155">          image0.style.opacity = <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="156">    }</cl-cd>
<cl-cd data-idx="157">    <span class="tBlue">if</span> (<span class="tBlue">this</span>.storeUrl) {</cl-cd>
<cl-cd data-idx="158">          <span class="tBlue">this</span>.src = <span class="tBlue">this</span>.storeUrl; </cl-cd>
<cl-cd data-idx="159">    }</cl-cd>
<cl-cd data-idx="160"> };</cl-cd>
<cl-cd data-idx="161"> HTMLImageElement.prototype.stop = <span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="162">    <span class="tBlue">var</span> canvas = <span class="tRed">document</span>.createElement(<span class="tMagenta">'canvas'</span>);</cl-cd>
<cl-cd data-idx="163">    <span class="tGreen">// 尺寸</span></cl-cd>
<cl-cd data-idx="164">    <span class="tBlue">var</span> width = <span class="tBlue">this</span>.width, height = <span class="tBlue">this</span>.height;</cl-cd>
<cl-cd data-idx="165">    <span class="tBlue">if</span> (width && height) {</cl-cd>
<cl-cd data-idx="166">          <span class="tGreen">// 存储之前的地址</span></cl-cd>
<cl-cd data-idx="167">          <span class="tBlue">if</span> (!<span class="tBlue">this</span>.storeUrl) {</cl-cd>
<cl-cd data-idx="168">             <span class="tBlue">this</span>.storeUrl = <span class="tBlue">this</span>.src;</cl-cd>
<cl-cd data-idx="169">          }</cl-cd>
<cl-cd data-idx="170">          <span class="tGreen">// canvas大小</span></cl-cd>
<cl-cd data-idx="171">          canvas.width = width;</cl-cd>
<cl-cd data-idx="172">          canvas.height = height;</cl-cd>
<cl-cd data-idx="173">          <span class="tGreen">// 绘制图片帧（第一帧）</span></cl-cd>
<cl-cd data-idx="174">          canvas.getContext(<span class="tMagenta">'2d'</span>).drawImage(<span class="tBlue">this</span>, 0, 0, width, height);</cl-cd>
<cl-cd data-idx="175">          <span class="tGreen">// 重置当前图片</span></cl-cd>
<cl-cd data-idx="176">          <span class="tBlue">try</span> {</cl-cd>
<cl-cd data-idx="177">             <span class="tBlue">this</span>.src = canvas.toDataURL(<span class="tMagenta">"image/gif"</span>);</cl-cd>
<cl-cd data-idx="178">          } <span class="tBlue">catch</span>(e) {</cl-cd>
<cl-cd data-idx="179">             <span class="tGreen">// 跨域</span></cl-cd>
<cl-cd data-idx="180">             <span class="tBlue">this</span>.removeAttribute(<span class="tMagenta">'src'</span>);</cl-cd>
<cl-cd data-idx="181">             <span class="tGreen">// 载入canvas元素</span></cl-cd>
<cl-cd data-idx="182">             canvas.style.position = <span class="tMagenta">'absolute'</span>;</cl-cd>
<cl-cd data-idx="183">             <span class="tGreen">// 前面插入图片</span></cl-cd>
<cl-cd data-idx="184">             <span class="tBlue">this</span>.parentElement.insertBefore(canvas, <span class="tBlue">this</span>);</cl-cd>
<cl-cd data-idx="185">             <span class="tGreen">// 隐藏原图</span></cl-cd>
<cl-cd data-idx="186">             <span class="tBlue">this</span>.style.opacity = <span class="tMagenta">'0'</span>;</cl-cd>
<cl-cd data-idx="187">             <span class="tGreen">// 存储canvas</span></cl-cd>
<cl-cd data-idx="188">             <span class="tBlue">this</span>.storeCanvas = canvas;</cl-cd>
<cl-cd data-idx="189">          }</cl-cd>
<cl-cd data-idx="190">    }</cl-cd>
<cl-cd data-idx="191"> };</cl-cd>
<cl-cd data-idx="192">}</cl-cd>
<cl-cd data-idx="193"><span class="tBlue">var</span> image0= <span class="tRed">document</span>.getElementById(<span class="tMagenta">"Img"</span>);</cl-cd>
<cl-cd data-idx="194"><<span class="tDarkRed">/script</span>></cl-cd>
<cl-cd data-idx="195"><<span class="tDarkRed">script</span> ></cl-cd>
<cl-cd data-idx="196"><span class="tBlue">var</span> lrc = `</cl-cd>
<cl-cd data-idx="197">[<span class="tBlue">offset:</span>0]</cl-cd>
<cl-cd data-idx="198">欢乐中国年 - 孙悦</cl-cd>
<cl-cd data-idx="199">词：张俊以</cl-cd>
<cl-cd data-idx="200">曲：卞留念</cl-cd>
<cl-cd data-idx="201">欢乐中国年</cl-cd>
<cl-cd data-idx="202">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="203">啦啦啦啦啦年</cl-cd>
<cl-cd data-idx="204">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="205">欢乐中国年</cl-cd>
<cl-cd data-idx="206">金风送喜来</cl-cd>
<cl-cd data-idx="207">紫荆花已开</cl-cd>
<cl-cd data-idx="208">二月大地春雷</cl-cd>
<cl-cd data-idx="209">锣鼓敲起来</cl-cd>
<cl-cd data-idx="210">百年梦已圆</cl-cd>
<cl-cd data-idx="211">千年手相牵</cl-cd>
<cl-cd data-idx="212">中国走进新时代</cl-cd>
<cl-cd data-idx="213">金风送喜来</cl-cd>
<cl-cd data-idx="214">紫荆花已开</cl-cd>
<cl-cd data-idx="215">二月大地春雷</cl-cd>
<cl-cd data-idx="216">锣鼓敲起来</cl-cd>
<cl-cd data-idx="217">百年梦已圆</cl-cd>
<cl-cd data-idx="218">千年手相牵</cl-cd>
<cl-cd data-idx="219">中国走进新时代</cl-cd>
<cl-cd data-idx="220">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="221">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="222">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="223">中国年</cl-cd>
<cl-cd data-idx="224">恭喜恭喜中国年</cl-cd>
<cl-cd data-idx="225">五谷丰登笑开颜</cl-cd>
<cl-cd data-idx="226">恭喜恭喜中国年</cl-cd>
<cl-cd data-idx="227">歌声万里连成片</cl-cd>
<cl-cd data-idx="228">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="229">欢歌笑声连成片</cl-cd>
<cl-cd data-idx="230">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="231">红红火火到永远</cl-cd>
<cl-cd data-idx="232">金风送喜来</cl-cd>
<cl-cd data-idx="233">紫荆花已开</cl-cd>
<cl-cd data-idx="234">二月大地春雷</cl-cd>
<cl-cd data-idx="235">锣鼓敲起来</cl-cd>
<cl-cd data-idx="236">百年梦已圆</cl-cd>
<cl-cd data-idx="237">千年手相牵</cl-cd>
<cl-cd data-idx="238">中国走进新时代</cl-cd>
<cl-cd data-idx="239">金风送喜来</cl-cd>
<cl-cd data-idx="240">紫荆花已开</cl-cd>
<cl-cd data-idx="241">二月大地春雷</cl-cd>
<cl-cd data-idx="242">锣鼓敲起来</cl-cd>
<cl-cd data-idx="243">百年梦已圆</cl-cd>
<cl-cd data-idx="244">千年手相牵</cl-cd>
<cl-cd data-idx="245">中国走进新时代</cl-cd>
<cl-cd data-idx="246">恭喜恭喜中国年</cl-cd>
<cl-cd data-idx="247">五谷丰登笑开颜</cl-cd>
<cl-cd data-idx="248">恭喜恭喜中国年</cl-cd>
<cl-cd data-idx="249">歌声万里连成片</cl-cd>
<cl-cd data-idx="250">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="251">欢歌笑声连成片</cl-cd>
<cl-cd data-idx="252">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="253">红红火火到永远</cl-cd>
<cl-cd data-idx="254">恭喜恭喜中国年</cl-cd>
<cl-cd data-idx="255">五谷丰登笑开颜</cl-cd>
<cl-cd data-idx="256">恭喜恭喜中国年</cl-cd>
<cl-cd data-idx="257">歌声万里连成片</cl-cd>
<cl-cd data-idx="258">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="259">欢歌笑声连成片</cl-cd>
<cl-cd data-idx="260">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="261">红红火火到永远</cl-cd>
<cl-cd data-idx="262">恭喜恭喜中国年</cl-cd>
<cl-cd data-idx="263">五谷丰登笑开颜</cl-cd>
<cl-cd data-idx="264">恭喜恭喜中国年</cl-cd>
<cl-cd data-idx="265">歌声万里连成片</cl-cd>
<cl-cd data-idx="266">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="267">欢歌笑声连成片</cl-cd>
<cl-cd data-idx="268">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="269">红红火火到永远</cl-cd>
<cl-cd data-idx="270">红红火火到永远</cl-cd>
<cl-cd data-idx="271">欢乐中国年</cl-cd>
<cl-cd data-idx="272">欢乐欢乐中国年</cl-cd>
<cl-cd data-idx="273"> </cl-cd>
<cl-cd data-idx="274">`;</cl-cd>
<cl-cd data-idx="275"><span class="tBlue">function</span> $(<span class="tRed">id</span>) {</cl-cd>
<cl-cd data-idx="276"> <span class="tBlue">return</span> <span class="tRed">document</span>.getElementById(<span class="tRed">id</span>);</cl-cd>
<cl-cd data-idx="277">}<span class="tGreen">//这样写以后getid方便</span></cl-cd>
<cl-cd data-idx="278"><span class="tBlue">function</span> getLrcArray() {</cl-cd>
<cl-cd data-idx="279"> <span class="tBlue">var</span> parts = lrc.split(<span class="tMagenta">"\n"</span>);</cl-cd>
<cl-cd data-idx="280"> <span class="tBlue">for</span> (<span class="tBlue">let</span> index = 0; index < parts.length; index++) {</cl-cd>
<cl-cd data-idx="281">    parts = getLrcObj(parts);</cl-cd>
<cl-cd data-idx="282"> }</cl-cd>
<cl-cd data-idx="283"> <span class="tBlue">return</span> parts;</cl-cd>
<cl-cd data-idx="284"> </cl-cd>
<cl-cd data-idx="285"> <span class="tBlue">function</span> getLrcObj(content) {</cl-cd>
<cl-cd data-idx="286">    <span class="tBlue">var</span> twoParts = content.split(<span class="tMagenta">"]"</span>);</cl-cd>
<cl-cd data-idx="287">    <span class="tBlue">var</span> time = twoParts.substr(1);</cl-cd>
<cl-cd data-idx="288">    <span class="tBlue">var</span> timeParts = time.split(<span class="tMagenta">":"</span>);</cl-cd>
<cl-cd data-idx="289">    <span class="tBlue">var</span> seconds = +timeParts;</cl-cd>
<cl-cd data-idx="290">    <span class="tBlue">var</span> min = +timeParts;</cl-cd>
<cl-cd data-idx="291">    seconds = min * 60 + seconds;</cl-cd>
<cl-cd data-idx="292">    <span class="tBlue">var</span> words = twoParts;</cl-cd>
<cl-cd data-idx="293">    <span class="tBlue">return</span>{</cl-cd>
<cl-cd data-idx="294">          <span class="tBlue">seconds:</span> seconds,</cl-cd>
<cl-cd data-idx="295">          <span class="tBlue">words:</span> words,</cl-cd>
<cl-cd data-idx="296">    };</cl-cd>
<cl-cd data-idx="297"> } </cl-cd>
<cl-cd data-idx="298">}</cl-cd>
<cl-cd data-idx="299"><span class="tBlue">var</span> lrcArray = getLrcArray();</cl-cd>
<cl-cd data-idx="300"><span class="tBlue">function</span> inputLrc() {</cl-cd>
<cl-cd data-idx="301"> <span class="tBlue">for</span> (<span class="tBlue">let</span> index = 0; index < lrcArray.length; index++) {</cl-cd>
<cl-cd data-idx="302">    <span class="tBlue">var</span> li = <span class="tRed">document</span>.createElement(<span class="tMagenta">"li"</span>);</cl-cd>
<cl-cd data-idx="303">    li.innerText = lrcArray.words;</cl-cd>
<cl-cd data-idx="304">    $(<span class="tMagenta">"ullrc"</span>).appendChild(li);</cl-cd>
<cl-cd data-idx="305"> }</cl-cd>
<cl-cd data-idx="306">}</cl-cd>
<cl-cd data-idx="307">inputLrc();</cl-cd>
<cl-cd data-idx="308"><span class="tBlue">function</span> setPosition() {</cl-cd>
<cl-cd data-idx="309"> <span class="tBlue">var</span> index = getLrcIndex();</cl-cd>
<cl-cd data-idx="310"> <span class="tBlue">if</span> (index == -1) {</cl-cd>
<cl-cd data-idx="311">    <span class="tBlue">return</span>;</cl-cd>
<cl-cd data-idx="312"> }</cl-cd>
<cl-cd data-idx="313"> <span class="tBlue">var</span> lrc_li_height = 70, lrc_ul_height = 60;<span class="tGreen">/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */</span></cl-cd>
<cl-cd data-idx="314"> <span class="tBlue">var</span> top = index * lrc_li_height + lrc_li_height / 3 - lrc_ul_height / 3;</cl-cd>
<cl-cd data-idx="315"> <span class="tBlue">if</span> (top < 0) {</cl-cd>
<cl-cd data-idx="316">    top = 0;</cl-cd>
<cl-cd data-idx="317"> }</cl-cd>
<cl-cd data-idx="318"> $(<span class="tMagenta">"ullrc"</span>).style.marginTop = -top + <span class="tMagenta">"px"</span>;</cl-cd>
<cl-cd data-idx="319"> <span class="tBlue">var</span> activeLi = $(<span class="tMagenta">"ullrc"</span>).querySelector(<span class="tMagenta">".active"</span>);</cl-cd>
<cl-cd data-idx="320"> <span class="tBlue">if</span>(activeLi){</cl-cd>
<cl-cd data-idx="321">    activeLi.classList.remove(<span class="tMagenta">"active"</span>);</cl-cd>
<cl-cd data-idx="322"> }</cl-cd>
<cl-cd data-idx="323"> $(<span class="tMagenta">"ullrc"</span>).children.classList.add(<span class="tMagenta">"active"</span>);</cl-cd>
<cl-cd data-idx="324">}</cl-cd>
<cl-cd data-idx="325"><span class="tBlue">var</span> turn = 0;</cl-cd>
<cl-cd data-idx="326"><span class="tBlue">function</span> getLrcIndex(){</cl-cd>
<cl-cd data-idx="327"> <span class="tBlue">var</span> time = $(<span class="tMagenta">"aud"</span>).currentTime + turn;</cl-cd>
<cl-cd data-idx="328"> <span class="tBlue">for</span> (<span class="tBlue">var</span> index = 0; index < lrcArray.length; index++) {</cl-cd>
<cl-cd data-idx="329">    <span class="tBlue">if</span> (lrcArray.seconds > time) {</cl-cd>
<cl-cd data-idx="330">          <span class="tBlue">return</span> index - 1;</cl-cd>
<cl-cd data-idx="331">    }</cl-cd>
<cl-cd data-idx="332"> }</cl-cd>
<cl-cd data-idx="333">}</cl-cd>
<cl-cd data-idx="334">$(<span class="tMagenta">"aud"</span>).ontimeupdate = setPosition;</cl-cd>
<cl-cd data-idx="335"><<span class="tDarkRed">/script</span> ></cl-cd>
<cl-cd data-idx="336"> <<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="337">    <span class="tBlue">function</span> updateCountdown() {</cl-cd>
<cl-cd data-idx="338">          <span class="tBlue">const</span> targetDate = <span class="tBlue">new</span> <span class="tRed">Date</span>(<span class="tMagenta">'January 29, 2025 00:00:00'</span>).getTime(); <span class="tGreen">// 修改为2025年新年</span></cl-cd>
<cl-cd data-idx="339">          <span class="tBlue">const</span> now = <span class="tBlue">new</span> <span class="tRed">Date</span>().getTime();</cl-cd>
<cl-cd data-idx="340">          <span class="tBlue">const</span> timeDifference = targetDate - now;</cl-cd>
<cl-cd data-idx="341"> </cl-cd>
<cl-cd data-idx="342">          <span class="tBlue">const</span> days = <span class="tRed">Math</span>.floor(timeDifference / (1000 * 60 * 60 * 24));</cl-cd>
<cl-cd data-idx="343">          <span class="tBlue">const</span> hours = <span class="tRed">Math</span>.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));</cl-cd>
<cl-cd data-idx="344">          <span class="tBlue">const</span> minutes = <span class="tRed">Math</span>.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));</cl-cd>
<cl-cd data-idx="345">          <span class="tBlue">const</span> seconds = <span class="tRed">Math</span>.floor((timeDifference % (1000 * 60)) / 1000);</cl-cd>
<cl-cd data-idx="346"> </cl-cd>
<cl-cd data-idx="347">          <span class="tRed">document</span>.getElementById(<span class="tMagenta">'days'</span>).innerText = days;</cl-cd>
<cl-cd data-idx="348">          <span class="tRed">document</span>.getElementById(<span class="tMagenta">'hours'</span>).innerText = hours;</cl-cd>
<cl-cd data-idx="349">          <span class="tRed">document</span>.getElementById(<span class="tMagenta">'minutes'</span>).innerText = minutes;</cl-cd>
<cl-cd data-idx="350">          <span class="tRed">document</span>.getElementById(<span class="tMagenta">'seconds'</span>).innerText = seconds;</cl-cd>
<cl-cd data-idx="351">    }</cl-cd>
<cl-cd data-idx="352"> </cl-cd>
<cl-cd data-idx="353">    setInterval(updateCountdown, 1000);</cl-cd>
<cl-cd data-idx="354">    updateCountdown(); </cl-cd>
<cl-cd data-idx="355"> <<span class="tDarkRed">/script</span>></cl-cd>
<cl-cd data-idx="356"><<span class="tDarkRed">/body</span>></cl-cd>
<cl-cd data-idx="357"><<span class="tDarkRed">/html</span>></cl-cd>
<cl-cd data-idx="358"> </cl-cd>
</div>

醉美水芙蓉 发表于前天 21:01

我看你上传网盘挺好的！

醉美水芙蓉 发表于前天 21:23

有些代码估计跟论坛冲突！

醉美水芙蓉 发表于前天 21:24

@亚伦等亚伦老师来给你讲解了！

klxf 发表于前天 22:41

醉美水芙蓉发表于 2025-1-16 21:01
我看你上传网盘挺好的！

是，还行，那个倒计时用的网页

klxf 发表于前天 22:43

醉美水芙蓉发表于 2025-1-16 21:23
有些代码估计跟论坛冲突！

不清楚，等亚伦老师答疑解惑:)

klxf 发表于昨天 01:51

醉美水芙蓉发表于 2025-1-16 21:23
有些代码估计跟论坛冲突！

又试了试，你说的很可能是正解，谢谢:)

亚伦影音工作室 发表于昨天 02:26

klxf 发表于 2025-1-16 22:43
不清楚，等亚伦老师答疑解惑

<div class="container" class="tz">问题就在这里！

翁奕童苑 发表于昨天 13:53

学习一下！十分感谢

klxf 发表于昨天 13:54

亚伦影音工作室发表于 2025-1-17 02:26
问题就在这里！

亚伦老师辛苦了！
不易，问题终于找到了，由衷感谢！
祝福您阖家康乐、好运连连、新春愉快:)

页: [1]

查看完整版本: 请教亚伦老师：倒计时牌位置预览正常，发在论坛咋就不可控呢？（附源码）