文字搬运工：JavaScript 实现输入内容的移动

最新推荐文章于 2022-11-07 08:34:07 发布

原创最新推荐文章于 2022-11-07 08:34:07 发布 · 523 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #textarea #innerHTML #clearInterval #setInterval

效果初现专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的有趣效果：将文本从一个输入框移动到另一个输入框，并通过指示器显示移动进度。该示例包括完整的HTML、CSS和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>