文字搬运工功能
- 文字挨个从左往右移,左边删掉第一个,右边添加刚刚删掉的
- 移动过程中,按钮不能重复点击
- 有进度条,进度条延迟消失
- 有统计数字
- 没有输入内容给个弹窗提示一下
实现思路
- 左侧的内容一个一个删除掉,右侧内容一个一个添加
- 声明一个变量存储左侧里面的值
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1fe9f70c448a8b2172f53c5d9c2e9d7f.jpeg#pic_center)
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.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>