酬天问
<style>@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: #000 url('https://638183.freep.cn/638183/t24/6/itw.jpg') no-repeat center/cover; color: lightblue; }
.player { width: 20%; opacity: .9; }
.bgprog { bottom: 20px; }
.btnFs { right: 30px; top: 30px; }
</style>
<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=3349065352" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/35/88/5fe9ad4c67cff.mp4" autoplay loop muted></video>
<svg id="mysvg" class="player rotate" viewBox="-200 -200 400 400">
<title>Alt+X</title>
</svg>
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>
<script>
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
function tzRun() {
var dr = _dr(mysvg);
dr.gradient(
'linearGradient',
{id: 'grd', x1: 0, x2: 0, y1: 0, y2: 1},
[['plum', 0], ['red', .5], ['black', 1]]
);
dr.path('M0 0 C-100 -200,100 -200,0 0', 'url(#grd)').rotates(5);
var tz = TZ('pa');
tz.start();
}
loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
</script> 帖子代码（动态加载多个JS文件演示）：
<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: #000 url('https://638183.freep.cn/638183/t24/6/itw.jpg') no-repeat center/cover; color: lightblue; }
.player { width: 20%; opacity: .9; }
.bgprog { bottom: 20px; }
.btnFs { right: 30px; top: 30px; }
</style>
<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=3349065352" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/35/88/5fe9ad4c67cff.mp4" autoplay loop muted></video>
<svg id="mysvg" class="player rotate" viewBox="-200 -200 400 400">
<title>Alt+X</title>
</svg>
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>
<script>
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
// 业务逻辑函数 ：跑绘图插件 svgdr 和 音画帖插件 tz
function tzRun() {
// 绘图（小播）
var dr = _dr(mysvg);
dr.gradient(
'linearGradient',
{id: 'grd', x1: 0, x2: 0, y1: 0, y2: 1},
[['plum', 0], ['red', .5], ['black', 1]]
);
dr.path('M0 0 C-100 -200,100 -200,0 0', 'url(#grd)').rotates(5);
// 制帖
var tz = TZ('pa');
tz.start();
}
// 加载两个JS文件资源
loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
</script>
动态加载多个外部JS文件相关说明：
JS：动态加载多个JS文件 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
欣赏黑黑老师音画佳作习例。{:4_199:} 代码简洁，运行顺畅，谢谢马老师精彩示范{:4_180:} 欣赏黑黑新的效果制作，漂亮{:4_178:} 小辣椒 发表于 2026-4-25 21:01
欣赏黑黑新的效果制作，漂亮
{:4_180:} 梦江南 发表于 2026-4-25 15:04
欣赏黑黑老师音画佳作习例。
{:4_190:} 杨帆 发表于 2026-4-25 18:45
代码简洁，运行顺畅，谢谢马老师精彩示范
{:4_191:} 加载的匿名函数对应的是tzRun，而且前面有function tzRun() 的设置，加载的东西就对应上了。
其实能不用加载多个，就不加载，多了感觉复杂{:4_173:} 感谢黑黑的详细讲解，学习了{:4_187:} 红影 发表于 2026-4-26 19:33
感谢黑黑的详细讲解，学习了
墙裂感谢领导支持{:4_189:} 红影 发表于 2026-4-26 19:33
加载的匿名函数对应的是tzRun，而且前面有function tzRun() 的设置，加载的东西就对应上了。
其实能不用加 ...
就是嵌套。嵌套是很有必要的，就是穿衣服。
另外，第三步，既然是调用了 tzRun 函数，它就不是匿名函数，它有名，tzRun 马黑黑 发表于 2026-4-26 20:27
墙裂感谢领导支持
你也是领导，墙裂感谢领导带来的好东西{:4_189:} 马黑黑 发表于 2026-4-26 20:29
就是嵌套。嵌套是很有必要的，就是穿衣服。
另外，第三步，既然是调用了 tzRun 函数，它就不是匿名函 ...
嗯嗯，有对应名字了，就不是匿名了呢{:4_173:} 红影 发表于 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
地
人
页:
[1]
2