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

思路：

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

<!--

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. 移除wordpress版本信息 删除无用信息

    wordpress页面头部有很多无用的信息,像wordpress版本信息.feed等,如何把它们删除或不让它们先是出来呢? 将下面的代码加入到当前主题的functions.php,可以适当酌情保留 & ...

  2. SQL死锁知识及解决办法

    [翻译]:SQL死锁-死锁排除 min.jiang 2014-03-18 00:23 阅读:874 评论:1     项目中死锁的解决经历 min.jiang 2014-03-17 01:09 阅读: ...

  3. elasticsearch 6.0java api的使用

    elasticsearch 6.0 中java api的使用 1:使用java api创建elasticsearch客户端 package com.search.elasticsearch; impo ...

  4. Linear Regression Using Least Squares Method 代码实现

    1. 原理 2. Octave function theta = leastSquaresMethod(X, y) theta = pinv(X' * X) * X' * y; 3. Python # ...

  5. Django中的admin组件分析

    admin的使用介绍 django-admin的使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.可以在项目的 setting ...

  6. 利用lodop打印控件轻松实现批量打印 （转载http://www.thinkphp.cn/topic/13085.html）

    最近在做一个打印程序,要实现批量打印功能,在网上找了很多天,也在tp官网咨询大牛们,对大家的的提议我一一进行了研究,总结如下: 要实现批量打印可以有两个办法: 一是利用专业的报表程序,能实现十分复杂的 ...

  7. 读书--编写高质量代码 改善C#程序的157个建议

    最近读了陆敏技写的一本书<<编写高质量代码  改善C#程序的157个建议>>书写的很好.我还看了他的博客http://www.cnblogs.com/luminji . 前面部 ...

  8. vs2013中将原来在iis express中的网站转到iis中时，报“无法在web服务器上调试”的解决方法

    之前在网上也搜索过,但没有一个是正确的,后来在微软网站上发现问题的解决方法: 在web.config中,打开调试就可以了,具体方法为: 在web.config中 在以下配置节中加入以下代码 <c ...

  9. 持续集成之四：Jenkins+sonarqube

    参考其他文章,编译 构建 检查工具 参考:https://blog.csdn.net/lswnew/article/details/79193529 http://www.uml.org.cn/cod ...

  10. linux常用命令：killall 命令

    killall命令用进程的名字来杀死进程. 1.命令格式:    killall [ -egiqvw ] [ -signal ] [进程名称] 格式:killall -<signame> ...