<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>数组练习：各种数组方法的使用_www.jb200.com</title>
<style>
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;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var adiv = document.getelementsbytagname("div");
var ainput = document.getelementsbytagname("input");
var i = 0;
var bs1 = bs2 = true;
var atmp = [];
//js数组删除/添加第一项
ainput[0].onclick = function ()
{
atmp = getarray(adiv[0].innerhtml);
bs1 ?
//删除第一项， shift()方法
(atmp.shift(), this.value = this.value.replace("删除","添加"), bs1 = false) :
//添加第一项, unshift()方法
(atmp.unshift("january(1)"), this.value = this.value.replace("添加","删除"), bs1 = true);
//输出
adiv[0].innerhtml = atmp.join()
};
//删除/添加最后一项
ainput[1].onclick = function ()
{
atmp = getarray(adiv[0].innerhtml);
bs2 ?
//删除最后一项, pop()方法
(atmp.pop(), this.value = this.value.replace("删除","添加"), bs2 = false) :
//添加最后一项, push()方法
(atmp.push("december(12)"), this.value = this.value.replace("添加","删除"), bs2 = true);
//输出
adiv[0].innerhtml = atmp.join()
};
//复制, concat()方法
ainput[2].onclick = function ()
{
atmp = getarray(adiv[1].innerhtml);
//输出
adiv[1].innerhtml = atmp.concat(atmp).tostring().replace(/s/g,"")
};
//还原, 利用数组的 length 特点
ainput[3].onclick = function ()
{
atmp = getarray(adiv[1].innerhtml);
//设置
数组长度
atmp.length = 10;
//输出
adiv[1].innerhtml = atmp.join()
};
//第三组数据还原
ainput[4].onclick = function ()
{
atmp = ["red","green","blue","white","yellow","black","brown"];
//输出
adiv[2].innerhtml = atmp.join()
};
//删除前三项
ainput[5].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//删除, 0开始, 删除3个
atmp.splice(0, 3);
//输出
adiv[2].innerhtml = atmp.join()
};
//删除第二至三项
ainput[6].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//删除, 2开始, 删除2个
atmp.splice(1, 2);
//输出
adiv[2].innerhtml = atmp.join()
};
//在第二顶后插入"orange", "purple"
ainput[7].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//插入, 2开始, 插入"orange", "purple"
atmp.splice(1, 0, "orange", "purple");
//输出
adiv[2].innerhtml = atmp.join()
};
//替换第二项和第三项
ainput[8].onclick = function ()
{
atmp = getarray(adiv[2].innerhtml);
//插入, 2开始替换
atmp.splice(1, 2, "#009900", "#0000ff");
//输出
adiv[2].innerhtml = atmp.join()
};
//将div中的内容转为数组
//str div对象
function getarray(str)
{
atmp.length = 0;
str = str.split(",");
for (var i in str)atmp.push(str[i]);
return atmp
}
}
</script>
</head>
<body>
<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>
<input type="button" value="删除january(1)" />
<input type="button" value="删除december(12)" />
<div>0,1,2,3,4,5,6,7,8,9</div>
<input type="button" value="复制" />
<input type="button" value="还原" />
<div>red,green,blue,white,yellow,black,brown</div>
<input type="button" value="还原" />
<input type="button" value="删除前三项" />
<input type="button" value="删除第二至三项" />
<input type="button" value="在第二项后插入(orange, purple)" />
<input type="button" value="替换第二项和第三项" />
</body>
</html>
