使用JS实现文字搬运工

效果图：

代码如下，复制即可使用：

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>使用JS实现文字搬运工</title>

    <style>

        /*设置整体背景、清空边界和填充等样式*/

        html, body {

            margin: 0;

            padding: 0;

            background: #C0C0C0;

        }

        /*设置文字移动框所在的DIV宽度、背景色、填充及圆角边框等样式*/

        #wrapper {

            margin: 50px auto;

            width: 800px;

            background: #fff;

            overflow: hidden;

            padding: 20px;

            border-radius: 10px;

        }

        /*设置左侧文字输入框背景色、宽高、填充、左浮动及字体大小等样式*/

        textarea {

            background: #EFEFD6;

            border: none;

            width: 320px;

            height: 220px;

            float: left;

            padding: 10px;

            font-size: 18px;

        }

        /*设置右侧结果框背景色、宽高、填充、右浮动等样式*/

        #right {

            width: 320px;

            height: 220px;

            background: #63EFF7;

            float: right;

            padding: 10px;

        }

        /*设置中间操作部分浮动、宽度、文本居中*/

        #center {

            float: left;

            width: 120px;

            text-align: center;

        }

        /*设置中间超链接样式*/

        #center a {

            display: block;

            color: #fff;

            background: #F76300;

            text-decoration: none;

            padding: 10px;

            margin: 0 5px;

            font-family: '微软雅黑';

        }

        /*设置中间进度显示数字样式*/

        #center p {

            font-size: 20px;

            font-family: '微软雅黑';

        }

        /*设置进度显示条的样式并透明显示*/

        #center ul {

            margin: 0;

            padding: 0;

            font-size: 0;

            opacity: 0;

        }

        /*设置进度显示条的每个点*/

        li {

            list-style: none;

            display: inline-block;

            width: 8px;

            height: 10px;

            background: #E7A521;

            margin: 2px;

        }

        /*不允许用户调整左侧文本输入框的大小*/

        textarea{

            resize: none;

        }

    </style>

     <script>

         window.onload=function(){

             var left=document.getElementById('left');

             var btn=document.querySelector('#center a');

             var all=document.getElementById('all');

             var right=document.getElementById('right')

             var current=document.getElementById('current')

             var progress=document.getElementById('progress')

             var lis=document.querySelectorAll('progress li')

             var n=0;

                btn.onclick=function(){

                  /*每次点击按钮时，清空右侧文字，当前数字从0开始计数*/

                  right.innerHTML='';

                  current.innerHTML='0';

                  if(!left.value){

                      alert('请输入内容');

                      return;

                  }

              var str=left.value;

                  all.innerHTML=str.length;

                  //超链接颜色变浅

                  this.style.opacity='0.5'

                  //显示进度条

                  progress.style.opacity='1'

              var timer=setInterval(function(){

                    str=left.value;

                    right.innerHTML += str.substring(0,1);

                    left.value=left.value.substring(1);

                    current.innerHTML=right.innerHTML.length;

                  for(var i=0;i<lis.length;i++){

                    lis[i].style.background='#E7A521';

                }

                //将其中一个块变红色

                lis[n].style.background='red';

                //下次移动问责内容，下一个块变红色

                n++;

                //红块移到头，再从头开始

                if(n==lis.length){

                    n = 0;

                }

                    /*左侧文字移动完毕后，移动事件失效*/

                  if(!left.value){

                       clearInterval(timer)

                       btn.style.opacity='1';

                       progress.style.opacity='0'

                   }

              },80);

              }

         }

     </script>

</head>

<body>

<div id="wrapper">

    <textarea id="left"></textarea>

    <div id="center">

        <a href="javascript:">把文字右移</a>

        <p>

            <span id="current">0</span>/

            <span id="all">0</span>

        </p>

        <ul id="progress">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    <div id="right"></div>

</div>

</body>
</html>

如果您有更好的方法或更多的功能，可以和我们大家一起来分享哦，如有错误，欢迎联系我改正，非常感谢！！！

使用JS实现文字搬运工的更多相关文章

  1. js实现文字截断

    先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦.这里写了一个js的文字截断功能.直接上代码. HTML(测试用的): <div>我是pox我是pox ...

  2. js实现文字逐个显示

    先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...

  3. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  4. js对文字进行编码

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

  5. JS实现文字转语音播放

    JS实现文字转语音播放背景实现方式第一种:百度文字转语音开放API第二种:微软TTS语音引擎第三种:SpeechSynthesisUtterance总结背景在做项目的过程中,经常会遇到场景是客户要求播 ...

  6. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  7. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  8. JS实现文字截取（雾）

    今天在跳板群那里看到一个神奇的样式,效果: 感觉十分神奇,因为一开始以为他是只有一个P元素包着文字然后最后一个自动截取文字,而且最后一行还可以提前截取???这怎么做到的,然后想了一下css怎么做,好像 ...

  9. three.js添加文字

    添加文字需要用到fontLoader,测试貌似只能异步.在success中回调. 对于中文字体,需要将ttf格式转换为json格式或者是js格式之后才能使用,不过一般转换之后的文件比较大.建议使用Fo ...

随机推荐

  1. 团体程序设计天梯赛 L1-011. A-B

    读入的是字符串,数组大小至少为字符串长度+1 #include <stdio.h> #include <stdlib.h> #include <string.h> ...

  2. Cannot enlarge string buffer containing XX bytes by XX more bytes

    在ELK的数据库报警系统中,发现有台机器报出了下面的错误: 2018-12-04 18:55:26.842 CST,"XXX","XXX",21106,&quo ...

  3. 2018-2019 ACM-ICPC ECfinal I. Misunderstood … Missing

    题目链接 首先有两个个属性值:\(A,D\),其中\(A\)表示目前攻击力,\(D\)表示每回合攻击的增量. 现在一共有\(n\)个回合,每一回合\(i\),可以有以下三种操作: 1.进行攻击,造成\ ...

  4. Chapter12(动态内存)--C++Prime笔记

    1.分配再静态或栈内存中的对象由编译器自动创建销毁. 2.C++中动态内存的管理是通过 new:前者为对象非配空间并返回一个指向该对象的指针. delete:接受一个动态对象的指针,摧毁该对象,并释放 ...

  5. Java入门：使用Java API

    什么是Java类库 在编写程序的时候,通常有很多功能是通用的,或者是很基础的,可以用这些功能来组成更发杂的功能代码.比如文件操作,不同程序对文件的操作基本都是一样的,打开文件,关闭文件,读取文件里面的 ...

  6. winscp以命令行方式同步服务器数据到PC机磁盘上

    目前服务器上每日会产生备份文件,需要使用winscp工具把备份同步到本地PC机硬盘上.平时都是图形界面用鼠标点击方式来同步的,效率低下,因此编写了winscp自动同步脚本,并加入到计划任务中定时自动运 ...

  7. python基础之面向对象01

    什么是面向对象? 所谓面向对象就是将那些具有共同特质的事物组成一个类(Class),在类中为这些特质定义一个个方法(函数). 具体一点,比如说英雄联盟.在英雄联盟中我们可以把所有的英雄划分为一个英雄类 ...

  8. Ansible12：lookup

    目录 简单说明 1.file 2.pipe 3.env 4.template 5.csvfile 6.redis_kv 7.etcd 8.password 9.dnstxt 简单说明 在通常情况下,所 ...

  9. GO_00：Mac之Item2的配置安装

    申明:Mac 本上的终端感觉不是那么多好用,以前在 Windows 上操作 Linux 都是通过 XShell 来操作的,界面美观大方.操作使用比较简单.故在 Mac 上也需要有这样一款类似的工具,那 ...

  10. 【AtCoder】ARC095 E - Symmetric Grid 模拟

    [题目]E - Symmetric Grid [题意]给定n*m的小写字母矩阵,求是否能通过若干行互换和列互换使得矩阵中心对称.n,m<=12. [算法]模拟 [题解]首先行列操作独立,如果已确 ...