《雪山》代码
<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>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 721px) ; <span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 800px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/snowmountain.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 2px 2px 5px #333; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> .mama { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 300px; <span class="tBlue">top:</span> 20px; <span class="tBlue">width:</span> 200px; <span class="tBlue">height:</span> 200px; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 8s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="4"> .<span class="tBlue">mama:</span>nth-of-type(2) { <span class="tBlue">left:</span> 400px; }</cl-cd>
<cl-cd data-idx="5"> e-son { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> calc(50% - 15px); <span class="tBlue">top:</span> 18px; <span class="tBlue">width:</span> 30px; <span class="tBlue">height:</span> 80px; <span class="tBlue">border-radius:</span> 100% 0; <span class="tBlue">border:</span> 1px solid gray; <span class="tBlue">transform-origin:</span> 50% 100%; <span class="tBlue">transform:</span> rotate(<span class="tBlue">var</span>(--deg)) translateY(-10px); <span class="tBlue">background:</span> hsla(<span class="tBlue">var</span>(--bg), 100%, 50%, .8); }</cl-cd>
<cl-cd data-idx="6"> #vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 70px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; }</cl-cd>
<cl-cd data-idx="7"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=31563720"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2402760/00/01/64/5b4744b57baf0.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">div</span> class=<span class="tMagenta">"mama"</span> <span class="tRed">id</span>=<span class="tMagenta">"ma"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="17">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="18"> <span class="tRed">Array</span>.from({<span class="tBlue">length:</span> 6}).forEach((e,k) => {</cl-cd>
<cl-cd data-idx="19"> e = <span class="tRed">document</span>.createElement(<span class="tMagenta">'e-son'</span>);</cl-cd>
<cl-cd data-idx="20"> e.style.cssText += `<span class="tBlue">--deg:</span> ${60 * k}deg; <span class="tBlue">--bg:</span> ${<span class="tRed">Math</span>.round(<span class="tRed">Math</span>.random() * 360)};`;</cl-cd>
<cl-cd data-idx="21"> ma.appendChild(e);</cl-cd>
<cl-cd data-idx="22"> });</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">var</span> node = <span class="tRed">document</span>.getElementById(<span class="tMagenta">'ma'</span>);</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">var</span> clone = node.cloneNode(true);</cl-cd>
<cl-cd data-idx="25"> clone.<span class="tRed">id</span> = <span class="tMagenta">'ma1'</span>;</cl-cd>
<cl-cd data-idx="26"> clone.onclick = () => ma.click();</cl-cd>
<cl-cd data-idx="27"> clone.style.cssText += <span class="tMagenta">'<span class="tBlue">left:</span> 800px; <span class="tBlue">top:</span> 160px; <span class="tBlue">filter:</span> hue-rotate(200deg);'</span>;</cl-cd>
<cl-cd data-idx="28"> papa.appendChild(clone);</cl-cd>
<cl-cd data-idx="29"> aud.onplaying = aud.onpause = () => {</cl-cd>
<cl-cd data-idx="30"> 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="31"> aud.paused ? vid.pause() : vid.play();</cl-cd>
<cl-cd data-idx="32"> };</cl-cd>
<cl-cd data-idx="33"> ma.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="34">})();</cl-cd>
<cl-cd data-idx="35"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
帖子地址：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=76219 主要知识点：
（一）播放器
播放器用 class="mama" 的 div 元素带六个子元素 e-son（自定义标签）。e-son 的 CSS代码在第五行，绝对定位，30*80 的宽高尺寸，转换中心在底部中央，旋转 --deg 个角度、Y轴平移 -10px，背景颜色使用 hsla 颜色模型，色相 --bg 度。
（二）播放器生成
e-son 元素未在 HTML 中书写，它们有 JS 动态生成，代码在 17~22行。生成六个 e-son 标签前一一给它们的CSS变量 --deg 和 --bg 赋值，最后追加都 id="ma" 的容器标签。
（三）播放器克隆
23~28行代码，克隆播放器。使用 JS 内置 cloneNode() 函数（方法）硬生生将 id="ma" 克隆为 id="ma1" 的新容器元素，赋予 ma1 和 ma 相同的点击功能，最后追加给帖子容器元素。 马黑黑 发表于 2024-5-28 18:31
主要知识点：
（一）播放器
这三个点讲解得太详细了，从叶片到小播到克隆。。都清楚明白。
看来这个克隆，比之前图形克隆复杂得多。。{:4_199:} 给老师上酒{:4_191:}{:4_199:} 南无月 发表于 2024-5-28 19:14
这三个点讲解得太详细了，从叶片到小播到克隆。。都清楚明白。
看来这个克隆，比之前图形克隆复杂得多。 ...
这个是节点克隆。
节点，就是文档树中某一个特定分支。例如，《雪山》一帖中帖子结构的播放器 id="ma" class="mama" 的标签，它有JS生成，内含6个子元素，还原HTML代码后结构如下：
<div id="ma" class="mama">
<e-son></e-son>
<e-son></e-son>
<e-son></e-son>
<e-son></e-son>
<e-son></e-son>
<e-son></e-son>
</div>
这就是一个文档树节点，该节点 id="ma"，样式通过 class="mama" 使用CSS代码的设置，内有六个自定义标签 s-son。
我们可以使用 JS 的节点克隆功能完整复制 id="ma" 的节点，包括它的子节点 e-son ，克隆出来的新节点应有自己的 id 否则原节点也不能正常工作（原因是同一个页面不能有两个相同的 id 元素存在，所以一山不容二虎吧，这个知识点官方文档没有说明）。
技巧就酱纸的。 南无月 发表于 2024-5-28 19:15
给老师上酒
喝合适了，谢谢 马黑黑 发表于 2024-5-28 19:41
喝合适了，谢谢
太好了，刚刚好最好。。{:4_199:} 马黑黑 发表于 2024-5-28 19:40
这个是节点克隆。
节点，就是文档树中某一个特定分支。例如，《雪山》一帖中帖子结构的播放器 id="ma" ...
节点克隆看上去也不难理解，以前是一个元素，现在是组合元素，可以这么理解么
至于ID那还是要有区别的吧，既是双胞胎也应该有自己的名字。
同一页不能有两个相同的ID。。
这个好象之前发代码贴的时候就是同一页面不可以两个贴子， 会互相干扰。。
可以理解它们{:4_170:} 南无月 发表于 2024-5-28 19:49
节点克隆看上去也不难理解，以前是一个元素，现在是组合元素，可以这么理解么
至于ID那还是要有区别的吧 ...
挺好挺好。感谢助力收摊 南无月 发表于 2024-5-28 19:45
太好了，刚刚好最好。。
不醉，能归 马黑黑 发表于 2024-5-28 19:40
这个是节点克隆。
节点，就是文档树中某一个特定分支。例如，《雪山》一帖中帖子结构的播放器 id="ma" ...
这个克隆好，那么一堆东西都能被抓过来了。
不知道能不能还克隆多个，比如继续clone.id = 'ma2';{:4_173:} 知识点要读看几遍{:4_173:} 这个小播好看，感谢黑黑又带来好东西{:4_199:} 感谢黑黑源码分享 小辣椒 发表于 2024-5-28 21:52
感谢黑黑源码分享
{:4_190:} 红影 发表于 2024-5-28 21:51
这个小播好看，感谢黑黑又带来好东西
{:4_190:} 小辣椒 发表于 2024-5-28 21:44
知识点要读看几遍
{:4_173:} 红影 发表于 2024-5-28 21:32
这个克隆好，那么一堆东西都能被抓过来了。
不知道能不能还克隆多个，比如继续clone.id = 'ma2';{:4_173 ...
这是自然的 马黑黑 发表于 2024-5-28 22:25
里面又有新东西呢{:4_187:}