JS special effects text display one by one

Recently, I saw a JS special effect on the Internet, allowing the text to be displayed one by one on the webpage, just like manually inputting the text one by one.CodeCopy the file and run it locally. It is found that these JS files are only valid in IE and are ineffective in other browsers. Therefore, I have made some improvements on this basis to make this effect available in all browsers.

The following is the source code of JS special effects on the Internet:

 
<Script language = "javascript1.2"> var it = 0 Function initialize () {mytext = typing. innertextvar myheight = typing. offsetheighttyping. innertext = ''document. all. typing. style. height = myheightdocument. all. typing. style. visibility = "visible" typeit ()} function typeit () {typing. insertadjacenttext ("beforeend", mytext. charat (IT) if (it <mytext. length-1) {It ++ setTimeout ("typeit ()", 100)} elsereturn} If (document. all) document. body. onload = initialize </SCRIPT> This Code does not span browsers because I use the method supported by IE: insertadjacenttext. I have found related explanations in w3help. If you are interested, I can go and see:
 

W3help.org/zh-cn/causes/sd9016

The method provided in this document is to implement this method in other browsers by extending the prototype of htmlelement.
 

 
As I am used to using jqeury, jqeury solves browser compatibility issues and focuses development on the implementation of relevant JS logic. The following is the improved code after jquery is used:
 

The key method is append, which inserts the relevant text into the end of the matching element, which is similar to insertadjacenttext.
 

 
Related HTML code:
 

<P id = "typing" style = "display: none"> the insertadjacenthtml method inserts HTML code more flexibly than the innerhtml and outerhtml attributes. It can insert the specified HTML code in four positions before, after, before, and after a DOM element. It is not a W3C standard DOM method. This method was initially implemented by ie4.0 or later and is private. For details, see the msdn Description: insertadjacenthtml method. W3C has recently extended this method in the HTML5 draft. For more details, see W3C HTML5 draft: 3.5.7 insertadjacenthtml (). </P>
 

During the test, I found that if this method has other HTML tags in P, the js method will treat the tag as a character.

Recently I have improved the js method to support HTML tagging.

Function typeit (_ This) {var $ ele = $ (_ this), STR = elele.html (), Progress = 0;$ele.html (''); var timer = setinterval (function () {var current = Str. substr (Progress, 1); If (current = '<') {progress = Str. indexof ('>', Progress) + 1;} else {progress ++;} // below is the simulated cursor
 

 
Cancele.html (Str. substring (0, Progress) + (Progress & 1? '_': ''); If (Progress >=str. Length) {clearinterval (timer) ;}, 75 );
 

Hope you will enjoy yourself