<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字搬運工</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="bg">
<div id="box">
<textarea>妙味課堂是一支充滿溫馨並且極富人情味的IT培訓團隊；2010-2011年，妙味深度關注WEB前端開發領域，爲此精心研發出一套靈活而充滿趣味的JavaScript課程。2011-2013年，妙味精準研發出最新HTML5\CSS3課程，並推出遠程培訓課程方案，嘗試將線下優良的培訓模式移植到遠程網絡培訓中，希望盡最大努力，將一種快樂愉悅的授課體驗、結合HTML\CSS\JS知識點，精準傳遞給妙味課堂的每一位學員。</textarea>
<div>
<a href="javascript:;"></a>
<span>0/0</span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p></p>
</div>
</div>
<script type="text/javascript">
function $(cssSelector){
var els = document.querySelectorAll(cssSelector);
return els.length > 1?els:els[0];
};
(function(){
var textarea = $("textarea");
var p = $("p");
var btn = $("a");
var startText = textarea.value;
var index = 1;//要把幾個移到右邊去
var span = $("span");
var timer = 0;
var ul = $("ul");
var lis = $("ul li");
span.innerHTML = "0/" + startText.length;
btn.onclick = function(){
if(timer){
return ;
}
ul.style.opacity = 1;
timer =setInterval(fn,40);
};
function fn(){
var r = startText.substr(0,index);
var l = startText.substr(index);
textarea.value = l;
p.innerHTML = r;
span.innerHTML = index + "/" + startText.length;
if(index >= startText.length){
clearInterval(timer);
ul.style.opacity = 0;
timer = 0;
}
for(var i = 0; i < lis.length; i++){
lis[i].classList.remove("active");
}
lis[index%lis.length].classList.add("active");
index++;
}
})();
</script>
</body>
</html>