js实现文字搬运工
Posted famine
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现文字搬运工相关的知识，希望对你有一定的参考价值。
图片预览
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js练习5</title>
<style>
*margin:0;padding:0;
#left,#right
width:300px;
height:300px;
font-size:20px;
float:left;
border:#01A36E solid;
word-break: break-all; /*解决多个重复字母会超出方框的问题*/
#text
width:300px;
height:300px;
resize:none;
border:none;
font-size:20px;
#midle
width:110px;
height:250px;
border:#01A36E solid;
text-align:center;
float:left;
padding-top:50px;
#btn
width:100px;
height:30px;
background-color:#E4855A;
#min_3 lilist-style:none;
width:10px;
height:12px;
background-color:#EDB831;
float:left;
margin-left:3px;
</style>
<script>
window.onload=function()
var txt=document.getElementById("text");
var txt2=document.getElementById("right");
var oBtn=document.getElementById("btn");
var oNum=document.getElementById("txtNum");
var timer2=null; //给定时器一个编号
var timer1=null; //为方便清楚定时器使用
var timer3=null;
var aMinLi=document.getElementById("min_3").getElementsByTagName("li");
var oMin=document.getElementById("min_3");
oMin.style.display='none'; //初始化ul为不显示
oBtn.onclick=function()
oBtn.disabled=true; //控制点击一次后、js未完成期间不可点击
var i=0;
var str=""+txt.value; //把输入的文本生成字符串
txt2.innerHTML=null; //新的文本再次转移到右边框时，先把框清空
var k=str.length;
timer1=setInterval(function setAttr()
for(;i<k;)
txt2.innerHTML+=str[i]; //实现文字转到右边的效果
var x=""+txt.value;
x=x.substr(1); //实现左边的文本消失
txt.value=x;
break;
i++;
if(i==str.length)
clearInterval(timer1);
,100);
//----------------------------------------
var b=str.length;
timer2=setInterval(function c()
var str=""+txt.value;
//var a=str.length; //在定时器内实时的返回左边剩余的字数
var a=b-str.length; // 实时返回右边进入的数字
oNum.innerHTML=a+"/"+b;
if(a==b)
clearInterval(timer2); //完成后把定时器timer2关掉
,100)
//----------------------------------------
//进度条的颜色变换
var m=0;
function change()
oMin.style.display='block'; //显示ul
for(var a=0;a<aMinLi.length;a++)
aMinLi[a].style.backgroundColor='#EDB831';
for(;m<aMinLi.length;)
aMinLi[m].style.backgroundColor='#FF2428';
if(m>=1)
aMinLi[m-1].style.backgroundColor='#EDB831';
break;
//这个if吊炸天了，，控制颜色变换必须到结尾才消失
if(txt.value==''&&m==aMinLi.length)
clearInterval(timer3);
oMin.style.display='none'; //结束时不显示ul
oBtn.disabled=false; //恢复按钮
if(m==aMinLi.length)
m=-1;
aMinLi[aMinLi.length-1].style.backgroundColor='#ED8831';
m++;
clearInterval(timer3); //可以防止文字未在执行转移时，多次点击产生的乱套
timer3=setInterval(change,100);
</script>
</head>
<body>
<div id="left"><textarea id="text"></textarea></div>
<div id="midle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="30"><input type="button" id="btn" value="去右边" ></td>
</tr>
<tr>
<td height="30"><p id="txtNum">0/0</p></td>
</tr>
<tr>
<td height="30" valign="middle"><div id="min_3">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="right"></div>
</body>
</html>
以上是关于js实现文字搬运工的主要内容，如果未能解决你的问题，请参考以下文章