专栏名:JavaScript的文字搬运工的功能
所有者:楼兰雅韵

JavaScript的文字搬运工的功能 <!DOCTYPE html> <html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 1200px;
            height: 700px;
            margin: 0 auto;
            overflow: hidden;
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201701/11/004435fkxwv3xt5pp8xf1x.jpg) no-repeat;
        }
        .wrap {
            width: 852px;
            height: 402px;
            background: #7164c6;
            margin: 158px auto;
            border-radius: 5px;
            padding: 27px;
            position: relative;
        }
        .left, .right {
            width: 300px;
            height: 350px;
            background: #ebf8f9;
            border-radius: 5px;
            float: left;
            color: #7164c6;
            font: 16px/24px "微软雅黑";
            text-indent: 2em;
            padding: 20px;
        }
        .right{
            word-break: break-word;
            overflow: auto;
            color: palevioletred;
        }
        .wrap div:nth-child(3) {
            float: right;
        }
        .middle {
            overflow: hidden;
            width: 100px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .btn {
            display: block;
            /*width: 100px;*/
            height: 80px;
            background: #6de0fd url(http://cdn.attach.qdfuns.com/notes/pics/201701/11/004434hhr7rr8srn0lmr95.png) no-repeat center 8px;
            border: 1px solid #6de0fd;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
        }
        .btn strong {
            color: white;
            display: block;
            font-size: 14px;
            margin-top: 55px;
            font-family: simhei;
        }
        .btn .num {
            color: white;
            display: block;
            margin-top: 20px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="wrap">
            <textarea class="left">今生我在红尘深处守望你,种一抹心香守候你在弱水三千的繁华里;携一抹温暖等待你在流年清浅的岁月中;捻一抹牵念守望你在似水流年的归期里。为你我倾尽温柔抚一曲高山流水遇知音,为你我舞尽落红奏一曲长相依。 任季节流转,任年华如玉,唯爱你的心永相系。一季静秋,一抹牵念,染一地的枫红菊黄,醉一指沧桑流年。书一笺绕指柔情,伴你浅舞天涯。 沏一杯清茗独品一江春水,拂一曲禅心弹奏青莲佛音,绘一笔丹青描画比翼双飞,染一壑红枫相伴懂你之人。</textarea>
            <div class="middle">
                <span class="btn">
                <strong>把文字右移</strong>
                <span class="num">0/0</span>
                </span>
            </div>
            <div class="right"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    //获取元素
    var leftTxt = document.querySelector(".left");
    var rightTxt = document.querySelector(".right");
    var btn = document.querySelector(".btn");
    var num = document.querySelector(".num");

    btn.onclick = function() {
        move();
    }
    //封装
    function move() {
        var n = 0;
        var fenge = leftTxt.value.split('');
        var timer = setInterval(function() {
            if(n >= fenge.length-1) {
                clearInterval(timer);
                n >=fenge.length-1
                alert('搬运完工')
            }
            rightTxt.innerHTML += fenge[n];
            leftTxt.value = leftTxt.value.substring(1);
            num.innerHTML = '<span>'+leftTxt.value.length+'</span>/<span>'+fenge.length+'</span>';
            n++;
        }, 25)
    }
</script>

</html> 有大量web前端开发学习工具及学习资料,可以搜群【 web前端学习部落22群 】进行下载,遇到学习问题也可以问群内专家以及课程老师哟

成员
暂无文章
我的收藏