tzMaker初级教程

马黑黑 · 发表于 2025-10-22 12:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-10-22 12:52 编辑

tzMaker意为做帖，tz是帖子汉语拼音首字母，maker制作者，后面通称为tz。顾名思义，tz是个做帖工具，一旦入门，使用者会爱不释手。本篇是初级教程。

音画帖的代码制作分为三个步骤：

第一步：制定CSS样式

CSS是 Cascading Style Sheets 的缩写，意为层叠样式表，相当于帖子的设计图纸。它需要一个 <style> ... </style> 标签作为载体，所设计的各种样式都放在该标签里面。tz 提供一个配套的CSS资源文档，可以在该标签中导入，然后再根据需要建立若干其它样式，也可以不建立。下面是示例：

先说明一下代码注释：CSS代码的注释用 /* 注释文本 */ 表示，HTML代码则用  这样的结构，JS支持两种注释方式，第一种专门针对单行注释，用 // 单行注释文本表示，第二种注释方式单行、多行注释都可以用，写成 // 单行或多行注释。注释一般用在必要的地方，作用是做标记或提供说明，方便理解与维护。

接着分析一下上述CSS代码：上面的代码只有两句，第一句（行3）导入tz配套CSS文档；第二句（行5）写一个CSS类选择器 .mypic，制定将来通过 class="mypic" 属性设置使用该选择器的HTML标签的定位方式、左边值和上边值、宽高尺寸，还可以制定更多。

第二步：创建HTML代码

如果说CSS是图纸，那么，HTML就是房子，它长啥样由CSS样式定义。HTML代码由一系列HTML标签有机组成，做帖用到的首先是 <div> ... </div> 标签，用它来做帖子的容器，帖子的其它内容都放在这个 div 标签省略号处。标签又称元素，也叫节点，容器标签即容器元素或容器节点一般统一叫做父元素，其下的标签或元素或节点一般统一叫做子元素。看例子加以理解：

分析一下上面的HTML代码：第1和第3行代码是一个 div 标签，是帖子容器元素，相对于它里面包裹的各类元素（若有）而言，它是父元素。该元素使用了一个 class 属性，class="pa"，"pa" 对应于CSS的一个类选择器，.pa { ... }，放在导入的CSS文档 tz.e.css 里面。这里，.pa { ... } 是CSS图纸，它制定帖子容器的样式，而帖子容器的 div 使用 class="pa" 表明帖子容器按这个图纸建造——这就是CSS和HTML的对应关系。第二行代码是一个 <img> 图片标签，包裹在 div 元素里面，它是 div 的儿子（之一），所以是子元素，如果代码中的图片地址指向正确的图片资源，那么，这个图片就显示在帖子（容器）里面；这个 img 标签也有 class 属性，表示它所使用的图纸是 .mypic 选择器，就是前面CSS代码制定的那个 .mypic { ... }。

第三步：使用JS操控帖子

JS全称叫JavaScript，是嵌入式的web页脚本语言，早期负责网页交互工作，现在已经是全能管家：CSS和HTML共同创建出来的网页它都能管。tz就是使用JS开发，利用JS的强大管控能力，为做帖创建了若干指令，使用这些tz指令，我们可以轻松地给帖子添加音频、视频、图片，做音频播放按钮和音频可控进度条等等。上代码：

上面就是JS代码，JS代码放在 <script> ... </script> 标签中，该标签因为要导入模块，所以有 type="module" 属性，这个不能少。上例JS代码中的行3，导入 tz 模块，地址要准确有效；行4创建帖笔对象并授权给变量 tz，这样就可以使用 tz.e.js 模块开放的全部指令做各类事情，比如加音频、视频、图片等等。作为入门，仅需要熟悉少量几个tz指令，下面逐一介绍：

（一）add 指令：add('标签名', 'id名', '类名', { 配置 })

add 意为添加，就是要往帖子容器里添加什么，注意 add() 是基本结构，小括号里面有四个参数，每一个参数都是向指令传递信息，指令接收到合法的信息后就可以完成交给它的任务。第一个参数是'标签名'，是要添加的元素的名称，例如 'div' 或 'img' 或 'video'，想添加什么标签就写对应的标签英文名称，都要求写在小角引号里面；第二个参数是'id名'，元素可以拥有唯一的身份证号，id 就是元素的身份证号，通常由字母加下划线、数字组成，例如帖子容器是 'pa'或别的、图片可以是 'mypic'或你想定义的。如果不需要id，在 add() 指令中用空值表示，写成 '' 即可（但要注意所创建的元素如果后续元素与之有依赖关系，那得有id）；第三个参数是'类名'，如果事先为它设计有CSS选择器（图纸），比如 .mydiv，那就写上 'mydiv'，注意不要CSS选择器开头的那个标记 . 即小角点号；第四个参数是配置参数，写在花括号 { ... } 里面，结构有点特别，还是举例说明容易理解：

// 添加一个图片，附上图片地址和其它必要属性 tz.add('img', '', 'mypic', {

src: '图片地址', alt: '', title: '我的图片'

});

配置内容如果很多，可以分行写（这里顺便把相应说明写在注释里）：

// 添加一个图片，附上图片地址和其它必要属性 tz.add('img', '', 'mypic', { src: '图片地址', // src 是图片标签的地址属性 alt: '', // alt 是图片标签必须属性，图片失效时显示的文字替代 title: '我的图片', // 鼠标移动到图片弹出的提示语，非必须 style: 'border: 1px solid red;' // 给图片添加个内联CSS样式（非必须），这里设置了红色边框 });

花括号 {} 功能很多，在JS中可以用来装载配置数据，数据由一个个的键名: '键值' 组成，称为键值对，键名在前，不用引号（但有短连线符号连接的键名必须有引号），键值需要引号（但纯数值、布尔值不要引号），键名之后用冒号引出键值，每个键值对之间用逗号分隔。这里说的引号、逗号等，都是英文输入状态下的小角符号，不能用汉语输入状态下的全角符号。

不是所有要添加的元素都需要配置，若需要配置也不是什么都得配置，一切根据设计而定。下面的几个示例应该可以帮助理解这一点：

// 添加一个已事先设置好CSS样式的div，#flower {} 选择器 tz.add('div','flower'); // 添加一个已事先设置好CSS样式的span标签，.bold {} 选择器 tz.add('span', '', 'flower'); // 添加一个没有id没有class的div，用配置设置内联CSS style样式 tz.add('div', '', '', { style: 'width: 100px; height: 100px; background: tan;' });

（二）bgprog 指令：tz.bgprog()

bg 是 background（背景）的意思，prog 是 progress（进度）的意思，bgprog 就是背景进度条，作为指令，需要加上小括号，写成 tz.bgprog()。本指令会以默认的方式创建一个音频播放进度显示条，称作进度条。进度条能不能工作，取决于多种前提，其中之一是帖子音频是否已经加入，所以下方的示例，先添加音频，再添加进度条：

// 用 add() 指令给帖子加音频标签 tz.add('audio', '', '', { src: '音频地址' }; // 用 bgprog() 指令给帖子添加进度条 tz.prog();

进度条的位置应该需要调整，但目前学到的指令不够用，我们先用CSS来完成进度条的位置设定：

#prog 或 .prog 选择器都将被认可，前者是 tz.bgprog() 指令创建的进度条 id，后者是其class类名。配套CSS文档创建有 .prog {} 选择器，所以帖子中只需要设置位置相关的属性即可，即四个可选用的属性，即 left、right、top、bottom，合理配合使用可以随心所欲安排进度条的位置。

（三）playmp3 指令：playmp3()

本指令用来指派某个元素充当音频播放暂停的控制器，例如，假设我们想用一张图片来做小播，那得用 add() 指令给帖子添加图片，紧接着链式使用 playmp3() 指令，这样，图片就成为帖子的小播了——

// 添加图片并令图片充当小播 tz.add('img', '', 'ma', { src: '图片地址'}).playmp3();

所添加的图片没有设置 id，类名为 ma，这样所添加的图片就会自动转动，因为配套CSS文档中提供有 .ma {} 选择器，对标播放器而设计。代码中的浅蓝色部分告诉 tz 这个刚加的图片（也可以是其它元素）做小播，就酱简单。

（四）style 指令：style('css代码', '可选元素对象')

本指令用来给刚添加的元素设置内联CSS样式，其实就是元素标签的 style="..." HTML属性，参数1是CSS代码，必须，参数2指明是哪个元素要添加内联CSS样式，可选，与 add() 指令链式使用时指向明确就不要这个参数。下面的例子在前一个例子基础上加个 style() 指令，用来补充设置小播的位置：

tz.add('img', '', 'ma', { src: '图片地址'}).playmp3().style('left: 80px; top: 100px;');

style() 指令能快速补充一些CSS设置，适用于少量CSS设置的环节。前面进度条指令也可以这样使用它来设置位置。

掌握好上面的四个tz指令，做简单音画帖绰绰有余。最后，给一个基于tz的音画帖模板，代码中粉红部分应使用自己的数据取代或者修改相应设置：