Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how to achieve typewriter in html5" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve typewriter in html5" article.

TheaterJS is a js typewriter plug-in that simulates typewriter effects.

Method of use

You can use the following js code to call TheaterJS to create a typewriter effect:

Var theater=new TheaterJS ()

Theater

.customers ("Vader", .8, "# vader")

.customers ("Luke", .6, "# luke")

Theater

.write ("Vader:Luke."

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

})

Multiple roles

With TheaterJS, you can create multiple characters, each with its own "experience", and they can "talk" to each other using these "experiences".

Theater.describe ("Vader", .8, "# vader")

The above code describes a new role called "Vader" with an "experience" value of 0.8 (must be between 0 and 1) and its voice of "# vader". The text that voice will use for printing, and Vader is a html element.

Voice can be of two types:

A HTML element (or a CSS selector) whose innerHTML will be used to set the voice.

A function called with four arguments:

NewValue: the new speed value.

NewChar: a new print character.

PrevChar: the previous character.

Speech: all speech.

Note: when TheaterJS calls these functions, the context this is set to the current object.

Write a play

TheaterJS is actually creating a script.

Theater

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

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

.write (- 1)

.write (600)

.write (function () {})

Note: the write method receives an indefinite number of parameters.

Theater

.write ("Vader:Hello!")

.write ("How are you doing?")

Equivalent to

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

Set up actor and speech

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

The argument to the write method is a string prefixed with the name of the role. It actually adds three scenarios:

Scene name

Description

Actor

Set the current speaking actor to the passed one.

Erase

Erase the current speech value.

Actor

Type the speech.

Scene object

Theater

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

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

.write (- 1)

.write (600)

.write (function () {})

It is equivalent to

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 () {}]})

Event

TheaterJS has some built-in events.

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

})

Before: the value is the scope of the event, and the other part is the event itself. To add an event listener, you can separate them with commas.

Theater

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

/ / add blinking caret

})

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

/ / remove blinking caret

})

If you want to listen for all events, use the theater.on ("*", function (event, realEvent, args...) {}); method.

Public method

Theater

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

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

The emit method takes three parameters: the first is the scope, the second is the event, and the third is the parameter.

The above is about the content of this article on "how to achieve a typewriter in html5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.