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

思路：

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

<!--

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. Spark Storage（一） 集群下的区块管理

    Storage模块 在Spark中提及最多的是RDD,而RDD所交互的数据是通过Storage来实现和管理 Storage模块整体架构 1. 存储层 在Spark里,单节点的Storage的管理是通过 ...

  2. INT_MAX和INT_MIN注意事项

    版权声明:转载请注明出处 http://blog.csdn.net/TwT520Ly https://blog.csdn.net/TwT520Ly/article/details/53038345 I ...

  3. PAT 1017 Queueing at Bank[一般]

    1017 Queueing at Bank (25)(25 分)提问 Suppose a bank has K windows open for service. There is a yellow ...

  4. openstack部署心得

    官方文档:https://docs.openstack.org/ 个别版本有中文 不要轻易尝试最新版本 新版本刚推出一般存在不少BUG或者文档没有更新,按照文档配置就是不能成功.推荐尝试最新版本的上一 ...

  5. [LeetCode] 694. Number of Distinct Islands

    Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...

  6. [LeetCode] 102. Binary Tree Level Order Traversal_Medium tag: BFS

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  7. 浅谈Android View事件分发机制

    引言 前面的文章介绍了View的基础知识和View的滑动,今天我们来介绍View的另一个核心知识,View的事件分发机制. 点击事件的传递规则 所谓的点击事件的分发机制,其实就是对MotionEven ...

  8. 【剑指Offer学习】【面试题3 ：二维数组中的查找】

    package 二维数组查找; public class Test03 { /** * 在一个二维数组中,每一行都按 package 二维数组查找; public class Test03 { /** ...

  9. 20154312 曾林 EXP7 网络欺诈防范

    目录 1.基础问题回答 ----1.1.通常在什么场景下容易受到DNS spoof攻击 ----1.2.在日常生活工作中如何防范以上两攻击方法 2.实践总结与体会 3.实践过程记录 ----3.1.简 ...

  10. python 练习用python六剑客实现一个统计数字的个数，六剑客：（map、lambda、reduce、filter、切片、推到列表）

    统计一共有几个数字 s="sdfa45ads46723" #lambda >>> filter(lambda x:x.isdigit(),list(s)) ['4 ...