（五）数组

最新推荐文章于 2026-05-26 11:51:05 发布

原创最新推荐文章于 2026-05-26 11:51:05 发布 · 483 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

（五）数组

（1）下来列表框的级联

下拉列表框的属性：

length 可读可写 length = 0 表示对选项清空

value

options 下拉列表框的所有值的集合

selectedIndex 选中的列的索引从 0 开始

<select id="sel">
	<option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

var sel = document.getElementById("sel");
//获取下拉列表框的选项数量
var length = sel.length;
//该属性为可写属性
//sel.length = 1;
//alert(length);
//获取下拉列表的所有选项
var opts = sel.options;
//获取指定索引的选项对象，获取标签的文本值
//alert(opts[0].text);
//获取value值
//alert(opts[0].value);
//添加新的选项
//opts.add(new Option("D","c"));
//删除选项，根据索引删除
//opts.remove(1);

sel.onchange = function(){
	//alert(sel.value);	
	//获取选项的索引
	//alert(sel.selectedIndex);
	//获取选中的项
	//sel.options[sel.selectedIndex]
}

往下拉列表框添加数据

new Option("显示的内容","value值");
sel.options.add(Option对象);

数组创建方式

1）var array = new Array();

array[0] = "A";

array[1] = "B";

2）var array = new Array("A","B","C")；

3）var array = ["A","B","C"];

二维数组
array[0] = ["A","B","C"];

array[1] = ["A","B","C"];

遍历数组和java相同

<script>
//创建数组
//var array = new Array();
//array[0] = "A";
//array[1] = "B";
//array["c"] = "C";
//alert(array[2]);
//alert(array.length);
//var array = new Array("A","B","C");
//var array = ["A","B","C"];
//alert(array[1]);
var array = new Array();
array[0] = ["a","b","c"];
array[1] = ["A","B","C"];
//遍历
for(var i = 0; i < array.length; i++){
	for(var j = 0; j < array[i].length; j++){
		document.write(array[i][j]);	
	}	
	document.write("<br>");
}
</script>

数组的方法

sort 顺序排序

reverse 反转内容

join（string）将数组中的元素连接成字符串

concat（array1,array2）将两个字符串合并成一个数组要用变量来接收合并的数组

slice(start,end) 截取数组

<select id="provice">
	<option value="0">--选择省份--</option>
    <option value="1">江苏</option>
    <option value="2">浙江</option>
    <option value="3">山东</option>
</select>
<select id="city">
	<option>--选择城市--</option>
</select>
<script>
var provice = document.getElementById("provice");
var city = document.getElementById("city");
//创建存储所有城市的数组
var cityArray = new Array();
cityArray[0] = ["苏州","南京","无锡"];
cityArray[1] = ["杭州","温州","嘉兴"];
cityArray[2] = ["济南","青岛","烟台"];
var valueArray = new Array();
valueArray[0] = ["suzhou","nanjing","wuxi"];
valueArray[1] = ["hangzhou","wenzhou","jiaxing"];
valueArray[2] = ["jinan","qingdao","yantai"];
//添加选项更改事件
provice.onchange = function(){
	//清空城市列表
	city.length = 1;
	//获取选中的省份
	//var value = provice.value;
	//switch(value){
//	case "1":
//		//为城市下拉列表添加选项
//		city.options.add(new Option("南京","nanjing"));
//		city.options.add(new Option("苏州","suzhou"));
//		city.options.add(new Option("无锡","wuxi"));
//		break;
//	case "2":
//		//为城市下拉列表添加选项
//		city.options.add(new Option("杭州","hangzhou"));
//		city.options.add(new Option("嘉兴","jiaxing"));
//		city.options.add(new Option("温州","wenzhou"));
//		break;
//	}
	//获取省份选中的索引
	var index = provice.selectedIndex;
	if(index != 0){
		//根据索引对城市数组进行遍历，添加选项
		for(var i = 0; i < cityArray[index-1].length; i++){
			city.options.add(new Option(cityArray[index-1][i],valueArray[index-1][i]));
		}
	}
	
}
city.onchange = function(){
	alert(city.value);	
}
</script>

获取随机数

var num = Math.random()

//var array = new Array("C","B","A");
//排序
//array.sort();
//反转
//array.reverse();
//将数组中的元素连接成字符串
//var s = array.join("#");
//alert(s);
//拼接数组
//array = array.concat(new Array("a","b","c"));
//截取数组
//array = array.slice(0,1);
//alert(array);
function removeArray(array,value){
	//遍历数组，获取要删除的元素的索引
	var index = -1;
	for(var i = 0; i < array.length; i++){
		if(array[i] == value){
			 index = i;
			 break;
		}	
	}
	//判断要删除的数是否存在
	if(index != -1){
		//截取要删除元素的前后部分的数组内容
		var beforeArray = array.slice(0,index);
		var afterArray = array.slice(index+1);
		//拼接数组
		array = beforeArray.concat(afterArray);
	}
	return array;
}

其他效果

border- radius 设置角的弧度

box-shadow 设置背影

无缝滚动

判断滚动条是否滚动到第二个列的起始位置，即第一个列的宽长度。

实现无缝滚动，要用到overflow：hidden 样式，同时的列的内容要多于列的宽度，中文不让它换行，要使用white-space:nowrap

第二个列的内容要和第一个列的内容一致

<div id="div" style="width:150px; background-color:#333; color:white; overflow:scroll;">
	<table cellpadding="0" cellspacing="0">
    	<tr>
        	<td id="td1" >asdfasdfasdfasdfasdfasdasdfsadfZ0</td>
            <td id="td2" >asdfasdfasdfasdfasdfasdasdfsadfZ0</td>
        </tr>
    </table>
</div>

<script>
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
var div = document.getElementById("div");
//控制滚动条
//div.scrollLeft = 20;
//获取列的宽度
//alert(td1.clientWidth);
function move(){
	//判断当前滚动条是否滚动至第二个列的起始位置，即第一个列的列宽长度
	if(div.scrollLeft == td1.clientWidth){
		//回滚至起点
		div.scrollLeft = 0;
	}	
	else{
		//每次移动1像素
		div.scrollLeft = div.scrollLeft+1;
		
	}
	//反复移动滚动条
	window.setTimeout("move()",100);	
}
move();
</script>

图层的旋转

通过transform:rotate(0deg)修改里面的值来进行图层的旋转

<div id="div" style="border:1px solid black; background-color:orange; width:200px; height:200px; -webkit-border-radius:10px 10px;-webkit-transform:rotate(0deg); opacity:0.8; margin-top:50px; margin-left:50px"></div>
<script>
var i = 0;
var div = document.getElementById("div");
function change(){
	div.style.webkitTransform = "rotate("+i+"deg)";
	i+=1;
	setTimeout("change()",1);
}
change();
</script>