JS 实现 “文字搬运工”

CSS部分

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #C0C0C0;
        }
        #box{
            overflow: hidden;
            width: 800px;
            height: 240px;
            background-color: white;
            border-radius: 10px;
            margin: 100px auto;
            padding: 20px;
        }
        #left{
            float: left;
            width: 318px;
            height: 218px;
            padding: 10px;
            background-color: #efefd6;
            resize: none;
            border: transparent;
            font-size: 16px;
        }
        #right{
            float: left;
            width: 320px;
            height: 220px;
            padding: 10px;
            background-color: #63EFF7;
        }
        #center {
            float: left;
            width: 120px;
            height: 150px;
            text-align: center;
        }
        #btn{
            width: 110px;
            height: 50px;
            font-size: 16px;
            color: white;
            background-color: #F76300;
            border: transparent;
            cursor: pointer;
            margin-bottom: 20px;
        }
    </style>

html部分

<div id="box">
    <textarea id="left"></textarea>
    <div id="center">
        <button id="btn">移 动</button>
        <div id="textCount">0 / 0</div>
    </div>
    <div id="right"></div>

JS部分

<script>

        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var textCount = document.getElementById("textCount");
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            //判断是否是空内容
            if(left.value == ""){
                alert("请输入一些内容！！！");
                return
            }
            var str = left.value;
            var arr = str.split("");
            var num = 0;
            var strNew = "";
            //计时器
            var timer = setInterval(function () {
                var subStr = left.value;     //存输入的值
                left.value = subStr.substring(1);   //每次删除第一个字符
                //console.log(left.value)
                //如果num等于输入内容的长度意味着存完，则停止计时器 /否则每轮将第一个字符放入新的字符串中
                if(num==str.length){
                    clearInterval(timer);
                }else {
                    strNew += arr[num];
                    num++;
                }
                right.innerHTML = strNew; //每轮写进一个字符
                textCount.innerHTML = num + " / " + str.length;
            },100)
        }
    </script>