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>
