使用原生js实现文字搬运的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<style>
*{margin: 0;padding:0;}
#box{width:800px;height:300px;padding:10px;border:5px solid #CCC;margin:10px auto;}
#text{width:300px;height:100%;background:#C63;border-color:1px dashed #C60;float:left;maxlength:280px;font-size:16px;line-height:30px;color:#FFF;}
#mid{width:120px;float:left;margin:0 20px;text-align:center;}
#button{width:100px;background:#F60;height:30px;font-size:16px;line-height:30px;color:#FFF;border:0;cursor:pointer;}
strong{margin-top:10px;display:inline-block;}
#mid ul{list-style:none;margin-top:30px;margin-left:15px;}
#mid ul li{width:12px;height:12px;background:#FC6;float:left;margin-right:5px;}
#content{float:right;border:1px dashed black;background:#FC6;width:300px;height:100%;font-size:16px;line-height:30px;color:#333;}
</style>
</head>
<body>
<div id="box">
<textarea name="text" id="text" cols="30" rows="10"></textarea>
<div id="mid">
<input type="button" id="button" value="文字转移">
<strong>0/0</strong>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="content"></div>
</div>
<script>
window.onload=function () {
var oMid=document.getElementById('mid');//获取mid div
var oStr=oMid.getElementsByTagName('strong')[0];
var oUl=oMid.getElementsByTagName('ul')[0];
var oLi=oMid.getElementsByTagName('li');
var oText=document.getElementById('text');
var oCon=document.getElementById('content');
var oBut=document.getElementById('button');
var timer=null;
//点击按钮
oBut.onclick=function(){
//输入框没有文字
if(oText.value=="")
{
alert('请输入文字');
return;
}
//清空右边的内容
oCon.innerHTML="";
//按钮变色
this.style.background='#ccc';
//进度条出现
oUl.style.display="block";
//进度条变色
var num=0;
function roll(){
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.background="";
}
oLi[num].style.background="#f30";
num++;
if(num==oLi.length){
num=0;
}
}
setInterval(roll,50);
//文字搬运
timer=setInterval(textMove,50);
var sum=oText.value.length;
function textMove(){
oStr.innerHTML=oCon.innerHTML.length+'/'+sum;
if(oText.value==""){
clearInterval(timer);
oUl.style.display="none";
oBut.style.background="";
return;
}
//获取文本域中的内容
var str=oText.value;
//将字符串分割成字符串数组
var arr=str.split("");
//输出数组中的元素并且将返回的数组元素添加到右边的区域
console.log(arr)
oCon.innerHTML+=arr.shift();
oText.value=arr.join("");
//console.log(oText.value);
//arr.shift();
}
}
}
</script>
</body>
</html>
主要学习了js中对数组的一些小操作