（五） 数组

（五）  数组

（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>