How to make a simple typewriter with pure javascript?
Question
I know I could do it with jQuery, but I want to use only javascript.
I am currently using this code ( demo )
<body onload="typeEffect();">
<span id="typeArea"></span>
<script>
var textSpan = document.getElementById("typeArea");
var letterPrint = 0;
function effectOne()
{
textSpan.innerHTML = "H";
}
function effectTwo()
{
textSpan.innerHTML = "He";
}
function effectThree()
{
textSpan.innerHTML = "Hel";
}
function effectFour()
{
textSpan.innerHTML = "Hell";
}
function effectFive()
{
textSpan.innerHTML = "Hello";
}
</script>
</body>
But the result doesn't be like I wanted, it doesn't type each letter but it type a word simultaneously.
I have also tried this javascript code
var letterPrint = 0;
function playEffect()
{
if (letterPrint == 0)
{
textSpan.innerHTML = "H";
var letterPrint = 1;
}
else if (letterPrint == 1)
{
textSpan.innerHTML = "He";
var letterPrint = 2;
}
else if (letterPrint == 2)
{
textSpan.innerHTML = "Hel";
var letterPrint = 3;
}
else if (letterPrint == 3)
{
textSpan.innerHTML = "Hell";
var letterPrint = 4;
}
else if (letterPrint == 4)
{
textSpan.innerHTML = "Hello";
var letterPrint = 5;
}
else
{
textSpan.innerHTML = "Hello";
}
}
setInterval("playEffect()","1000");
But it gives me the same result.
How can I make typewriter effect with javascript? Or it is impossible?
4 answers
solution1
2 2015-03-01 11:21:15
Here's something to get you started. I've used recursion to save you having to manually type your big if/else and it shows you how to do the timeouts, too.
var message = "Hello World"
function printChar(i) {
var output = document.getElementById("output")
var char = message.charAt(i);
output.innerHTML = output.innerHTML + char;
if (i < message.length) {
window.setTimeout(function() {
i = i + 1;
printChar(i);
}, 1000)
}
}
printChar(0);
Demo here:
Short version, out of interest (see comments):
var m = "Hello World"
function p(i) {
document.getElementById("output").innerHTML += m.charAt(i);
if (i<m.length) {window.setTimeout(function() {p(++i);}, 100)}
}
p(0);
solution2
2 ACCPTED 2015-03-01 11:21:55
Here you go (considering you have, for example, span or div with id "tr"):
var word = "Hello, world!";
var i = 0;
var timer = setInterval(function(){
document.getElementById("tr").innerHTML+=word[i];i++;if(i>word.length-1){clearInterval(timer)}
},100)
solution3
1 2015-03-01 11:33:03
You can also split the message into each characters and then use setTimeout with an increasing timeout in a Array.forEach callback.
function type(message, id) {
var output = document.getElementById(id), i = 0;
message.split("").forEach(function(letter){
setTimeout(function(){
output.innerHTML += letter;
}, i++ * 1000);
});
}
type("Hello Word", "output");
solution4
0 2015-03-01 11:14:59
Pay attention to var , which creates a local variable (hiding a variable with the same name in the outer scope).
Consider using substring instead of copy&pasting the same code. Now you have the same error in 5 places to fix.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.