<!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>
2018-02-16文字搬運工
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。