这个例子算是有点样子的。

思路：

字符串操作。
左框里面先是预设的。
点击按钮时截取左框中的字符串的前一个字符到右框里的字符串后面，以此循环。
点击按钮时按钮变为灰色，在循环完成后恢复。
计数的总数（右边）是左框原字符串长度，已移动的数是右框每次循环的字符串长度。
循环时同时改变计数下面的小方块背景。

<!--

Author: XiaoWen

Create a file: 2016-12-07 23:26:24

Last modified: 2016-12-08 13:16:34

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>文字转移</title>

  <style>

    #box{

      width: 800px;

      margin: auto;

      border: 6px solid #EDEDED;

      background: #fff;

      padding: 12px;

      overflow: hidden;

      text-align: center;

    }

    textarea{

      width: 286px;

      height: 188px;

      padding: 6px;

      margin: 0;

      border: 0;

      border: 1px dashed #000;

      font-size: 16px;

    }

    #text_left{

      float: left;

      display: block;

      background: #EFEF8F;

    }

    #text_right{

      float: right;

      display: block;

      background: #0FF;

    }

    #center{

      width: 200px;

      float: left;

    }

    button{

      background: #FEA400;

      height: 30px;

      width: 100px;

      color: #fff;

      font-family: 微软雅黑;

      margin: 0;

      padding: 0;

      border: 0;

      outline: 0;

    }

    ul,li{

      margin: 0;

      padding: 0;

      list-style: none;

    }

    li{

      width: 10px;

      height: 10px;

      background: #FEA400;

      display: inline-block;

    }

  </style>

</head>

<body>

<div id="box">

  <textarea name="" id="text_left">时间就像一杯茶，而回忆就是茶叶，只有泡久了，才能从苦涩中品出茶叶的清香，而我现在终于体味到这句话的含义了。时隔长久，再去回味某一件事，才会想到另一面，看到事情的本质。</textarea>

  <div id="center">

    <button>文字右移</button>

    <p><span>0</span>/<span>0</span></p>

    <ul>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </div>

  <textarea name="" id="text_right"></textarea>

</div>

<script>

  var left=document.getElementById("text_left");

  var right=document.getElementById("text_right");

  var btn=document.getElementsByTagName("button")[0];

  var a_span=document.getElementsByTagName("span");

  var a_li=document.getElementsByTagName("li");

  var val; //定时器名称

  var ok=0; //是否完成，0为完成

  btn.onclick=function(){

    var i=0; //字符下标

    var j=0; //小方块下标

    if(left.value==""){ //文字为空

      alert("没有文字");

      return;

    }else if(ok==1){

      alert("忙碌中");

      return;

    }else{

      clearInterval(val); //防止定时器累加

      a_span[1].innerHTML=left.value.length;

      val=setInterval(function(){

        ok=1; //任务正在进行中

        btn.style.background="#FFDB99"; //点击按钮后把按钮变为浅色

        a_span[0].innerHTML=i+1; //已完成的字符数，这里显示的是字符数，要+1

        right.innerHTML+=left.value[0]; //在右框里拼接字符串左框里的第一个字符

        left.value=left.value.slice(1); //截取左框里面第一个后面的字符并刷新

        for(var j=0;j<a_li.length;j++){ //先还原清除所有li颜色

          a_li[j].style.background="#FEA400";

        }

        a_li[i%a_li.length].style.background="#FF0000"; //再把指定的小方块颜色变为红色，有7个小方块（a_li.length等于7），i取余7后的数字刚好是0到6，可以作为下标。

        i++;

        if(left.value.length==0){ //如果超过字符数就结束定时器，这里用的是下标，要-1

          clearInterval(val); //定时器结束

          btn.style.background="#FEA400"; //完成后恢复按钮颜色

          ok=0; //设置状态为完成

          for(var j=0;j<a_li.length;j++){ //还原小方块颜色

            a_li[j].style.background="#FEA400";

          }

        }

      },50)

    }

  }

</script>

</body>

</html>

js文字转移效果的更多相关文章

  1. js文字滚动效果实现

    纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...

  2. JS文字翻滚效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...

  3. js文字跳动效果

    /*! * chaffle v1.0.0 * * Licensed under MIT * Copyright 2013-2014 blivesta * http://blivesta.com */ ...

  4. js文字滚动效果

    function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...

  5. JS 黑客帝国文字下落效果

    黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  7. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

  8. js文字颜色闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

随机推荐

  1. zookeeper java调用及权限控制

    import java.io.IOException; import java.security.NoSuchAlgorithmException; import java.util.ArrayLis ...

  2. 定时任务，AlarmManager使用

    CoderLt   定时任务,AlarmManager使用 项目需要:实现一个定时提醒的功能 查阅资料知道,需要使用AlarmManager AlarmManager介绍: AlarmManager是 ...

  3. vue学习之webpack

    本质上,Webpack是一个现代 JavaScript应用程序的静态模块打包器(module bundler).当 Webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency g ...

  4. 通过反射，获取linkedHashMap的最后一个键值对。对map按照值进行排序。

    1:通过反射,获取linkedHashMap的最后一个键值对. Map<Integer, Integer> map = new LinkedHashMap<>(); Field ...

  5. Y2K Accounting Bug（poj2586)

    题意: 有一个公司由于某个病毒使公司赢亏数据丢失,但该公司每月的 赢亏是一个定数,要么一个月赢利s,要么一月亏d.现在ACM只知道该公司每五个月有一个赢亏报表,而且每次报表赢利情况都为亏.在一年中这样 ...

  6. Hat's Fibonacci

    http://acm.hdu.edu.cn/showproblem.php?pid=1250 大数斐波那契 %08d是什么东西,为什么我用flag交不上,唉,不刷大数了,没劲.暑假再讲. 就是交不上 ...

  7. PAT Counting Leaves[一般]

    1004 Counting Leaves (30)(30 分) A family hierarchy is usually presented by a pedigree tree. Your job ...

  8. mysql 开启慢查询

    linux启用MySQL慢查询 vim /etc/my.cnf [mysqld] slow-query-log = on slow_query_log_file = /var/log/slow_que ...

  9. jquery closest & parent比较

    .closest() .parents() 从当前元素开始 从父元素开始 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止. 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加 ...

  10. selenium WebDriver处理文件下载

    下载文件WebDriver 允许我们设置默认的文件下载路径.也就是说文件会自动下载并且存在设置的那个目录中.下面以FireFox 为例执行文件的下载. package com.mypro.jase; ...