2018-02-16文字搬運工

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var words = document.getElementById('words');
            var button = document.getElementById('button');
            var right = document.getElementById('right');
            var numRight = document.getElementById('two');
            var numleft = document.getElementById('one');

            button.onclick = function () {
                var strWords = words.value;
                var arr = strWords.split("");
                var index = 0 ;
                var copy = "";
                numRight.innerHTML = arr.length;
                if(arr.length == 0)
                {
                    alert("請在左側輸入一些文字后再點擊按鈕");
                }
                else
                {
                    var timeid = setInterval(function () {
                        words.value = strWords.substr(index+1);
                        copy+= arr[index]
                        right.innerHTML = copy;
                        numleft.innerHTML = index+1;
                        index++;
                        if(index==arr.length)
                        {
                            clearInterval(timeid);
                        }
                    },100)

                }

            }

        }
    </script>
    <style>
    body{
        background-color: #b6b6b6;
    }
    .all{
        width: 846px;
        height: 281px;
        margin: 0 auto;
        border: 1px solid white;
        background-color: white;
        margin-top: 51px;

    }
    .left textarea{
        border:none;
        background-color: #EFEFD6;
        width: 340px;
        height: 240px;
        float: left;
        margin-left: 21px;
        margin-top: 20px;
        font-size: 18px;
    }
        #right{
        border: 1px solid #63EFF7;
        background-color: #63EFF7;
        width: 340px;
        height: 240px;
        float: right;
        margin-right: 21px;
        margin-top: 20px;
        font-size: 16px;
    }
    .center{
        float: left;
        margin-top: 20px;
        text-align: center;
    }
    .center .word{
        width: 111px;
        background-color: #F76300;

        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: 4px;
    }
    .center a{
        font-size: 16px;
        color: white;
    }
    .center .num{
        font-size: 18px;
        font-family: 微軟雅黑;
        margin-top: 26px ;
    }
    </style>
</head>
<body>
<div class="all">
    <div class="left">
        <textarea id="words"></textarea>
    </div>
    <div class="center">
        <div class="word" id="button"><a href="#">把文字右移</a></div>
        <div class="num"><span id="one">0</span>/<span id="two">0</span></div>
    </div>
    <div id="right">

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

推薦閱讀更多精彩內容