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

思路：

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

<!--

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. Codeforces Round #247 (Div. 2) D. Random Task

    D. Random Task time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. 【深入理解javascript】王福朋，厉害了word哥

    学习前端有一段时间了,一直以来也没搞明白js中这个闭包到底是个什么东西,有时候看看别人的博客或者知乎的文章,大概上有个了解,可过一段时间也就忘了.偶然间有幸拜读了博客园-王福朋的这一系列文章<深 ...

  3. 【剑指offer】用两个栈实现队列

    一.题目: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 二.思路: 两个栈A,B,A负责进栈,B负责出栈,进栈很容易,A中添加即可,出栈需要从B里出,所以要先 ...

  4. session超时时间设置

    在Tomcat的web.xml文件中修改如下标签 <session-config> <session-timeout>10</session-timeout> &l ...

  5. iOS 网易彩票-1框架搭建

    仿网易彩票,最终要做成的效果如下: 一.分层搭建 1.新建一个项目,Lottery.只支持7.1以上坚屏. 2.将素材全部图片全部拉到相应的文件夹里. 3.选中Lottery--右键Show in F ...

  6. c++虚函数实现机制（转）

    前言 C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型别的指针指向其子类的实例,然后通过父类的指针调用实际子类的成员函数.这种技术可以让父类的指针有“多种形态”,这是一种泛 ...

  7. 数据结构线性表的动态分配顺序存储结构算法c语言具体实现和算法时间复杂度分析

    #include<stdio.h>#include<stdlib.h>//线性表的动态分配顺序存储结构#define LIST_INIT_SIZE 100//线性表存储空间的初 ...

  8. linux mysql安装问题

    1.rpm -qa | grep mysql   //首先检查是否安装了mysql   2.如果安装了,卸载 rpm -e mysql   3\ 下载地址 http://dev.mysql.com/d ...

  9. windows上备份mysql数据库

    方案一:采用mysql自带的工具mysqldump. 脚本文件backup.bat如下: set  "YMD=%date:~,4%%date:~5,2%%date:~8,2%"cd ...

  10. WSDL解析

    背景 前面我们介绍过利用javassist动态生成webservice,这种方式可以使得我们系统通过页面配置动态发布webservice服务,做到0代码开发发布北向接口.进一步思考,我们如何0代码开发 ...