js的数组,布尔值开关

js的数组

1.数组:数组就是一组数据的集合,其表现形式就是内存中的一段连续的内存地址,数组名称其实就是连续内存地址的首地址。

(1) 数组变量var arr = [];

(2) 数组是数据的仓库,length为数组数据的数量

(3)["第一个数据","第二个数据","第三个数据"]

(4) arr[下标]为数组下标位置的数据(从0开始)

(5)arr.push("第四个数据")向数组最后一位后添加数据

用标签名获取元素:document.getElementsByTagName("");

特点:数组定义时无需指定数据类型,数组定义时可以无需指定数组长度,数组可以存储任何数据类型的数据。

练习1:用数组做一个图片控制左右按钮来进行切换

<input type="button" value="左"/>
<input type="button" value="右"/></br>
<img src="1.png" width="400" height="300"/>
<script>
var arr=["1.png","2.png","3.png","4.png"]
var aBtn=document.getElementsByTagName("input");
var oImg=document.getElementsByTagName("img")[0];
var i=0;
aBtn[0].onclick=function(){
		if(i>0){
			i--;
		}
		else{i=3}
		oImg.src=arr[i];
}
aBtn[1].onclick=function(){
	if(i<3){
		i++;
	}
	else{i=0}
	oImg.src=arr[i];
}
</script>

布尔值开关

布尔值就是true和false

关于一些布尔值开关的练习:

练习1:通过布尔值开关来改变颜色。

<div id="div1"></div>
<script>
var oDiv=document.getElementById("div1");
var Bon=true;
oDiv.onclick=function(){
	Bon?oDiv.style.backgroundColor="blue":oDiv.style.backgroundColor="red";
	Bon=!Bon;
	}
</script>

这个就是当点击div 块的时候,让它的颜色有红色变为蓝色,这时候我们需要对颜色来判断,让它是红色的时候改变它的颜色变为蓝色就可以了,蓝色时在变回红色,但是却不能直接通过颜色值来进行判断,这时候我们就可以,使用布尔值开关来进行判断。设置一个开关让它的布尔值为ture,然后判断布尔值的真假就可以了。


练习2:做一个下拉框,让它点击时相应的展开隐藏。

<input type="button" value="展示"/>
<div></div>
<script>
var oDiv=document.getElementsByTagName("div")[0];
var oInpt=document.getElementsByTagName("input")[0];
var bOn=true;
oInpt.onclick=function(){
		oDiv.style.display=bOn?"block":"none";
		oInpt.value=bOn?"收回":"展示";
		bOn=!bOn;
}
</script>
                                                                             

猜你喜欢

转载自blog.csdn.net/lemonnomel1/article/details/80384980