js文字转移效果
这个例子算是有点样子的。
思路：
字符串操作。
左框里面先是预设的。
点击按钮时截取左框中的字符串的前一个字符到右框里的字符串后面，以此循环。
点击按钮时按钮变为灰色，在循环完成后恢复。
计数的总数（右边）是左框原字符串长度，已移动的数是右框每次循环的字符串长度。
循环时同时改变计数下面的小方块背景。
<!-- 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>
