文字搬运工

最新推荐文章于 2024-05-20 20:00:00 发布

Jyann~

最新推荐文章于 2024-05-20 20:00:00 发布

阅读量464

点赞数

分类专栏：前端 JS高级文章标签：定时器文字搬运工进度条

本文链接：https://blog.csdn.net/qq_34569497/article/details/96903701

版权

前端同时被 2 个专栏收录

173 篇文章 15 订阅

订阅专栏

JS高级

84 篇文章 3 订阅

订阅专栏

需求：把左边的文字，一个接一个转移到右边

技术：定时器，定时器管理，substring()截取字符串，进度条（取模实现）

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>文字搬运工</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="bg">
        <div id="box">
            <textarea>妙味课堂是一支充满温馨并且极富人情味的IT培训团队；2010-2011年，妙味深度关注WEB前端开发领域，为此精心研发出一套灵活而充满趣味的JavaScript课程。2011-2013年，妙味精准研发出最新HTML5\CSS3课程，并推出远程培训课程方案，尝试将线下优良的培训模式移植到远程网络培训中，希望尽最大努力，将一种快乐愉悦的授课体验、结合HTML\CSS\JS知识点，精准传递给妙味课堂的每一位学员。</textarea>
            <div>
                <a class="carry" href="javascript:;"></a>
                <span class="pager">0/0</span>
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

            <p class="put"></p>
        </div>
    </div>
<script type="text/javascript">
(function(){
    /*
        需求：
        1：文字右移；2：页码更改；3：进度条
    */
    var box = document.querySelector("#box");
    var text = box.querySelector("textarea");
    var carryA = box.querySelector(".carry");
    var put = box.querySelector(".put");
    var pager = box.querySelector(".pager");
    var ul = box.querySelector("ul");
    var lis = box.querySelectorAll("ul li");

    var timer = 0;
    carryA.onclick = function(){
        //判断定时器存在时不能再次开启定时器
        if(timer){
            return;
        }
        //判断当定时器已开启时不能重复开启定时器
        var index = 0;
        //不能再定时器里获取，得到的是被移动过的数据
        var txt = text.value;
        if(txt === ""){
            pager.innerHTML = index + "/" + txt.length;
            return;
        }
        //刚点击时进度条，opacity为1，在定时器执行时，不断变化
        ul.style.opacity = "1";
        pager.innerHTML = index + "/" + txt.length;
        timer = setInterval(function(){
            index++;
            //定时器执行时不断更改进度条样式active在li中的位置
            for (var i = 0; i < lis.length; i++) {
                lis[i].classList.remove("active");
            }
            //不断更改active的位置,li总共有7个，所以%7后，active就会在所有的li中进行循环
            lis[index%lis.length].classList.add("active");

            //想要输入内容累加 需要从index-1到index
            put.innerHTML += txt.substring(index-1,index);
            // put.innerHTML = txt.substring(0,index);
            text.value = txt.substring(index);
            //页码:总共text.length页，当页即index
            pager.innerHTML = index + "/" + txt.length;
            //index即截取了多少次
            if(index>=txt.length){
                clearInterval(timer);
                ul.style.opacity = 0;
                timer = 0;
            }
        },20);
    };
})();
</script>
</body>

</html>

index.js:

.bg {
    width: 1200px;
    height: 700px;
    background-image: url(./images/bg.png);
    background-repeat: no-repeat;
    margin: 0 auto;
}

#box {
    width: 850px;
    height: 450px;
    background: rgb(64, 33, 150, .5);
    font-size: 12px;
    position: relative;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    padding: 30px;
    border-radius: 20px;
    box-sizing: border-box;
    word-break: break-all;
}

#box:after {
    content: '';
    display: block;
    clear: both;
}

textarea,
p {
    width: 325px;
    height: 388px;
    line-height: 1.5;
    background: #fff;
    resize: none;
    margin: 10px;
    float: left;
    color: #402196;
    padding: 20px;
    box-sizing: border-box;
}

#box div {
    float: left;
    width: 90px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%)
}

a {
    width: 180px;
    height: 80px;
    background-image: url(./images/change_03.png);
    background-repeat: no-repeat;
    border: none;
}

a,
span {
    text-decoration: none;
    display: block;
    line-height: 40px;
    width: 90px;
    color: white;
    margin-top: 10px;
    text-align: center;
}

a:hover {
    background-color: #C65218;
}

span {
    color: #7edefa;
    font-weight: bold;
}

p {
    float: right;
    background-color: #63EFF7;
}

ul {
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: 1s;
}

li {
    width: 9px;
    height: 9px;
    list-style-type: none;
    margin: 0 1px;
    background-color: #FF6600;
    float: left;
}

.active {
    background-color: red;
}

结果：