文字搬运工【总结】

最新推荐文章于 2024-10-15 17:46:56 发布

转载最新推荐文章于 2024-10-15 17:46:56 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mflnhg/p/9472119.html

本文介绍了一种使用HTML、CSS和JavaScript实现文字从左向右滚动的效果，并结合进度条展示移动过程的方法。通过定时器控制文字逐个移动，同时更新进度条显示，实现了动态效果与用户体验的提升。

需求

需求分析

1.文字挨个从左往右移：左边删掉第一个，右边添加刚刚删掉的
2.移动过程中，按钮不能重复点击
3.有进度条，进度条延迟消失
4.有统计数字

难点

无

难点解决方案

无

解决不了的难点

无

涉及的新知识

str.substring()字符串截取方法

优化方向

少用全局变量，开头空格也能移动

备注

将来可以用jQ写的更简洁一点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

<style>

*{ margin: 0; padding: 0; }

.wrap{ position: absolute; top: 10%; left: 15%; }

.wrap > *{
    float: left;
}
    
input[type = 'button']{ 
    border: none;width: 80px;
    height: 30px;
    background: #9C27B0;
    color: #fff;
    cursor: pointer;
    outline: none;
    margin-left: 35px;
}

input[type = 'button']:hover{
    background: #831f94;
}

input[type = 'button']:active{
    background: #673ab7;
}

#act{
    width: 150px;
}

li{ list-style-type: none; }

</style>

</head>
<body>



<div class="wrap">
    <textarea style="resize: none; width: 400px; height: 200px; font-size: 18px;"></textarea>
    <div id="act">
        <input type="button" value="文字移动">
    </div>
    <p style="overflow-y: scroll; word-wrap: break-word; width: 400px; height: 200px; font-size: 18px; border: 1px solid #999;"></p>
</div>












<script src="getId.js"></script>
<script src="doMove.js"></script>
<script src="main.js"></script>
</body>
</html>

// moveStr(oTextarea); 为文字移动的函数,要传入输入区
// moveStrip(); 为进度条跑动函数
// hideStrip(); 为渐隐进度条的函数,透明度为0后翻转开关,moveStrip();的下一次定时器会检测到开关已关闭而停止进度条走动
// rateStrip(); 为生成进度条的函数


//找输入区和输出区
var oTextarea = document.getElementsByTagName('textarea')[0];
var p = document.getElementsByTagName('p')[0];

//按钮
var btnWrap = $('act');
var oBtn = btnWrap.getElementsByTagName('input')[0];
var  rStrip = rateStrip();

//开关，用于禁止连续点击
oBtn.onOff = true;


oBtn.onclick = function(){
    if(oBtn.onOff){
        //点击设置开关为关闭，显示进度条，清空输出区，再调用文字移动函数和进度条跑动函数
        oBtn.onOff = !oBtn.onOff;
        rStrip.style.opacity = 1;
        p.innerHTML = '';
        moveStr(oTextarea);
        moveStrip();
    }
}





function moveStr(oTextarea){

    /*原理：substring从下标1截取后面的字符存在newStr中，
            substring从0开始取1个字符存在cutStr中，
            输入区用newStr更新，输出区添加上cutStr
    */
    //当截取第一个字符为空证明所有文字都移过去了，此时清除定时器，调用透明度渐隐函数
    var oriStr = null,
        newStr = null,
        cutStr = null,
        cnt = 0,
        strLen = oTextarea.value.length,
        oSpan = btnWrap.getElementsByTagName('span')[0];


    clearTimeout(oTextarea.timer);
    oTextarea.timer = setTimeout(function timerFn(){

        oriStr = oTextarea.value;
        newStr = oriStr.substring(1);
        cutStr = oriStr.substring(0,1);
        oTextarea.value = newStr;
        p.innerHTML += cutStr;
        oSpan.innerHTML = cnt +'/'+ strLen;
        cnt++;


        if( oriStr != '' ){
            oTextarea.timerInner = setTimeout(timerFn,50);
        }else{
            clearTimeout(oTextarea.timer);
            clearTimeout(oTextarea.timerInner);
            hideStrip();
        }
    },50);


}






function moveStrip(){
    /*    timer为外部定时器只执行一次，
         timerInner为主要重复执行的定时器，
         oLi是进度条每个格子，
         oldCube初始化为第一个并成深色
        i为下标

    */
    var timer = null,
        timerInner = null;
        oLi = rStrip.getElementsByTagName('li')
        oldCube = oLi[0];
        i = 0;

    oldCube.style.background = '#3f51b5';

    timer = setTimeout(function timerFn(){

        //恢复老的小方块，设置新的小方块颜色，更新oldCube，i++，i %= oLi.length重复循环，每个30ms调用一次自己
        oldCube.style.background = '#03a9f4';
        oLi[i].style.background = '#3f51b5';
        oldCube = oLi[i];

        i++;
        i %= oLi.length;
        timerInner = setTimeout(timerFn,30);
        if(oBtn.onOff){
            clearTimeout(timer);
            clearTimeout(timerInner);
        }
    },30);



}





function hideStrip(){

    //每次减0.05的透明值
    var timer = null;
    var timerInner = null;
    var step = -0.05;

    timer = setTimeout(function timeFn(){

        
        var opc = parseFloat(getStyle(rStrip,'opacity'));
        opc += step;
        console.log(opc);
        (opc <= 0) && (opc = 0);
        rStrip.style.opacity = opc;

        if(opc != 0){
            timerInner = setTimeout(timeFn,30);
        }else{
            clearTimeout(timerInner);
            //完全透明后翻转开关
            oBtn.onOff = !oBtn.onOff;
        }

    },30);

}









function rateStrip(){

    var eSpan = document.createElement('span');
    eSpan.innerHTML = '0/0';
    eSpan.style.display = 'block';
    eSpan.style.width = '100%';
    eSpan.style.textAlign = 'center';
    eSpan.style.marginTop = '14px';


    var eUl = document.createElement('ul');
    eUl.style.margin = 16 + 'px';
    eUl.style.opacity = 0;

    var eLi = null;
    for(var i=0; i<6; i++){
        eLi = document.createElement('li');
        eLi.style.width = 14 + 'px';
        eLi.style.height = 14 + 'px';
        eLi.style.background = '#03a9f4';
        eLi.style.float = 'left';
        eLi.style.marginLeft = 5 + 'px';
        eUl.append(eLi);
    }
    btnWrap.append(eSpan);
    btnWrap.append(eUl);

    return eUl;


}