文字搬運工

<!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>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容