1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>数组练习：各种数组方法的使用</title>
6 <style>
7 div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word;}
8 </style>
9 <script type="text/javascript">
10 window.onload = function ()
11 {
12 var aDiv = document.getElementsByTagName("div");
13 var aInput = document.getElementsByTagName("input");
14 var i = 0;
15 var bS1 = bS2 = true;
16 var aTmp = [];
17
18 //删除/添加第一项
19 aInput[0].onclick = function ()
20 {
21 aTmp = getArray(aDiv[0].innerHTML);
22 bS1 ?
23 //删除第一项， shift()方法
24 (aTmp.shift(), this.value = this.value.replace("删除","添加"), bS1 = false) :
25 //添加第一项, unshift()方法
26 (aTmp.unshift("January(1)"), this.value = this.value.replace("添加","删除"), bS1 = true);
27 //输出
28 aDiv[0].innerHTML = aTmp.join()
29 };
30
31 //删除/添加最后一项
32 aInput[1].onclick = function ()
33 {
34 aTmp = getArray(aDiv[0].innerHTML);
35 bS2 ?
36 //删除最后一项, pop()方法
37 (aTmp.pop(), this.value = this.value.replace("删除","添加"), bS2 = false) :
38 //添加最后一项, push()方法
39 (aTmp.push("December(12)"), this.value = this.value.replace("添加","删除"), bS2 = true);
40 //输出
41 aDiv[0].innerHTML = aTmp.join()
42 };
43
44 //复制, concat()方法
45 aInput[2].onclick = function ()
46 {
47 aTmp = getArray(aDiv[1].innerHTML);
48 //输出
49 aDiv[1].innerHTML = aTmp.concat(aTmp).toString().replace(/\s/g,"")
50 };
51
52 //还原, 利用数组的 length 特点
53 aInput[3].onclick = function ()
54 {
55 aTmp = getArray(aDiv[1].innerHTML);
56 //设置数组长度
57 aTmp.length = 10;
58 //输出
59 aDiv[1].innerHTML = aTmp.join()
60 };
61
62
63 //第三组数据还原
64 aInput[4].onclick = function ()
65 {
66 aTmp = ["red","green","blue","white","yellow","black","brown"];
67 //输出
68 aDiv[2].innerHTML = aTmp.join()
69 };
70
71 //删除前三项
72 aInput[5].onclick = function ()
73 {
74 aTmp = getArray(aDiv[2].innerHTML);
75 //删除, 0开始, 删除3个
76 aTmp.splice(0, 3);
77 //输出
78 aDiv[2].innerHTML = aTmp.join()
79 };
80
81 //删除第二至三项
82 aInput[6].onclick = function ()
83 {
84 aTmp = getArray(aDiv[2].innerHTML);
85 //删除, 2开始, 删除2个
86 aTmp.splice(1, 2);
87 //输出
88 aDiv[2].innerHTML = aTmp.join()
89 };
90
91 //在第二顶后插入"orange", "purple"
92 aInput[7].onclick = function ()
93 {
94 aTmp = getArray(aDiv[2].innerHTML);
95 //插入, 2开始, 插入"orange", "purple"
96 aTmp.splice(1, 0, "orange", "purple");
97 //输出
98 aDiv[2].innerHTML = aTmp.join()
99 };
100
101
102
103 //替换第二项和第三项
104 aInput[8].onclick = function ()
105 {
106 aTmp = getArray(aDiv[2].innerHTML);
107 //插入, 2开始替换
108 aTmp.splice(1, 2, "#009900", "#0000ff");
109 //输出
110 aDiv[2].innerHTML = aTmp.join()
111 };
112
113 //将div中的内容转为数组
114 //str div对象
115 function getArray(str)
116 {
117 aTmp.length = 0;
118 str = str.split(",");
119 for (var i in str)aTmp.push(str[i]);
120 return aTmp
121 }
122 }
123 </script>
124
125 </head>
126 <body>
127 <div>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div>
128 <input type="button" value="删除January(1)" />
129 <input type="button" value="删除December(12)" />
130 <div>0,1,2,3,4,5,6,7,8,9</div>
131 <input type="button" value="复制" />
132 <input type="button" value="还原" />
133 <div>red,green,blue,white,yellow,black,brown</div>
134 <input type="button" value="还原" />
135 <input type="button" value="删除前三项" />
136 <input type="button" value="删除第二至三项" />
137 <input type="button" value="在第二项后插入(orange, purple)" />
138 <input type="button" value="替换第二项和第三项" />
139 </body>
140 </html>
