這篇“html5怎么實現(xiàn)打字機(jī)”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“html5怎么實現(xiàn)打字機(jī)”文章吧。

定遠(yuǎn)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

TheaterJS是一款模擬打字機(jī)效果的js打字機(jī)效果插件。

使用方法

可以使用下面的js代碼來調(diào)用TheaterJS制作打字機(jī)效果：

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，你可以建立多個角色，每個角色都有自己的“經(jīng)驗”，它們使用這些“經(jīng)驗”可以互相“交談”。

theater.describe("Vader", .8, "#vader");

上面的代碼描述了一個新的角色，名字叫“Vader”，它的“經(jīng)驗”值為0.8(必須是0-1之間)，它的voice是“#vader”。voice將用于打印的文字，Vader是一個html元素。

voice可以是兩種類型：

一個HTML元素(或一個CSS選擇器)，元素的innerHTML將被用于設(shè)置voice。

用4個參數(shù)調(diào)用的函數(shù)：

newValue：新的speech值。

newChar：新的打印字符。

prevChar：前一個字符。

speech：所有的speech。

注意：當(dāng)TheaterJS調(diào)用了這些函數(shù)，上下文this被設(shè)置為當(dāng)前對象。

創(chuàng)作劇本

TheaterJS實際上是在創(chuàng)建一個劇本。

theater

.write("Vader:I am your father.")

.write(" For real....")

.write(-1)

.write(600)

.write(function () {  });

注意：write方法接收不定數(shù)量的參數(shù)。

theater

.write("Vader:Hello!")

.write("How are you doing?");

等效于

theater.write("Vader:Hello!", "How are you doing?");

設(shè)置 actor 和 speech

theater.write("Vader:I am your father.");

write方法的參數(shù)是以角色的名字為前綴的字符串。它實際上添加了三個場景：

場景名稱

描述

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有一些內(nèi)置的事件。

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");

});

在:之前的值是事件的作用域，其它部分是事件本身。要添加一個事件監(jiān)聽，可以使用逗號隔開它們。

theater

.on("say:start, erase:start", function (event) {

// add blinking caret

})

.on("say:end, erase:end", function () {

// remove blinking caret

});

如果你想監(jiān)聽所有的事件，使用theater.on("*", function (event, realEvent, args...) {});方法。

公共方法

theater

.emit("scope", "event", ["your", "arguments", "go", "here"])

.emit("customEvent", ["you might not need the event part"]);

emit方法接收三個參數(shù)：第一個是作用域，第二個是事件，第三個是參數(shù)。

以上就是關(guān)于“html5怎么實現(xiàn)打字機(jī)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。