tzMaker指令速览
<style>#mainBox { width: 98vw; left: calc(50% - 81px); transform: translateX(-50%); font-size: 16px; margin: 20px auto; z-index: 999; position: relative; }
.dataTab { width: 100%; border-collapse: collapse; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; white-space: pre-wrap; tab-size: 4; box-sizing: border-box; background: #eee; position: relative; }
.dataTab caption { font-size: 2.4em; font-weight: bold; text-align: center; padding: 10px 0; }
.dataTab tr:first-child { position: sticky; top: 0; }
.dataTab th, .dataTab td { padding: 8px 10px; border: 1px solid #999; }
.dataTab th { padding: 16px 10px; background: rgba(173,216,230); font-weight: bold; font-size: 1.2em; }
.dataTab td:first-child { text-align: center; }
.dataTab tr { background: rgba(173,216,230,.05); }
.dataTab tr:hover { background: rgba(173,216,230, .35); }
</style>
<div id="mainBox">
<table class="dataTab">
<caption>tzMaker指令速览</caption>
<tr>
<th width="50">序号</th>
<th width="100">指令</th>
<th width="500">语法</th>
<th width="500">说明</th>
<th>示例</th>
</tr>
</table>
</div>
<script>
const dataTab = document.querySelector('.dataTab');
const cmds = {
add: {
cmd: `add(元素标签, 元素id, 元素class, { 元素属性 })`,
exp: `添加元素`,
exm: `add('div', 'player')<br>add('img', '', 'flower', {src: '图片地址', alt: ''})<br>add('audio', '', '', {src: 'MP3地址'})`
},
bgprog: {
cmd: `bgprog(对象id, 对象class)`,
exp: `背景进度条`,
exm: `bgprog() 或 bgprog('progress')`
},
browser: {
cmd: `browser()`,
exp: `获取浏览器版本名和版本号`,
exm: `var b = tz.browser();<br>console.log(b.name, b.version);`
},
color16: {
cmd: `color16()`,
exp: `生成16进制颜色`,
exm: `var color = tz.color16(); //#002da2`
},
colorHSL: {
cmd: `colorHSL(h, s, l, a)`,
exp: `生成hsla颜色`,
exm: `var color = colorHSL();<br>var color = colorHSL(, 50, 100, 1);<br>var color = colorHSL('', 50, , );`
},
colorRGB: {
cmd: `colorRGB(r, g, b, a)`,
exp: `生成rgba颜色`,
exm: `var c1 = tz.colorRGB();<br>var c2 = tz.colorRGB(0, , 0, 1);<br>var c3 = tz.colorRGB(0, 255, 0, );`
},
css: {
cmd: `css(内联css代码)`,
exp: `添加CSS样式表`,
exm: `tz.css(\`<br>\t#player { width: 60px; height: 60px; }<br>\t.lrc { --c1: red; --c2: tan; }<br>\`);`
},
fs: {
cmd: `fs()`,
exp: `全屏按钮`,
exm: `tz.fs(); 或 tz('mybtn'); //使用自设按钮`
},
getRanInt: {
cmd: `getRanInt(小数，大数)`,
exp: `取两数间随机整数`,
exm: `var num = tz.getRanInt(-2, 2); //结果不排除-2和2`
},
lrc: {
cmd: `lrc(歌词数组变量)`,
exp: `创建LRC歌词标签`,
exm: `var gc = [ , ];<br>tz.lrc(gc);`
},
lzRan: {
cmd: `lzRan(数量, 父元素, { 粒子配置 })`,
exp: `生成随机分布粒子`,
exm: `//在帖子容器生成20个默认随机粒子（<a href="http://mhh.52qingyin.cn/api/tz/#h4_5" target="_blank">更多说明与示例</a>）<br>tz.lzRan(20, tz.pa);`
},
lzRing: {
cmd: `lzRing(数量, 父元素, { 粒子配置 })`,
exp: `生成绕圈圈的粒子`,
exm: `//更多示例与说明参阅lzRan的链接<br>tz.lzRing(12, 'ma', { className: 'ball'});`
},
lzRot: {
cmd: `lzRot(数量, 父元素, { 粒子配置 })`,
exp: `生成原地旋转粒子`,
exm: `//更多示例与说明参阅lzRan的链接<br>tz.lzRot(3, 'lzpa', { angle: 180 })`
},
mlist: {
cmd: `mlist(音频数组变量, lrc标识, lrc样式)`,
exp: `创建歌单`,
exm: `//...(这里声明相关变量)<a href="http://mhh.52qingyin.cn/api/tz/#h4_8" target="_blank">详细说明</a>）<br>tz.mlist(mp3Ar, true, 'bottom: 30px');`
},
playmp3: {
cmd: `playmp3()`,
exp: `设置刚创建的元素为小播`,
exm: `tz.add('img', '', '', { tsrc: '图片地址' })<br>.playmp3();`
},
ranPos: {
cmd: `ranPos(距离, 偏移量)`,
exp: `取指定距离内随机位置`,
exm: `var x = tz.ranPos(1200, 50);<br>var y = tz.ranPos(640, 50);`
},
ringPos: {
cmd: `ringPos(顶点数量, { 配置 })`,
exp: `取外切圆顶点xy坐标数据`,
exm: `<a href="http://mhh.52qingyin.cn/api/tz/#h4_19" target="_blank">详细配置与示例</a>`
},
svgprog: {
cmd: `svgprog(svg节点, svg子元素一, svg子元素二)`,
exp: `创建svg进度条（<a href="http://mhh.52qingyin.cn/api/tz/#h4_9" target="_blank">详细说明</a>）`,
exm: `//msvg、track、prog均为id<br>tz.svgporg(msvg, track, prog);`
},
svgson: {
cmd: `svgson(svg节点, 子svg元素标签, { 配置 })`,
exp: `创建SVG基本图像`,
exm: `<a href="http://mhh.52qingyin.cn/api/tz/#h4_10" target="_blank">详细配置与示例</a>`
},
svgsonsRot: {
cmd: `svgsonsRot(数量, SVG节点, 图案标签, 图案类名, { 配置 })`,
exp: `创建由单一图形旋转而成的SVG图案`,
exm: `<a href="http://mhh.52qingyin.cn/api/tz/#h4_11" target="_blank">详细说明与示例</a>`
},
style: {
cmd: `style(CSS样式，可选目标id)`,
exp: `给刚创建或指定元素设置样式`,
exm: `//为全屏按钮设置位置<br>tz.fs().style('left: 20px; top: 20px');`
},
text: {
cmd: `text(富文本, 可选目标对象)`,
exp: `给刚添加或指定元素添加文本`,
exm: `tz.add('div', '', '').text('<p>Hello tzMaker!\</p\>')`
},
to: {
cmd: `to(目标对象节点)`,
exp: `将添加的元素置入指定元素内`,
exm: `tz.add('div', 'mum', 'player'); //父元素<br>tz.add('div', '', 'son').to('mum'); //子元素`
}
};
const frg = document.createDocumentFragment();
let count = 0;
for(let c in cmds) {
const { cmd, exp, exm } = cmds;
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${++count}</td>
<td>${c}</td>
<td>${cmd}</td>
<td>${exp}</td>
<td>${exm}</td>
`;
frg.appendChild(tr);
};
dataTab.appendChild(frg);
</script> 这么大的一张表，是不是很吓人{:4_170:} 这个图的的涵盖范围确实很全，要学会和灵活运用，没有一定的基础是玩不转的，真材实料的硬知识
小辣椒许多都不会啊
{:4_178:} 小辣椒 发表于 2025-11-6 18:11
这个图的的涵盖范围确实很全，要学会和灵活运用，没有一定的基础是玩不转的，真材实料的硬知识
小辣椒许 ...
从套用中慢慢体会，没有不会的 估计这个非常有用，肯定费心心力在研究创新！{:4_178:} 马黑黑 发表于 2025-11-6 18:19
从套用中慢慢体会，没有不会的
是的，我也是这样想，确实自己实际操作运用，掌握的还比较牢固一点 这个tzMaker指令速览表很实用，马老师您辛苦了{:4_180:} 小辣椒 发表于 2025-11-6 21:39
是的，我也是这样想，确实自己实际操作运用，掌握的还比较牢固一点
我相信，和你的师傅教的东西相比，我这个是非常简单的，加之你从你师傅那里学到的基础和你长期实践积累下来的知识和经验的加持，理解和运用这20来个指令根本不在话下。 杨帆 发表于 2025-11-6 21:40
这个tzMaker指令速览表很实用，马老师您辛苦了
{:4_190:} 樵歌 发表于 2025-11-6 19:43
估计这个非常有用，肯定费心心力在研究创新！
这个是文档的概括，而文档是模块的说明。没有创新，只是描述。 马黑黑 发表于 2025-11-6 21:48
我相信，和你的师傅教的东西相比，我这个是非常简单的，加之你从你师傅那里学到的基础和你长期实践积累下 ...
哈哈，黑黑高看我了，其实现在的小辣椒脑子没有以前好使，都生锈了{:4_198:} 小辣椒 发表于 2025-11-6 21:52
哈哈，黑黑高看我了，其实现在的小辣椒脑子没有以前好使，都生锈了
拼多多有除锈剂出售，价格诱人 马黑黑 发表于 2025-11-6 21:50
这个是文档的概括，而文档是模块的说明。没有创新，只是描述。
反正我不懂，只觉得高深莫测，很厉害。 樵歌 发表于 2025-11-7 07:05
反正我不懂，只觉得高深莫测，很厉害。
都没有用上生僻字的{:4_189:} tzMaker真是大宝库，想要什么都可以从其中调用出来，不使用的还可以让它继续待在里面。
这个实在是太好了，黑黑的专项发明呢{:4_199:} 这个和黑黑设计的svgdr在线绘制工具一样，都是黑黑付出很多心血的专有技术啊{:4_199:} 红影 发表于 2025-11-7 09:26
这个和黑黑设计的svgdr在线绘制工具一样，都是黑黑付出很多心血的专有技术啊
言重了 红影 发表于 2025-11-7 09:25
tzMaker真是大宝库，想要什么都可以从其中调用出来，不使用的还可以让它继续待在里面。
这个实在是太好了 ...
谬赞谬赞
页:
[1]