CSS部分
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #C0C0C0;
}
#box{
overflow: hidden;
width: 800px;
height: 240px;
background-color: white;
border-radius: 10px;
margin: 100px auto;
padding: 20px;
}
#left{
float: left;
width: 318px;
height: 218px;
padding: 10px;
background-color: #efefd6;
resize: none;
border: transparent;
font-size: 16px;
}
#right{
float: left;
width: 320px;
height: 220px;
padding: 10px;
background-color: #63EFF7;
}
#center {
float: left;
width: 120px;
height: 150px;
text-align: center;
}
#btn{
width: 110px;
height: 50px;
font-size: 16px;
color: white;
background-color: #F76300;
border: transparent;
cursor: pointer;
margin-bottom: 20px;
}
</style>
html部分
<div id="box">
<textarea id="left"></textarea>
<div id="center">
<button id="btn">移 动</button>
<div id="textCount">0 / 0</div>
</div>
<div id="right"></div>
JS部分
<script>
var left = document.getElementById("left");
var right = document.getElementById("right");
var textCount = document.getElementById("textCount");
var btn = document.getElementById("btn");
btn.onclick = function () {
//判断是否是空内容
if(left.value == ""){
alert("请输入一些内容!!!");
return
}
var str = left.value;
var arr = str.split("");
var num = 0;
var strNew = "";
//计时器
var timer = setInterval(function () {
var subStr = left.value; //存输入的值
left.value = subStr.substring(1); //每次删除第一个字符
//console.log(left.value)
//如果num等于输入内容的长度意味着存完,则停止计时器 /否则每轮将第一个字符放入新的字符串中
if(num==str.length){
clearInterval(timer);
}else {
strNew += arr[num];
num++;
}
right.innerHTML = strNew; //每轮写进一个字符
textCount.innerHTML = num + " / " + str.length;
},100)
}
</script>