<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
var words = document.getElementById('words');
var button = document.getElementById('button');
var right = document.getElementById('right');
var numRight = document.getElementById('two');
var numleft = document.getElementById('one');
button.onclick = function () {
var strWords = words.value;
var arr = strWords.split("");
var index = 0 ;
var copy = "";
numRight.innerHTML = arr.length;
if(arr.length == 0)
{
alert("请在左侧输入一些文字后再点击按钮");
}
else
{
var timeid = setInterval(function () {
words.value = strWords.substr(index+1);
copy+= arr[index]
right.innerHTML = copy;
numleft.innerHTML = index+1;
index++;
if(index==arr.length)
{
clearInterval(timeid);
}
},100)
}
}
}
</script>
<style>
body{
background-color: #b6b6b6;
}
.all{
width: 846px;
height: 281px;
margin: 0 auto;
border: 1px solid white;
background-color: white;
margin-top: 51px;
}
.left textarea{
border:none;
background-color: #EFEFD6;
width: 340px;
height: 240px;
float: left;
margin-left: 21px;
margin-top: 20px;
font-size: 18px;
}
#right{
border: 1px solid #63EFF7;
background-color: #63EFF7;
width: 340px;
height: 240px;
float: right;
margin-right: 21px;
margin-top: 20px;
font-size: 16px;
}
.center{
float: left;
margin-top: 20px;
text-align: center;
}
.center .word{
width: 111px;
background-color: #F76300;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 4px;
}
.center a{
font-size: 16px;
color: white;
}
.center .num{
font-size: 18px;
font-family: 微软雅黑;
margin-top: 26px ;
}
</style>
</head>
<body>
<div class="all">
<div class="left">
<textarea id="words"></textarea>
</div>
<div class="center">
<div class="word" id="button"><a href="#">把文字右移</a></div>
<div class="num"><span id="one">0</span>/<span id="two">0</span></div>
</div>
<div id="right">
</div>
</div>
</body>
</html>
网友评论