<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="tea_reset.css">
<style>
body{
background-color: #C0C0C0;
}
.wrap{
margin: 50px auto 0;
padding: 20px;
width: 800px;
background-color: white;
border-radius: 10px;
}
.wrap textarea{
float: left;
padding: 10px;
width: 320px;
height: 220px;
background-color: #EFEFD6;
font-size: 18px;
}
.wrap .middle{
float: left;
margin: 0 5px;
}
.wrap .middle input{
width: 110px;
height: 40px;
background-color: #F76300;
font-size: 16px;
color: white;
}
.wrap .middle p{
width: 110px;
height: 66px;
line-height: 66px;
font-size: 20px;
text-align: center;
}
.wrap .middle span{
font: inherit;/*通过遗传获取到父级p标签的字体大小*/
}
.wrap .right{
float: right;
padding: 10px;
width: 320px;
height: 220px;
background-color: #63EFF7;
font-size: 16px;
}
.wrap .temp{
clear: both;/*防止父div塌陷*/
}
</style>
<script>
window.onload = function () {
var oTextarea = document.getElementById('textarea');
var oButton = document.getElementById('button');
var oSpans = document.getElementsByTagName('span');
var oRight = document.getElementById('right');
oButton.onclick = function () {
if(oTextarea.value == ''){
alert('请在左侧输入一些文字后再点击按钮');
}else {
oRight.innerHTML = '';//右侧的段落清空历史记录
oSpans[0].innerHTML = 0;//字数统计重置为0
oSpans[1].innerHTML = oTextarea.value.length;//计算新的内容的长度
var timerID = setInterval(function () {
oRight.innerHTML = oRight.innerHTML.concat(oTextarea.value[0]);//右侧段落先获取到左侧文本的头元素
oSpans[0].innerHTML++;//转移的个数记录++
if(oTextarea.value.length == 1){//最后只剩1个字符了，且已经被右侧的段落获取到，直接设置为空串，停掉定时器
oTextarea.value = '';
clearInterval(timerID);
}else{
oTextarea.value = oTextarea.value.slice(1);//左侧文本域删掉自己的头元素
}
},50)
}
}
}
</script>
</head>
<body>
<div class="wrap">
<textarea id="textarea"></textarea>
<div class="middle">
<input id="button" type="button" value="把文字右移">
<p><span>0</span>/<span>0</span></p>
</div>
<p id="right" class="right"></p>
<p class="temp"></p>
</div>
</body>
</html>
网友评论