JS小功能系列7自动打字

<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>