酬天问

马黑黑

马黑黑

帖子代码（动态加载多个JS文件演示）：

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
   
3.   .pa { --bg: #000 url('https://638183.freep.cn/638183/t24/6/itw.jpg') no-repeat center/cover; color: lightblue; }
   
4.   .player { width: 20%; opacity: .9; }
   
5.   .bgprog { bottom: 20px; }
   
6.   .btnFs { right: 30px; top: 30px; }
   
7. </style>
   
8. 
   
9. <div class="pa">
   
10.   <audio src="https://music.163.com/song/media/outer/url?id=3349065352" autoplay loop></audio>
    
11.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/35/88/5fe9ad4c67cff.mp4" autoplay loop muted></video>
    
12.   <svg id="mysvg" class="player rotate" viewBox="-200 -200 400 400">
    
13.           <title>Alt+X</title>
    
14.   </svg>
    
15.   <div class="bgprog"></div>
    
16.   <div class="btnFs" title="F11"></div>
    
17. </div>
    
18. 
    
19. <script>
    
20.   function loadJs(url, callback) {
    
21.     var script = document.createElement('script');
    
22.     script.charset = 'utf-8';
    
23.     script.src = url;
    
24.     script.onload = function() {
    
25.       if (callback) callback();
    
26.     };
    
27.     document.head.appendChild(script);
    
28.   }
    
29.   
    
30.   // 业务逻辑函数 ：跑绘图插件 svgdr 和 音画帖插件 tz
    
31.   function tzRun() {
    
32.     // 绘图（小播）
    
33.     var dr = _dr(mysvg);
    
34.     dr.gradient(
    
35.       'linearGradient',
    
36.       {id: 'grd', x1: 0, x2: 0, y1: 0, y2: 1},
    
37.       [['plum', 0], ['red', .5], ['black', 1]]
    
38.     );
    
39.     dr.path('M0 0 C-100 -200,100 -200,0 0', 'url(#grd)').rotates(5);
    
40. 
    
41.     // 制帖
    
42.     var tz = TZ('pa');
    
43.     tz.start();
    
44.   }
    
45. 
    
46.   // 加载两个JS文件资源
    
47.   loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js', function() {
    
48.     loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
49.   });
    
50. </script>

复制代码

马黑黑

动态加载多个外部JS文件相关说明：

        JS：动态加载多个JS文件 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

梦江南

欣赏黑黑老师音画佳作习例。

杨帆

代码简洁，运行顺畅，谢谢马老师精彩示范

小辣椒

欣赏黑黑新的效果制作，漂亮

马黑黑

小辣椒 发表于 2026-4-25 21:01
欣赏黑黑新的效果制作，漂亮

马黑黑

梦江南 发表于 2026-4-25 15:04
欣赏黑黑老师音画佳作习例。

马黑黑

杨帆 发表于 2026-4-25 18:45
代码简洁，运行顺畅，谢谢马老师精彩示范

红影

加载的匿名函数对应的是tzRun，而且前面有function tzRun() 的设置，加载的东西就对应上了。
其实能不用加载多个，就不加载，多了感觉复杂

红影

感谢黑黑的详细讲解，学习了

马黑黑

红影 发表于 2026-4-26 19:33
感谢黑黑的详细讲解，学习了

墙裂感谢领导支持

马黑黑

红影 发表于 2026-4-26 19:33
加载的匿名函数对应的是tzRun，而且前面有function tzRun() 的设置，加载的东西就对应上了。
其实能不用加 ...

就是嵌套。嵌套是很有必要的，就是穿衣服。

另外，第三步，既然是调用了 tzRun 函数，它就不是匿名函数，它有名，tzRun

红影

马黑黑 发表于 2026-4-26 20:27
墙裂感谢领导支持

你也是领导，墙裂感谢领导带来的好东西

红影

马黑黑 发表于 2026-4-26 20:29
就是嵌套。嵌套是很有必要的，就是穿衣服。

另外，第三步，既然是调用了 tzRun 函数，它就不是匿名函 ...

嗯嗯，有对应名字了，就不是匿名了呢

马黑黑

红影 发表于 2026-4-30 15:44
嗯嗯，有对应名字了，就不是匿名了呢

JS的匿名函数是酱紫：

function () {
    // 函数具体代码
}

下面是有函数名的函数：

function add(a,b) {
    return a+b;
}

马黑黑

红影 发表于 2026-4-30 15:44
你也是领导，墙裂感谢领导带来的好东西

天

红影

马黑黑 发表于 2026-4-30 21:16
JS的匿名函数是酱紫：

function () {

嗯，有函数名的有明确的指向。

红影

马黑黑 发表于 2026-4-30 21:16
天

地

马黑黑

红影 发表于 2026-5-1 17:09
地

人