这篇“html5怎么实现打字机”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“html5怎么实现打字机”文章吧。
TheaterJS是一款模拟打字机效果的js打字机效果插件。
使用方法
可以使用下面的js代码来调用TheaterJS制作打字机效果：
var theater=new TheaterJS();
theater
.describe("Vader", .8, "#vader")
.describe("Luke", .6, "#luke");
theater
.write("Vader:Luke.", 600)
.write("Luke:What?", 400)
.write("Vader:I am...", 400, " your father.");
theater
.on("say:start, erase:start", function () {
// add blinking caret
})
.on("say:end, erase:end", function () {
// remove blinking caret
})
.on("*", function () {
// do something
});
多重角色
使用TheaterJS，你可以建立多个角色，每个角色都有自己的“经验”，它们使用这些“经验”可以互相“交谈”。
theater.describe("Vader", .8, "#vader");
上面的代码描述了一个新的角色，名字叫“Vader”，它的“经验”值为0.8(必须是0-1之间)，它的voice是“#vader”。voice将用于打印的文字，Vader是一个html元素。
voice可以是两种类型：
一个HTML元素(或一个CSS选择器)，元素的innerHTML将被用于设置voice。
用4个参数调用的函数：
newValue：新的speech值。
newChar：新的打印字符。
prevChar：前一个字符。
speech：所有的speech。
注意：当TheaterJS调用了这些函数，上下文this被设置为当前对象。
创作剧本
TheaterJS实际上是在创建一个剧本。
theater
.write("Vader:I am your father.")
.write(" For real....")
.write(-1)
.write(600)
.write(function () { });
注意：write方法接收不定数量的参数。
theater
.write("Vader:Hello!")
.write("How are you doing?");
等效于
theater.write("Vader:Hello!", "How are you doing?");
设置 actor 和 speech
theater.write("Vader:I am your father.");
write方法的参数是以角色的名字为前缀的字符串。它实际上添加了三个场景：
场景名称
描述
actor
Set the current speaking actor to the passed one.
erase
Erase the current speech value.
actor
Type the speech.
场景对象
theater
.write("Vader:I am your father.")
.write(" For real....")
.write(-1)
.write(600)
.write(function () { });
它等效于
theater
.write({ name: "actor", args: ["Vader"] })
.write({ name: "erase", args: [] })
.write({ name: "say", args: ["I am your father."] })
.write({ name: "say", args: [" For real...."] })
.write({ name: "erase", args: [-1] })
.write({ name: "wait", args: [600] })
.write({ name: "call", args: [function () { }] });
事件
TheaterJS有一些内置的事件。
theater
.on("say:start", function (event, args...) {
console.log("a say scene started");
})
.on("say:end", function (event, args...) {
console.log("a say scene ended");
});
在:之前的值是事件的作用域，其它部分是事件本身。要添加一个事件监听，可以使用逗号隔开它们。
theater
.on("say:start, erase:start", function (event) {
// add blinking caret
})
.on("say:end, erase:end", function () {
// remove blinking caret
});
如果你想监听所有的事件，使用theater.on("*", function (event, realEvent, args...) {});方法。
公共方法
theater
.emit("scope", "event", ["your", "arguments", "go", "here"])
.emit("customEvent", ["you might not need the event part"]);
emit方法接收三个参数：第一个是作用域，第二个是事件，第三个是参数。
以上就是关于“html5怎么实现打字机”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
