作业3---文字运输

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tea_reset.css">
    <style>
        body{
            background-color: #C0C0C0;
        }

        .wrap{
            margin: 50px auto 0;
            padding: 20px;
            width: 800px;
            background-color: white;
            border-radius: 10px;
        }

        .wrap textarea{
            float: left;
            padding: 10px;
            width: 320px;
            height: 220px;
            background-color: #EFEFD6;
            font-size: 18px;

        }

        .wrap .middle{
            float: left;
            margin: 0 5px;
        }

        .wrap .middle input{
            width: 110px;
            height: 40px;
            background-color: #F76300;
            font-size: 16px;
            color: white;
        }

        .wrap .middle p{
            width: 110px;
            height: 66px;
            line-height: 66px;
            font-size: 20px;
            text-align: center;
        }

        .wrap .middle span{
            font: inherit;/*通过遗传获取到父级p标签的字体大小*/
        }

        .wrap .right{
            float: right;
            padding: 10px;
            width: 320px;
            height: 220px;
            background-color: #63EFF7;
            font-size: 16px;
        }

        .wrap .temp{
            clear: both;/*防止父div塌陷*/
        }
    </style>

    <script>
        window.onload = function () {
            var oTextarea = document.getElementById('textarea');
            var oButton = document.getElementById('button');
            var oSpans = document.getElementsByTagName('span');
            var oRight = document.getElementById('right');

            oButton.onclick = function () {
                if(oTextarea.value == ''){
                    alert('请在左侧输入一些文字后再点击按钮');
                }else {
                    oRight.innerHTML = '';//右侧的段落清空历史记录
                    oSpans[0].innerHTML = 0;//字数统计重置为0
                    oSpans[1].innerHTML = oTextarea.value.length;//计算新的内容的长度

                    var timerID = setInterval(function () {
                        oRight.innerHTML = oRight.innerHTML.concat(oTextarea.value[0]);//右侧段落先获取到左侧文本的头元素
                        oSpans[0].innerHTML++;//转移的个数记录++

                        if(oTextarea.value.length == 1){//最后只剩1个字符了，且已经被右侧的段落获取到，直接设置为空串，停掉定时器
                            oTextarea.value = '';
                            clearInterval(timerID);
                        }else{
                            oTextarea.value = oTextarea.value.slice(1);//左侧文本域删掉自己的头元素
                        }
                    },50)
                }
            }
        }
    </script>
</head>
<body>
<div class="wrap">
    <textarea id="textarea"></textarea>

    <div class="middle">
        <input id="button" type="button" value="把文字右移">
        <p><span>0</span>/<span>0</span></p>
    </div>

    <p id="right" class="right"></p>

    <p class="temp"></p>
</div>
</body>
</html>
作业3---文字运输

推荐阅读更多精彩内容
