文字搬运工(依赖工具函数) 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <style type="text/css">
  7             *{
  8                 padding: 0;
  9                 margin: 0;
 10             }
 11             #box{
 12                 width: 800px;
 13                 height: 300px;
 14             }
 15             #box div{
 16                 display: inline-block;
 17             }
 18             #left,#right{
 19                 width: 300px;
 20                 height: 300px;
 21                 border: 1px solid #666;
 22                 vertical-align: top;
 23             }
 24             #left textarea{
 25                 width: 300px;
 26                 height: 300px;
 27             }
 28             #center{
 29                 width: 100px;
 30                 height: 300px;
 31                 vertical-align: top;
 32             }
 33             #progress span{
 34                 display: inline-block;
 35                 width: 15px;
 36                 height: 15px;
 37                 margin-right: 2px;
 38                 background: #66FFFF;
 39             }
 40             #progress span.active{
 41                 background: #0000FF;
 42             }
 43         </style>
 44         <script src="hl_tool.js" type="text/javascript" charset="utf-8"></script>
 45         <script type="text/javascript">
 46             window.onload = function(){
 47                 var oBox = hGetId('box');
 48                 var oLeft = hGetId('left');
 49                 var oCenter = hGetId('center');
 50                 var oRight = hGetId('right');
 51                 var oProgress = hGetId('progress');
 52                 var oBtn = hGetId('btn');
 53                 var oTotal = hGetId('total');
 54                 var aSpan = hGetTagName('span', oProgress);
 55                 var timer = null;
 56                 
 57                 oBtn.onclick = function(){
 58                     hOpacity(oProgress,1);
 59                     hShow(oProgress);
 60                     oRight.innerHTML = '';
 61                     var _this = this;
 62                     var sLeftLeng = hGetTagName('textarea', oLeft)[0].value.length;
 63                     _this.disabled = true;
 64                     var iNum = 0;
 65                     
 66                     timer = setInterval(function(){
 67                         
 68                         for (var i = 0; i < aSpan.length; i++) {
 69                             aSpan[i].className = '';
 70                         }
 71                         aSpan[iNum % aSpan.length ].className = 'active';
 72                         iNum++;
 73                         
 74                         var sLeft = hGetTagName('textarea', oLeft)[0].value;
 75                         oTotal.innerHTML = oRight.innerHTML.length+'/'+sLeftLeng;
 76                         var str = sLeft.charAt(0);
 77                         var newStr = sLeft.substring(1);
 78                         
 79                         hGetTagName('textarea', oLeft)[0].value = newStr;
 80                         oRight.innerHTML += str;
 81                         
 82                         if(sLeft.length === 0){
 83                             clearInterval(timer);
 84                             hFadeOut(oProgress,80);
 85                             hHide(oProgress);
 86                             
 87                             _this.disabled = false;
 88                         }
 89                         
 90                     },100);
 91                     
 92                     
 93                 }
 94             }
 95         </script>
 96     </head>
 97     <body>
 98         <div id="box">
 99             <div id="left">
100                 <textarea name="" rows="" cols="">新的冒险模式将在庇护之地全境展开——你可以传送到任何一幕场景的任何一个路标点。同时加入游戏的还有赏金任务和奈非天秘境两项新的功能，为游戏增加了无穷无尽的可再玩性。
101                 </textarea>
102             </div>
103             <div id="center">
104                 <input type="button" name="" id="btn" value="把文字右移" />
105                 <p id="total">0/0</p>
106                 <div id="progress"><span></span><span></span><span></span><span></span><span></span></div>
107             </div>
108             <div id="right"></div>
109         </div>
110     </body>
111 </html>

 

posted @ 2015-04-25 10:38  晚秋ing  阅读(259)  评论(1)    收藏  举报