效果：https://songboriceboy.github.io/js_homework/word_move.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>word_move</title>
<link href="reset.css" rel="stylesheet">
<style>
body{
background-color:#C0C0C0 ;
}
ul{
width:800px;
margin:50px auto;
background-color:white;
padding: 20px;
overflow: hidden;
border-radius: 10px;
}
li{
float:left;
}
button
{
border: 0;
background-color: orangered;
color:white;
width: 110px;
text-align: center;
height: 40px;
margin-left: 5px;
margin-right: 5px;
font-size:16px;
}
#left{
background-color:#EFEFD6;
width:336px;
height: 240px;
border: 0;
font-family: '微软雅黑';
font-size: 18px;
}
#right{
background-color:#63EFF7;
width:336px;
height: 240px;
border: 0;
font-family: '微软雅黑';
font-size: 18px;
}
h1
{
font-size:20px;
line-height:60px ;
text-align: center;
}
</style>
<script>
window.onload = function(){
var button = document.getElementById("button");
var h1 = document.getElementById("h1");
var timer;
function less(index,arr) {
var str = "";
for(var i = index ; i < arr.length ; i++)
{
str += arr[i];
}
return str;
}
function more(index,arr) {
var str = "";
for(var i = 0 ; i < index ; i++)
{
str += arr[i];
}
return str;
}
button.onclick = function () {
clearInterval(timer);
var left = document.getElementById("left");
var right = document.getElementById("right");
if(left.value ==="")
{
alert("请在左侧输入一些文字后再点击按钮");
return;
}
var leftarr = left.value.split("");
var length = leftarr.length;
var index = 0;
timer = setInterval(function () {
left.value = less(index,leftarr);
right.value = more(index,leftarr);
h1.innerHTML = `${index}/${length}`;
if(index === length)
{
clearInterval(timer);
}
index++;
}
,80)
}
}
</script>
</head>
<body>
<ul>
<li><textarea id="left"></textarea></li>
<li><button id="button">把文字右移</button><h1 id="h1">0/0</h1></li>
<li><textarea id="right"></textarea></li>
</ul>
</body>
</html>
