【fgm.cc练习4-7】各种数组方法的使用

最新推荐文章于 2019-12-14 17:59:42 发布

denguing

最新推荐文章于 2019-12-14 17:59:42 发布

阅读量240

点赞数

分类专栏： fgm.cc 文章标签： HTML css JavaScript

本文链接：https://blog.csdn.net/DGT4720/article/details/103350315

版权

fgm.cc 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

练习地址：http://www.fgm.cc/learn/lesson4/07.html
在这里插入图片描述
知识点都在注释里啦！就简单的几个常用的数组方法。

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>数组练习：各种数组方法的使用</title>
	<link rel="stylesheet" type="text/css" href="7_array.css">
</head>
<body>
	<p>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</p>
	<input type="button" value="删除January(1)">
	<input type="button" value="删除December(12)">
	<p>0,1,2,3,4,5,6,7,8,9</p>
	<input type="button" value="复制">
	<input type="button" value="还原">
	<p>red,green,blue,white,yellow,black,brown</p>
	<input type="button" value="还原">
	<input type="button" value="删除前三项">
	<input type="button" value="删除第二至三项">
	<input type="button" value="在第二项后插入（orange，purple）">
	<input type="button" value="替换第二项和第三项">
	<script type="text/javascript" src="7_array.js"></script>
</body>
</html>

CSS

p {
	color: green;
	border: 1px dotted black;
	background: #EDEDED;
	padding: 7px 20px;
	font-size: 14px;
}

JavaScript

// 三个数组用来获取并存储p里面的数组
var array1=[],
	array2=[],
	array3=[];
window.onload = function() {
	var input = document.getElementsByTagName("input");
	var p = document.getElementsByTagName("p");

	// 分割得到数组，getArray方法没用？
	array1 = p[0].innerHTML.split(",");
	array3 = p[2].innerHTML.split(",");
	// 备用还原数组3
	array3Copy = p[2].innerHTML.split(",");

	input[0].onclick = function() {
		if(this.value == "删除January(1)"){
			this.value = "添加January(1)";
			// 头删除
			array1.shift();
			p[0].innerHTML = array1;
		}else{
			this.value = "删除January(1)";
			// 头添加
			array1.unshift("January(1)");
			p[0].innerHTML = array1;
		}
	}

	input[1].onclick = function() {
		if(this.value == "删除December(12)"){
			this.value = "添加December(12)";
			// 尾删除
			array1.pop();
			p[0].innerHTML = array1;
		}else{
			this.value = "删除December(12)";
			// 尾添加
			array1.push("December(12)");
			p[0].innerHTML = array1;
		}
	}

	input[2].onclick = function() {
		// 实时获取
		array2 = p[1].innerHTML.split(",");	
		// 复制	
		p[1].innerHTML = array2 + ","+array2;
	}

	input[3].onclick = function() {
		// 还原，只取前10
		p[1].innerHTML = array2.splice(0,10);
	}

	input[4].onclick = function() {
		// 还原HTML里面的和array3
		p[2].innerHTML = array3Copy;
		array3 = array3Copy;
	}

	input[5].onclick = function() {
		// 删除
		var deleteArray = array3.splice(0,3);
		p[2].innerHTML = array3;
	}

	input[6].onclick = function() {
		var deleteArray = array3.splice(1,2);
		p[2].innerHTML = array3;
	}

	input[7].onclick = function() {
		// 这里有点不同，第一个参数是指第几个数组成员，而不是下标
		array3.splice(2,0,"orange,purple");
		p[2].innerHTML = array3;
	}

	input[8].onclick = function() {
		array3.splice(1,2,"#009900,#0000ff");
		p[2].innerHTML = array3;
	}
}