文字搬運工：JavaScript 實現 輸入內容的 移動
阿新 • • 發佈：2019-01-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 實現 輸入內容的 移動</title> <style type="text/css"> *{ margin:0; padding: 0; list-style: none; border:none; } #box{ width: 800px; height: 300px; border:10px solid #ccc; margin:50px auto; padding:10px; } #left,#right{ width:348px; height: 100%; float: left; border:1px dotted #000; resize: none; outline: none; } .center{ width: 90px; height: 100%; float: left; margin:0 5px; } input{ width: 80px; height: 40px; display: block; margin:20px auto; background: orange; color:#fff; } p{ text-align: center; } ul{ width: 78px; overflow: hidden; margin:20px auto; } li{ width: 8px; height: 8px; background: #ccc; float: left; margin-right: 2px; } li:nth-of-type(8){ margin-right:0; } li.current{ background: orange; } </style> </head><body> <div id="box"> <textarea id="left"></textarea> <div class="center"> <input type="button" value="把文字右移" id="btn"> <p id="len">0/0</p> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="right"></div> </div> <script> var oBtn = document.getElementById("btn"); var oLeft = document.getElementById("left"); var oRight = document.getElementById("right"); var oP = document.getElementById("len"); var aLi = document.getElementsByTagName("li"); var timer; oBtn.onclick = function(){ if(oLeft.value.length>=0){ var n = 0; oRight.innerHTML = ""; var len = oLeft.value.length; timer = setInterval(function(){ var arr = oLeft.value.split(""); oRight.innerHTML+=arr.shift(); oLeft.value = arr.join(""); oP.innerHTML = oRight.innerHTML.length+"/"+len; for(var i=0;i<aLi.length;i++){ aLi[i].className = ""; } aLi[n%aLi.length].className = "current"; n++; if(n>=len){ clearInterval(timer); len = 0; } },30); } }; </script> </body> </html>