tzMaker 是一款轻量级的HTML5音画帖制作神器，通过简约的tz指令可以轻松制作、发布音画帖。以下说明对标
tzMaker 有一些基于CSS的约定，比如一些特定的class类名、CSS变量等会被模块某些指令作为默认配置使用，所以，配合配套的 .css 文档可以令做帖事半功倍。在帖子的 style 标签或 tz.css() 指令的CSS头一行加入 @import 'css文档路径'，注意文档路径的准确性和有效性。当前，CSS文档e版本适用于tz任何JS模块。
tz.css提供N多的class选择器供做帖使用，其中对做帖非常有用的是：
⊙ .pa : 帖子容器样式
⊙ .ma : 帖子播放器样式
⊙ .btnFs : 全屏按钮样式
⊙ .prog : 背景进度条样式
⊙ .absolute : 设置元素绝对定位样式
⊙ .title-text : 帖子标题样式
⊙ .pd-vid : 视频样式一
⊙ .qk-vid : 视频样式二
⊙ .rot-ani : 运行 @rot 动画选择器
⊙ .rotate-ani : 运行 @rotate 动画选择器
⊙ .rot-ani : 运行 @rot 动画选择器
⊙ .path-ani : 运行 @offset-distance 动画选择器
还有几个关键帧动画设计：
⊙ rot : 逆时针旋转
⊙ rotate : 顺时针旋转
⊙ offset-distance : 路径运动（0%~100%）
更多内容可查看CSS文档源码。
tzMaker指令主要分两大类型：主角指令和配角指令。
主角指令即为主要指令，是 tzMaker 做帖挑大梁的狠角色。现逐一描述如下——
⊙ 语法 : tz.add(tag, id, class, attributes)
⊙ 说明：
① tag 参数，HTML标签名，必选。要创建的标签名称用小角引号包裹，例如 'div'、'img'、'audio'、'video' 等等；
② id 参数，标签的id属性，可选，但如果后续参数需要设置则必选，可用空值 '' 占位，也可设置id，例如 'player'，若此，add() 指令所创建的标签将包含 id="player" 属性设置；
③ class 参数，标签的class类名，可选，设置要求和方法同 id 参数。此属性支持单个、多个class类名，多个类名可用空格将各类名隔开，例如 'txtbold txtred'。注意，id 和 class 的命名应遵循HTML相关规则；
④ attributes 参数，标签的其它属性，可选，结构为花括号包裹的单个或多个键值对，例如 title: "XXX"、src: "地址"、style: "left: 20px; top: 20px;" 等等，甚至id、class 也可以在这里设置（② ③ 参数空值的话），加个 style 内联CSS样式也很方便，可根据需要设置或不设置。键值对的键名若有短连接符应使用引号，键值规范上要求用引号，但布尔值、数值（不含%数字）可以不用。多个键值对时彼此间用小角都好隔开，可以以键值对为单位分行书写，也可以写在一行里。后续其它指令若出现相同情形一样按此处理。
// 添加一张图片 tz.add('img', '', '', { src: 'https://mysite/pic/dog.gif', alt: '', title: 'mydog', style: 'background: red;' });// 添加 class="ball" 的div标签 tz.add('div', '', 'ball');// 添加 id="msvg" 的svg标签 tz.add('svg', 'msvg', '', { width: 400, height: 400, viewBox: '0 0 200 200' });add() 指令是tz模块核心指令，模块内部的某些指令也会调用它完成特定工作。
⊙ 语法 : tz.bgprog(id, class)
⊙ 说明 : 参数 id 和 class 两个均为可选，第一个是标签的id，第二个是class类名（支持多个类名），可指向设定的CSS选择器以便调用预设样式，根据CSS设计决定使用参数。例如设计有 #jindu 选择器，指令写成 tz.bgprog('jindu');，或设计的进度条是个类选择器，.jindu，则指令写成 tz.bgprog('', 'jindu');，也可以同时设计id和class，参数都填上。进度条应通过标签的线性渐变背景实现，tz.bgprog() 指令为进度条标签设置CSS变量 --prg 动态值，所设计的 #jindu 或 .jindu 选择器 background 属性写成类似以下例子中的CSS语句。另，进度条标签会动态提供 data-time 属性值，可利用伪元素 content 属性 attr() 函数获取并显示该数据。/* CSS背景代码 */ background: linear-gradient( to right,red (var--prg) , lightblue 0 );/* bgprog()指令应用举例（style()指令用于定位） */ tz.bgprog() .style('left: 20%; bottom: 20px');
⊙ 语法 : tz.css(text)
⊙ 说明 : 参数 text 为css代码。若css代码需要分行写，请使用反引号 `` 替代小角引号 '' 或 "" 。该指令不返回自身，因此后续的链式指令对其无效。
// 设置帖子CSS代码 tz.css(`// 在这里分行写CSS代码 `);【注】也可以不使用此指令，直接将css代码构建在帖子容器所需的 style 标签中。
⊙ 语法 : tz.fs()
⊙ 说明 : fs() 指令不带参数时会创建一个 class="btnFs" 的div标签，若希望使用自己制定的类选择器，可以启用参数，写成 tz.fs('fullscreen')，则使用 .fullscreen {} 选择器制定的样式。// 缺省参数 : 需要导入 tz.css 或自行编写有 .btnFs {...} 选择器 tz.fs(); //或自定义类名 : 需要CSS中存在指定的类选择器 .mybotton {...} tz.fs('mybotton');
⊙ 语法 : tz.lrc(lrcAr)
⊙ 说明 :
① lrcAr 参数是歌词数组，必选，使用花朝格式的歌词结构，一般先声明歌词数组，再将数组变量名作为参数使用。歌词数组结构严谨，必须像如下这样，否则歌词同步功能无法正常运行：
var geci = [ [1.6,"歌词一",3], [6,"歌词二",5.2], [20.1,"……",4], [245.9,"歌词N",7] ];
② 本指令创建的歌词标签 class="lrc"，但也可以根据需要配置指令的第二个参数，元素标识或className，若配置并指向正确的元素，意为使用该元素作为歌词显示载体。
③ 本指令支持第三个可选参数，布尔值，是否使用淡入淡出+闪烁歌词效果，默认 false，设为 true 则歌词同步效果为淡入淡出+闪烁动画，此时歌词标签为 class="fadeInLrc"，其内将使用 class="char" 的 span 标签封装每一个字符，若需要可通过CSS .fadeInLrc 和 .char 选择器设置个性化样式。上例加了一个 style() 指令设置歌词标签的位置。配套CSS文档设置有 .lrc{} 选择器，tz.lrc() 指令无第二个参数配置时自动使用该选择器，只需做少量渲染歌词的个性化设置即可。.lrc 选择器可个性化设置的项目有 ——// 声明歌词数组 vargeci = [ [0.8,"《在雨中》-演唱：劉家昌，尤雅",0.6], [1.45,"··· 前奏（鋼琴，絃樂）···",17.6], [19,"在雨中 我送過你",4.0], [24.9,"在夜裡 我吻過你",4.0] ];// 使用数组名入参 tz.lrc(geci ).style('left: 20px; bottom: 20px;');left: 20px;这些设置属于CSS层面，可以在帖子CSS代码中加 .lrc {} 选择器，在该选择器花括号根据需要选择性地创建上面罗列的相关属性。也可以在 tz.lrc(geci) 之后链式使用 style() 指令配置属性值，多行书写属性时记得使用反引号包裹头尾属性集合。/* 定位 : 必须 */ top: 20px;/* 定位 : 必须 */ color: silver;/* 前景色 : 可选（默认wheat）*/ writing-mode: vertical-lr;/* 排版方向 : 可选（默认横向）*/ --rect: 0 0 100% 0;/* 排版方向配套属性 : 可选（默认0 100% 0 0）*/ --c1: white;/* 渐变颜色1 : 可选（默认橙色）*/ --c2: cyan;/* 渐变颜色2 : 可选（默认黄色）*/ --deg: to left;/* 渐变角度或方向 : 可选（默认180deg）*/ --border: 0 1px 0 0;/* 同步线条 : 可选（默认0 0 1px 0）*/
⊙ 语法 : tz.lzRan(num, pa, setting)
⊙ 说明 : lz 代表粒子，Ran 是 random 缩写。参数中：
① num 指粒子数量，≥ 1 的正整数，缺省用 null 或 '' 占位；
② pa 指粒子的父元素，值为元素节点标识或id、class名称，必须明确指向，例如假设帖子容器 id="papa"，则参数为 papa 或 'papa'；
③ setting : 粒子配置，可以缺省但只会得到形状为矩形的随机颜色的“粒子”。建议至少配置粒子的className，这将指定粒子使用CSS类选择器定义样式与行为。进行针对性配置则可以创建更为精彩的粒子效果，配置内容分三类，如下：第一类 : 粒子本源，共两个键值对：
① tag: 'div', - 粒子的标签名，缺省是 div
② className: 'mylizi', - 粒子 class="mylizi" 中的类名，缺省为 null
第二类 :粒子行内CSS样式，使用JS对象的写法，例如：
① 表示宽度，width: 40,，或者，width: '40px',，都合法；
② CSS属性名有短连线符号的，键名用小角引号包括，'border-radius': '2px solid gray',
第三类 : 粒子约定的CSS变量，目前有四个：
① cc: true, - 告知模块启用 --cc 变量赋值机制，这是设置随机颜色的变量，CSS或配置中存在使用 --cc 变量时设置此键值对；
② deg: true - 原理同上，作用对象是 --deg 变量，0~360deg 的角度随机值；
③ scale: true / [0.5, 1.2] - 粒子随机缩放，true 表示按模块默认值进行缩放，两个数值的数组表示在这个范围内缩放；
④ duration: 20 - 粒子关键帧动画周期时长边界值，大于0的浮点数；
⑤ delay: -10 - 粒子关键帧动画延时边界值，设为负数表示提前执行，可避免粒子动画同步化<div id="papa" class="pa"></div>//下面是JS代码，lzRan()指令能识别id和class // 生成20个缺省配置的粒子 tz.lzRan(20,papa );// 生成30个自定义配置的粒子 tz.lzRan(30,'pa' , { className: 'lz1 lz2'/* 引用的类选择器，支持单个、多个类名 */ tag: 'div',/* 粒子标签名，缺省时使用 'div' */ width: '40px',/* 粒子宽度（缺省'20px'）*/ height: '40px',/* 粒子高度（缺省'20px'）*/ left: 0,/* 左边值（缺省将随机分布） */ top: 0,/* 上边值（缺省将随机分布） */ background: 'green',/* 背景色（支持背景图片语句，缺省将分配随机颜色）*/ border: '1px solid var(--cc)',/* 边框颜色（使用 --cc 变量）*/ 'border-radius': '50%',/* 圆形边框（注意键名使用小角引号）*/ filter: 'hue-rotate(var(--deg))',/* 色相滤镜（使用 --deg 变量） */ duration: 15,/* 动画时长边界，数值*/ duration: -15,/* 动画延时边界，数值，负数表示提前执行 */ cc: true,/* 开启 --cc 变量随机颜色赋值 */ deg: true/* 开启 --deg 变量随机角度赋值 */ });lzRan() 指令的配置参数比较宽松自由，可以0配置，也可以根据需要自行配置，需要特别主要，预定的变量需要按要求配置。
⊙ 语法 : tz.lzRing(num, pa, setting)
⊙ 说明 : lz 代表粒子，Ring 是圆环之意。参数请参阅 lzRan() 指令，但如果设置第三个配置参数时主要无需配置 left、top 定位属性键值对。
⊙ 语法 : lzRot(num, pa, setting = {})
⊙ 说明 : lz 代表粒子，Rot 是旋转之意。参数请参阅 lzRan 指令，但本指令不要设置 left、top 定位键值对，此外它多设一个约定键值对angle ，分割角度，例如，angle: 360, 或， angle: 180,，缺省值是360。// 创建小播容器（id="lzpa"） tz.add('div', 'lzpa', 'wrap200 rotate-ani cursor', {title: 'Alt+X'}).playmp3();// 在小播容器（lzpa）中创建3个椭圆 tz.lzRot(3, 'lzpa', { className: 'ellipse',/* 粒子选择器是 .ellipse */ angle: 180,/* 分割的角度（椭圆满占位所以用圆角度的一半，缺省时是360）*/ cc : true,/* 启用 --cc 颜色颜色变量随机赋值 */ });/* ==== 附 .ellipse CSS选择器代码（配套CSS文档自带）==== */ .ellipse {--cc: green ; position: absolute; width: 95%; height: 35%; background: none; border: 4px solid var(--cc ); border-radius: 50%; }
⊙ 语法 : mlist(musics, lrc, lrcStyle)
⊙ 说明 : 使用此指令无需事先使用 add() 指令创建 audio 标签，若已创建，它的歌曲会被覆盖。参数三个：
① 参数1 musics 必选，它应是一个二维数组的变量名，该数组保存有歌曲地址、歌名、LRC歌词。
② 参数2 lrc 可选：当发布无歌词专辑时不要此参数，若发布LRC歌词同步的帖子，此参数设为非0、非空、非假的任意有效值，例如 1 或 true 或 '要' 等等都行，是 0 或 false 或 null 或 ''（空值）等等视为没有LRC歌词同步
③ 参数3 lrcStyle 可选，如设置则它将配套参数2 工作，用于设置LRC歌词标签的相关CSS设置，主要是位置、文本色和同步色等。
可研究下面例子加以掌握 ——// 准备歌词（无歌词或不想要歌词的不用准备） const geci1 = [ [2,"歌句一",4], [8.2,"歌句二",6.5], [15.06,"歌句N",4.32] ]; const geci2 = [ [1.5,"歌句一",3.4], [7.13,"歌句二",4.6], [16,"歌句N",3] ]; const geciN = [ [2.5,"歌句一",9], [17.02,"歌句二",5.86], [25,"歌句N",8] ];// 准备歌曲清单（地址、歌名必须，歌词根据准备情况填写或不填写） const mp3Ar = [ ['歌曲1地址', '歌名1', geci1], ['歌曲2地址', '歌名2', geci2], ['歌曲3地址', '歌名3'], ['歌曲4地址', '歌名4'], ['歌曲N地址', '歌名N', geciN] ];// 准备歌词标签定位 style 语句（也可以在CSS代码中使用选择器 .lrc {} 单独设置） constlrcCss = 'left: 30px; top: 30px;';// 创建歌单列表并安置其在右下角 tz.mlist(mp3Ar, 1,lrcCss ).style('right: 20px; bottom: 20px');// 或者，如果需要，可以自由设计 —— //tz.mlist(mp3Ar).style('right: 20px; bottom: 20px'); // 没有歌词同步，位置同上 //tz.mlist(mp3Ar); // 没有歌词同步，列表位置默认或由CSS .mList {} 选择器设置 //tz.mlist(mp3Ar, true); // 有歌词同步，LRC歌词标签默认或由CSS .lrc {} 选择器设置，列表位置默认或由CSS .mList {} 选择器设置
⊙ 语法 : tz.svgprog(svg, track, prog)
⊙ 说明 :
① 参数 svg 必选，指已经存在的SVG标签节点或id字符。svg元素应事先创建，可在帖子HTML代码中加入SVG标签，也可以使用 tz.add() 指令动态创建
② 参数 track 必选，指已经存在的SVG基本图形（含显性path标签）节点或id字符，用做进度器底轨。图形应事先创建，可在HTML代码中的SVG标签内完成，也可使用 tz.svgson() 指令创建，下同
③ 参数 prog 必选，指已经存在的SVG基本图形（含显性path标签）节点或id字符，用作进度器指示色。
本指令返回SVG标签，可以在指令的后面链式使用 style() 指令设置SVG的定位等CSS设置。// 创建前确保 id="msvg" 的SVG已经创建或存在，id="track"、id="prog" 的SVG图形已经创建或存在 tz.svgporg(msvg, track, prog);//tz.svgprog('msvg', 'track', 'prog'); // 这样写也行 // 或者，你的svg、图形是别的id的话 //tz.svgprog('yoursvg', 'yourtrack', 'yourprog')
⊙ 语法 : svgson(svg, tag, {option})
⊙ 说明 : son是儿子的意思，这里借之指生成SVG标签内的图形元素，参数三个：
① svg 必选，指svg标签节点或id字符，例如svg元素的id="mysvg"，可表达为 mysvg 或 'mysvg'
② tag 必选，SVG基本图形名称，比如 circle、rect、path等，写在引号内，例如 'circle'、'rect'、'path'
③ option 必选，一组写在花括号 {} 内的键值对，是对应SVG图形必须存在的属性和属性值，例如使用绘制一个圆，需要圆心坐标 cx、cy，需要半径 r，需要填充色 fill，需要描边色和描边厚度 stroke、stroke-width，特殊情况下还需要更多的属性，一切取决于所绘制的SVG图形的规范，这些都可以写在花括号 {} 里。// 假设已存在id="mysvg"的SVG标签 tz.svgson(mysvg, 'circle', { cx: 200, cy: 200, r: 190, fill: 'transparent', stroke: 'red', 'stroke-width': 8, /* stroke-width 键值有端连线，必须加引号，下同 */ 'stroke-linecap': 'round' /* 线帽 */ })
配角指令指辅助指令，有工具指令和后补指令两种类型。工具指令用于处理常用到的功能、返回处理结果，后补指令的作用是在 tz 上一次执行主角指令时返回的 DOM 节点上以链式补充形式给该 DOM 节点做相关操作。后补指令建议通过链式方式使用，当然，如果愿意也可以紧接着主角指令结束后的下一行另起炉灶，但这样的操作可能会出现后续修改代码时因疏忽导致配角指令和主角指令的关系割裂现象的发生，尽量少使用。
⊙ 语法 : tz.browser()
⊙ 说明 : 无参数。返回一个对象 {name: '浏览器名称', version: '版本号'}
目前能返回的浏览器名称有：
① Mozilla Firefox
② Apple Safari
③ Microsoft Edge
④ Opera
返回的版本号是主版本号，例如 141
//有时候需要知道浏览器类别和版本号，以便调整代码适配浏览器 var b = tz.browser(); console.log(b.name, b.version);// 打印信息
⊙ 语法 : tz.color16() ⊙ 说明 : 看例子就能明白——const txtcolor = tz.color16();// 获取随机颜色 tz.add('div', '', '', {style: `color: ${txtcolor }; font-size: 60px;`}).text('Hello tzMaker');
⊙ 语法 : tz.colorRGB(r,g,b,a)
⊙ 说明 : 参数全部可省，若此，返回纯粹的RGB随机色、不透明。如果配置参数则可以设定一定范围内的随机颜色，比如保持红色固定、绿蓝随机 。
① r : 红色成分，0~255 数值，单值表示固定，数组（例如 [60,180]）表示范围；
② g : 绿色成分，同上；
③ b : 蓝色成分，同前；
④ a : Alpha 值，0~1 之间浮点数，单值、数组值含义同 r，参数缺省时是 1var c1 = tz.colorRGB();// 随机RGB颜色（a=1，不透明） var c2 = tz.colorRGB(0, [30, 90], 0, 1);// 红、蓝、不透明度不变，绿色成分在30~90之间随机 var c3 = tz.colorRGB(0, 255, 0, [0.25, 0.85]);//绿色，透明度随机在0.25~0.85之间随机
⊙ 语法 : tz.colorHSL(h,s,l,a)
⊙ 说明 : 参数全部可省，若此，返回纯粹的HSL随机色、不透明。配置参数可以灵活设定制随机颜色，例如保持颜色不变、饱和度、亮度随机 。
① h : hue 数值，0~360 之间，单值表示固定，数组（例如 [30,90]）表示范围；
② s : saturation 数值，0~100 之间，100 表示正常饱和度，缺省或配置单数值表示饱和度固定，配置数组数值表示随机取值范围；
③ l : lightness 数值，值范围及配置方式同 s，50 为正常亮度；
④ a : Alpha 值，配置参考 colorRGB() 指令var h1 = tz.colorHSL();// 随机HSL颜色（正常饱和度、亮度、不透明） var h2 = tz.colorHSL(200, [30, 100], 50, 1);// 颜色固定，饱和度随机，亮度正常，不透明 var h3 = tz.colorHSL('', 100, 50, [0.5, 1]);//颜色随机，饱和度、亮度正常，透明度随机在0.5~1之间随机
⊙ 语法 : tz.getRanInt(min, max)
⊙ 说明 : 两个参数为数值，建议为正负整数，一大一小，大小顺序不论
const number = tz.getRanInt(-100, 100);// number 将为 -100~100 之间的整数（含-100和100）
⊙ 语法 : .playmp3()
⊙ 说明 : 该指令用于音频播放暂停控制，链式使用在 add() 指令之后，令所创建的元素成为播放器按钮；如果希望指定已有的元素作为播放器，应单独使用 tz.playmp3(id)，id 参数必须提供，可以是元素节点标识或元素id，例如事实存在一个 id="playBtn" 的元素，或者声明了一个变量名为 playBtn 的元素节点且该节点存在，则可以写成 tz.playmp3(playBtn) 或 tz.playmp3('playBtn')。
⊙ 示例 :// 将刚添加的div设为播放器 tz.add ('div', 'player', '', {title: 'Alt+X'}).playmp3(); // 支持后续元素做音频控制器 tz.add ('img', '', '', {src: '图片地址', alt: '', title: 'Alt+X'}).playmp3(); // 支持将已有的元素作为播放器 constmyplayer = document.getElementById('myBtn '); if (myplayer ) tz.playmp3(myplayer );
⊙ 语法 : ranPos(distance, offset);
⊙ 参数 distance 指距离，横向或纵向（例如父元素的宽高值），正整数；offset 是偏移距离（例如子元素自身的占位宽高），正整数。看下例理解——var x = tz.ranPos(1200, 140);上述代码，x、y 值的获取都加入 140 的偏移量，它是图片的宽高尺寸，这是为了保证图片完整显示在父元素内。ranPos() 指令的应用还可以参阅 to() 指令的例子。// 在 1200 个单位距离中取随机位置值，偏移距离 140 个单位 var y = tz.ranPos(640, 140);// 在 640 个单位距离中取随机位置值，偏移距离 140 个单位 // 添加 class="mypic" 的 img 图像标签，设置随机位置 tz.add('img', '', 'mypic', {alt: '', style: `left: ${x}px; top: ${y}px;`});
⊙ 语法 : ringPos(num, {option});
⊙ 说明 : num 参数为要生成的顶点数量，大于0的整数值；option 参数是一组配置，如下：
{ cx: 200, // 圆心X坐标 cy: 200, // 圆心Y坐标 r1: 160, // 水平半径 r2: 100, // 垂直半径 a: 360, // 圆的角度（需要半圆就是 180） startA: 0, // 开始角度即第一个顶点的偏移角度 offsetX: 40, // X方向偏移距离 offsetY: 30 // Y方向偏移量 }上面这些配置顺序不论、也无须全部配置（所有花括号 {} 里的配置同此理），一般建议根据创作需要进行选择性配置参数，配置时必须注意：键名是固定的，键值全是数值型。如果缺省全部配置，tzMaker将基于帖子容器进行配置，外切圆圆心在容器中央、两个半径分别是宽高的一半、偏移距离XY均为100、偏移角度0、角度360。tz.add('div', 'mama');【附】 tzMaker 生成圆环粒子指令 lzRing() 实际上也在内部调用此指令。// 添加 id="mama" 的元素 // 获取15个椭圆圆周上的顶点数据 const points = tz.ringPos(15, {cx: 150, cy: 100, r1: 150, r2: 100, offsetX: 10, offsetY: 10 });// 生成15个 class="lizi" 的子元素并添加到父元素 mama 中 points.forEach(p => { tz.add('div', '', 'lizi', {style: `left: ${p[0]}px; top: ${p[1]}px`}).to(mama); });
⊙ 语法 : tz.style('text', '可选id');
⊙ 说明 : style() 指令提供更加灵活的添加元素内联样式的实现方式。使用 add() 指令创建子元素时可以链式调用 style() 指令，也可以单独使用此指令通过可选id参数给任意 id="id" 的元素添加文本。当然也可以避免使用 style() 指令，在 add() 指令的第四个参数用 style 做键名并给它赋上对应值。
⊙ 参数 :
参数1 text 必须，希望添加的内联CSS样式表集合；
参数2 id 可选，缺省此参数时作用对象是 add() 指令刚刚创建的子元素，若尚未创建则指向帖子容器；若指定 id 应将 style() 指令作为非寄生指令使用，所指定的id指向的对象必须真实存在
【附】链式调用 style() 指令效果等同于在 add() 指令的第四个参数 {...} 加入 style: 'style值' 的做法
链式调用举例 tz.add('span').text('Hello tzMaker').style('background: #eee; color: red; padding: 8px;') ;//上例等同于 add() 指令第四个参数加入style键名和键值—— tz.add('span', '', '', {style: 'background: #eee; color: red; padding: 8px;'}).text('Hello tzMaker');// 给指定id元素添加内联样式 : 独立使用，参数2的id指向的元素必须真实存在 tz.style ('border: 2px solid red; border-radius: 2%;', 'mydiv');
⊙ 语法 : .text('文本内容', '目标对象')
⊙ 说明 : 对于 tzMaker 刚刚创建的元素，如果展示文本，可以使用此指令，参数按顺序排列：
① 文本内容，必选，要显示的文本，支持HTML代码组织文本。例：'<p class="txtRed">Hello tzMaker</p>'
② 目标对象，可选，缺省时为 tzMaker 刚刚创建的子元素，或若尚未创建子元素时为帖子元素；如果需要设置则使用元素的 id 或元素名称，例如假设有一个 id="mybox" 的元素，则目标对象的参数可以用两种方法传参，其一，mybox，其二，'mybox'，支持对帖子容器之外的元素进行操作。
// 例一 : 链式给元素添加文本 tz.add('div', '', 'title-text').text('帖子标题') ;// 例二 : 给指定 id 元素添加文本 tz.text('帖子标题', 'mybox');// 页面中存在 id="mybox" 的元素
⊙ 语法 : to(target)
⊙ 说明 : target 参数指目标父元素，例如下面的例子创建多个 class="lizi" 的 div，并将它们一一加入到先前创建的 id="mama" 的父元素中——tz.add('div', 'mama', 'wrap');// 创建 id="mama" 的容器元素 // 创建10个 clas="lizi" 的 div 并加入到 mama 父元素中 Array.from({length: 10}).forEach( () => { tz.add('div', '', 'lizi', {style: `left: ${tz.ranPos(300, 30)}px; top: ${tz.ranPos(300, 20)}px`}) .to(mama) ; });
⊙ 语法 : tz.lrc2HC(str, skip)
⊙ 说明 : 参数一 str 是原生歌词变量，必选；参数二 skip 是歌词演唱起始时间统一偏移量，可选。
// 原生lrc歌词可以分行写，\n转为断行 constlrcStr = `[00:00.200]牵丝线·银临&阿杰\n[00:23.650]嘲笑谁恃美扬威\n[00:29.650]没了心如何相配\n[00:34.500]`; consthcLrcAr = tz.lrc2HC(lrcStr );// 转为花朝格式歌词数组 tz.lrc(hcLrcAr );// 歌词数组变量入参