<style> textarea{ 400px; height:100px; } #text{ 400px; height:200px; border:1px solid blue; } </style> </head> <body> <div> <input type="text" value="12" id="content"> </div> <input type="button" value="---->"> <div id="text"> </div> <script> var text=document.querySelector('#text'), input=document.querySelectorAll('input'); input[1].onclick=function(){ var content=document.querySelector("#content"), html=content.value, str="", index=0; var stop=setInterval(function(){ //第一种方法 // if(index<html.length){ // str+=html[index++]; // text.innerHTML=str; // }else{ // clearInterval(stop); // } //第二种方法 if(index<html.length){ str+=html.charAt(index++); text.innerHTML=str; }else{ clearInterval(stop); } },500) } </script> </body> </html>
