Remember when watching TV, the occasional text appeared on the television, accompanied by the typewriter tick-tock of the caption effect, often curious to realize the effect. This weekend, without class, I thought about using JavaScript to realize the effect of typewriters. It took about one hours to make it, and the code was only dozens of lines.
Let's start with the idea: some typical HTML container tags for nested text can be this:
| The code is as follows |
Copy Code |
<span> a line of text nested within a span label </span>
<p> paragraph nested in P-tagged text </>
<div> a section of text embedded in a div tag </div> |
Therefore, we first need to obtain the internal contents of the container. This can be obtained by giving the Jong ID, and then with the $ ("#id") of jquery. The HTML () method gets to and assigns the acquired content to a string variable. Then set a cursor backwards, step 1, verbatim judgment, if the character "<" skipped, the purpose of this is because some nested use of the label exists, for example:
1 <span> nesting using <font color= "Red" > tag </font>
2 should skip the inner label because the inner tag simply provides a form of representation </span>
In this case, you should pass the inner label, because they simply provide a form of expression that is not part of the body. So at this point the cursor should jump to the next corresponding ">" character position. Finally, we use the substring () method to intercept the object as a string variable that previously received the contents of the label, and to intercept the content as a text between the starting position and the position of the current cursor. This will make the text content become longer.
Of course, because the typewriter effect is needed, we can use the character "_" to simulate a cursor. Use the string "_" and "" to simulate the blinking effect of the cursor. This can be achieved by using a cursor with 1 bitwise, because the cursor's backward behavior allows the bitwise-and-result to transform between 0 and 1, so that the cursor flashes, and then attaches the cursor to the end of the currently displayed text content.
And because you want to judge character types verbatim, use the SetInterval () method as a timer, and the benefit of doing so is that we can customize the speed of a typewriter. The typewriter method's parameter named speed is shown in the following figure. When the cursor moves to the end of the internal content, do not forget to call the Clearinterval () elimination timer.
The code for the entire function is as follows:
The usage is very simple, for example as follows:
| code is as follows |
copy code |
<p id=" P1 "> a section of text </p> nested in P-tags; <p Id= "P2" > <span> tag </span></p> nested in P tags; |
in HTM L page first reference jquery library, and then introduce typewriter JS file. Then call the method:
| The code is as follows |
Copy Code |
$ ("P2"). Typewriter (200);
|
Can.
It is worth noting that if the text content includes the characters "<" and ">", it does not appear because the method skips them as HTML tags
