酬天问

马黑黑

马黑黑

帖子代码（动态加载多个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!

梦江南

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