Example of JavaScript typing

There is a jQuery plug-in Typed. js on the Internet that can simulate character-by-character input. This post uses Js + css to achieve this effect.

Sentence to be output:

<P id = "my_string" hidden> HelloJavaScript. </p>
The property of the above element is Den.

JavaScript:

<Script>
Letcursor = "<span >|</span> ";
Letmy_str = my_string.innerHTML;
   
Function typeIt (){
Letcounter = 0;
My_string.innerHTML = cursor;
My_string.removeAttribute ("hidden ");
Let I = setInterval (function (){
My_string.innerHTML = my_str.substr (0, counter) + cursor;
Counter ++;
If (counter === my_str.length + 1 ){
ClearInterval (I );
                            }
},200 );
    }
 
TypeIt ();
</Script>
Css:

<Style>
@ Keyframes blink {
From, {
Color: transparent;
        }
50% {
Color: black;
        }
    }
 
# My_string span {
Animation: blink 1 s step-end infinite;
}
</Style>
Share the post "using JavaScript for typing"