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>