原生js文字搬运工

文字搬运工功能

1. 文字挨个从左往右移,左边删掉第一个,右边添加刚刚删掉的
2. 移动过程中，按钮不能重复点击
3. 有进度条，进度条延迟消失
4. 有统计数字
5. 没有输入内容给个弹窗提示一下

实现思路

• 左侧的内容一个一个删除掉,右侧内容一个一个添加
• 声明一个变量存储左侧里面的值

效果图

css样式

	<div id="wrapper">
		<textarea id="left"></textarea>
		<div id="center">
			<a href="javascript:">把文字右移</a>
			<p><span id="current">0</span>/<span id="all">0</span></p>
			<ul id="progress">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div id="right"></div>
	</div>
<style>
		html, body {
			margin: 0;
			padding: 0;
			background: #C0C0C0;
		}
		#wrapper {
			margin: 50px auto;
			width: 800px;
			background: #fff;
			overflow: hidden;
			padding: 20px;
			border-radius: 10px;
		}
		textarea {
			background: #EFEFD6;
			border: none;
			width: 320px;
			height: 220px;
			float: left;
			padding: 10px;
			font-size: 18px;
		}
		#right {
			width: 320px;
			height: 220px;
			background: #63EFF7;
			float: right;
			padding: 10px;
		}
		#center {
			float: left;
			width: 120px;
			text-align: center;
		}
		#center a {
			display: block;
			color: #fff;
			background: #F76300;
			text-decoration: none;
			padding: 10px;
			margin: 0 5px;
			font-family: '微软雅黑';
		}
		#center p {
			font-size: 20px;
			font-family: '微软雅黑';
		}
		#center ul {
			margin: 0;
			padding: 0;
			font-size: 0;
			opacity: 0;
		}
		li {
			list-style: none;
			display: inline-block;
			width: 8px;
			height: 10px;
			background: #E7A521;
			margin: 2px;
		}
		textarea{
			resize: none;
		}
	</style>

功能代码

	<script>
		window.onload=function(){
			var btn=document.querySelector("#center a");
			var left=document.getElementById("left");
			var all=document.getElementById("all");
			var right=document.getElementById("right");
			var current=document.getElementById("current");
			var progress=document.getElementById("progress");
			var lis=document.querySelectorAll("#progress li");
			var timer;
			var n=0;
			var ln=0;
			
			btn.on=true;	//给btn一个自定义属性，目的是阻止重复点击
			btn.onclick=function(){
				if(!left.value){
					alert('请输入一些文字后再点击');
					return;
				}
				if(!btn.on){
					return;
				}
				btn.on=false;
				var str=left.value;
				all.innerHTML=str.length;	//总数字
				progress.style.opacity=1;
				this.style.opacity='0.5';
				right.innerHTML='';
				timer=setInterval(function(){
					str=left.value;
					right.innerHTML+=str.substring(0,1);	//改变右侧的内容
					left.value=left.value.substring(1);		//改变左侧的内容
					current.innerHTML=right.innerHTML.length;	//当前的数字
					for(var i=0;i<lis.length;i++){
						lis[i].style.background='#E7A521';
					}
					lis[n].style.background='red';
					n++;
					n%=lis.length;
					
					if(n==lis.length){
						n=0;
					}
					if(!left.value){
						clearInterval(timer);
						
						btn.style.opacity='1';
						progress.style.opacity=0;
						btn.on=true;
					}
				},80);
				
			};
		};
		
	</script>