文字搬运工

作者: 唐英钏 | 来源:发表于2018-03-03 21:53 被阅读0次

文字，文章
文字搬运工
文字搬运工
文字搬运工
文字搬运工
文字搬运工
文字搬运工
今日晴，不算冷
媒体
文字搬运工———理想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: grey;
        }
        #total{
            width: 800px;
            background: white;
            margin: 50px auto;
            padding: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
        #left{
            width: 300px;
            height: 200px;
            background: #FFADAD;
            float: left;
        }
        #right{
            width: 300px;
            height: 200px;
            background: dodgerblue;
            float: right;
        }
        #center {
            float: left;
            width: 190px;
            text-align: center;
        }
        #center #btn{
            font-size: 16px;
            background: orangered;
        }
    </style>
    <script>
        window.onload = function () {
            var left = document.getElementById('left');
            var btn = document.getElementById('btn');
            var right = document.getElementById('right');
            var numRight = document.getElementById('numRight');
            var numLeft = document.getElementById('numLeft');
            btn.onclick = function () {
                if(left.value == '')
                {
                    alert("请在左侧输入一些文字后再点击按钮")
                }
                else
                    {
                    var index = 0;
                    var infor = left.value;
                    var array = infor.split('');
                    numRight.innerHTML = array.length;
                    var timeId = setInterval(function () {
                        numLeft.innerHTML = index + 1;
                        left.value = infor.substr(index + 1);
                        right.innerHTML += array[index];
                        index++;
                        if (index == array.length) {
                            clearInterval(timeId);
                            left.innerHTML = '';
                        }
                    }, 100)
                    }
            }
        }
    </script>
</head>
<body>
<div id="total">
    <textarea id="left"></textarea>
    <div id="center">
        <input id="btn" type="button" value="把文字右移">
        <p id="num"><span id="numLeft">0</span>/<span id="numRight">0</span></p>
    </div>
    <div id="right"></div>
</div>
</body>
</html>