JavaScript数组与布尔值开关应用-CSDN博客

本文介绍了JavaScript中的数组，包括其定义、特点和操作方法，如`push()`方法。同时，探讨了布尔值开关的概念及其在实际操作中的应用，如用于控制元素颜色变化和下拉框的显示隐藏。通过布尔值进行条件判断，实现动态交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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].οnclick=function(){
		if(i>0){
			i--;
		}
		else{i=3}
		oImg.src=arr[i];
}
aBtn[1].οnclick=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.οnclick=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.οnclick=function(){
		oDiv.style.display=bOn?"block":"none";
		oInpt.value=bOn?"收回":"展示";
		bOn=!bOn;
}
</script>