<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0px; padding:0px; } body{ background:#C0C0C0; } #progress{ opacity:0; } li{ list-style:none; display:inline-block; 8px; height:10px; margin:2px; background:#E7A521; } #wrap{ margin:50px auto; 800px; background:#fff; overflow:hidden; padding:20px; border-radius:10px; } textarea{ background:#EFEFD6; 320px; height:220px; float:left; padding:10px; font-size:18px; border:medium none; } #center{ float:left; 120px; text-align:center; } #center ul { margin: 0px; padding: 0px; font-size: 0px; } #center a{ display:block; color:#fff; background:#F76300; text-decoration:none; padding:10px; margin:0px 5px; font-family:"微软雅黑"; } #center p{ font-size:20px; font-family:"微软雅黑"; } #right{ 320px; height:220px; background:#63EFF7; float:right; padding:10px; } </style> <script type="text/javascript" src="float.js"></script> <script type="text/javascript"> window.onload = function () { var obtn = document.getElementsByTagName('a')[0]; var otext = document.getElementsByTagName('textarea')[0]; var oright = document.getElementById('right'); var oall = document.getElementById('all'); var ocurrent = document.getElementById('current'); var oprogress = document.getElementById('progress'); var str = ''; var arr = []; var timer = null; obtn.onclick = function () { clearInterval(timer); if( otext.value == '' ) { alert('请输入内容！'); } else { str = otext.value; arr = str.split(''); var ali = document.getElementsByTagName('li'); obtn.style.opacity = '0.5'; var m = n = 0; ocurrent.innerHTML = 0; oall.innerHTML = arr.length; oright.innerHTML = ''; opacity(oprogress,10,100,20); timer = setInterval( function () { var oif = otext.value; otext.value = oif.substring(1); oright.innerHTML += arr[m]; m++; ocurrent.innerHTML = m; for ( var i = 0; i <ali.length; i++) { ali[i].style.background = 'yellow'; } ali[n].style.background = 'red'; n++; if( n == ali.length) { n = 0; } if( m == arr.length ) { clearInterval(timer); obtn.style.opacity = '1'; opacity(oprogress,10,0,20) } },50) } }; } </script> </head> <body> <div id="wrap"> <textarea id="left"></textarea> <div id="center"> <a href="javascript:" style="opacity:1;">把文字向右</a> <p> <span id="current"> 0 </span> / <span id="all"> 0 </span> </p> <ul id="progress"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="right"></div> </div> </body> </html>
function getstyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } function domove (obj,attr,step,frequency,target,endfn) { step = parseInt(getstyle(obj,attr))<target?step:-step; clearInterval(obj.timer); obj.timer = setInterval( function () { var speed = parseInt(getstyle(obj,attr)) + step; if(step>0&&speed>target||step<0&&speed<target) { speed = target; } obj.style[attr] = speed + 'px'; if( speed == target ) { clearInterval(obj.timer); endfn&&endfn(); } },frequency); }; function opacity(obj,step,target,frequency,endfn) { var currentOpacity = getstyle(obj,'opacity') * 100; step = currentOpacity < target?step:-step; clearInterval(obj.opacity) obj.opacity = setInterval (function () { currentOpacity = getstyle(obj,'opacity') *100; var nextOpacity = currentOpacity + step; if(step>0&& nextOpacity>target || step<0&& nextOpacity < target ) { nextOpacity = target; } obj.style.opacity = nextOpacity/100; obj.style.filter = 'alpha(opacity:)' + nextOpacity +')'; if(nextOpacity == target ) { clearInterval(obj.opacity); endfn&&endfn(); } },frequency); }; function shake(obj,attr,endfn) { if( obj.shaked ) { return; } obj.shaked = true; var num = 0; var timer = null; var arr = []; var pos = parseInt(getstyle(obj,attr)); for( var i = 20; i > 0; i-=2 ) { arr.push(i,-i); } arr.push(0); clearInterval(obj.shake); obj.shake = setInterval(function () { obj.style[attr] = pos + arr[num] +'px'; num++; if(num==arr.length) { clearInterval(obj.shake); endfn&&endfn(); obj.shaked = false; } },50); };