1<!DOCTYPE html>
2<html>
3<body>
4
5<h1>Typewriter</h1>
6
7<button onclick="typeWriter()">Click me</button>
8
9<p id="demo"></p>
10
11<script>
12var i = 0;
13var txt = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.";
14var speed = 30;
15
16function typeWriter() {
17 if (i < txt.length) {
18 document.getElementById("demo").innerHTML += txt.charAt(i);
19 i++;
20 setTimeout(typeWriter, speed);
21 }
22}
23</script>
24
25</body>
26</html>
27
1 // *** JS Typewriter Effect ***
2
3 let i = 0;
4 let target = document.getElementById("target");
5 let text = target.innerHTML;
6 target.innerHTML = ' ';
7 let speed = 75; //speed duration of effect in millisec
8
9 typeWriter(); //to call function
10 function typeWriter() {
11 if (i < text.length) {
12 target.innerHTML += text.charAt(i);
13 i++;
14 setTimeout(typeWriter, speed);
15 }
16 }
1/*
2 Creating a Typing Effect
3-----------------------------
41) Add HTML: */
5<p id="demo"></p>
6<button onclick="typeWriter()">Click me</button>
7/*
82) Add JavaScript: */
9var i = 0;
10var txt = 'Lorem ipsum typing effect!'; /* The text */
11var speed = 50; /* The speed/duration of the effect in milliseconds */
12
13function typeWriter() {
14 if (i < txt.length) {
15 document.getElementById("demo").innerHTML += txt.charAt(i);
16 i++;
17 setTimeout(typeWriter, speed);
18 }
19}
20