html5怎么實現打字機

這篇“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怎么實現打字機”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。