JS文字打字机效果

最近开始学习了JavaScript，做了一个练习，要求实现的效果是：创建两个文本框和一个按钮，在第一个文本框里打完字，点击按钮，第一个框里的文字会倒序出现在第二个文本框里，而且是一个一个地出现，就像打字机的效果一样。

效果图：



效果图比较简陋，因为我没有添加CSS样式。

以下是我的代码：





代码虽然不多，只有短短十几行，但是对于我这种小白来说，这次练习让我学到了很多书上没有的东西。

1.我想让文本框2里的内容把文本框1里的内容以倒序的形式显示出来。文本框1的内容可以用area1.value来表示。

首先用了split（）方法把area1.value这个字符串转换成数组，split（“”）表示每个字符之间都会被分割；reverse() 方法用于颠倒数组中元素的顺序；最后再用join（）方法将数组转换成字符串。

2.要实现打字机效果，我用了setInterval函数，函数里用了substring()方法。以下是W3Cschool的解释



先在外部声明var i=0；

substring（0，i++）意味着从str[0]开始作为起点，我时间参数设定的是200毫秒，i++意味着每过200毫秒i就加1，这样就可以实现打字机效果了。

以上就是我对于这次练习的总结和心得，如果其中什么说的不正确的地方还请各位指正。如果哪位大神有更好的方法也欢迎交流，谢谢！

我把原码也贴出来：

function input(){

var area1=document.getElementById(“area1”);

var area2=document.getElementById(“area2”);

var btn=document.getElementById(“btn”);

btn.onclick=function(){

var i=0;

setInterval(function(){

var str=area1.value.split(”).reverse().join(”);

area2.value=str.substring(0,i++);

},200);

}

}

input();