码迷,mamicode.com
首页 > 编程语言 > 详细

04-js的数组和计算器案例及其常用操作

时间:2020-03-04 19:17:19      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:efault   case   readonly   20px   个数   spl   concat   用户   define   

js的数组学习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js的数组学习</title>
		<!--
			js的数组学习:
				1、数组的声明
					var arr=new Array();//声明一个空数组对象
					var arr=new Array(length)//声明一个指定长度的数组
					var arr=[元素]//声明数组(最常用);<br />
					注意:js中的数组声明不用指定长度,js的数组长度是不固定的,会随着元素的数量改变而改变。
				2、数组的赋值和取值
					数组可以存储任意类型的数据
						数组名[角标]=值;//角标可以是任意的正整数或者是0
					数组的取出:
						数组名[角标]//返回当前角标对应存储的值
						如果角标不存在,返回undefined;
				3、数组的length属性
					作用1:数组名.length//返回当前数组的长度。
					作用于2:数组名.length=新的值//动态的改变数组的长度
						  注意:length>原有长度,则使用空进行填充。
						    length<原有长度,则从后面进行截取,最后的数据会被删除。
				4、数组的遍历
					普通for循环:
						for(var i=0;i<arr.length;i++){
							alert(arr[i]);
						}
					for-in:
						for(var i in arr){
							alert(i);//获取的是角标
						}
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//1、js的数组声明
				/*var arr1=new Array();//第一种声明方式
				arr1[0]="abc";
				alert(arr1);
				var arr2=new Array(5);//第二种声明
				alert(arr2.length);
				var arr3=[1,2,3,4,5];
				alert(arr3);*/
			//2、数组的赋值和取值
				//声明数组
					/*var  arr=[];
					arr[0]=2;
					arr[1]="abc";
					arr[2]=true;
					arr[3]=new Date();
					arr[10]="哈哈";
					alert(arr);
					alert(arr[14]);*/
			//3、数组的length属性
					/*var arr=[1,2,3,4,5,6];
					alert(arr.length);
					arr.length=8;
					alert(arr.length);
					arr[2]="abc";
					alert(arr);
					arr.length=3;
					alert(arr);*/
			//4、数组的遍历
				var arr=[1,"bnj",3,"a",4];
				alert(arr);
				//遍历1
				/*for(var i=0;i<arr.length;i++){
					alert(arr[i]);
				}*/
				//遍历2:
					for(var i in arr){
						alert(i);//获取的是角标
					}
		</script>
	</head>
	<body>
		<h3>js的数组学习</h3>
	</body>
</html>

  

计算器案例:

<html>
	<head>
		<title>计算器</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
		/*设置div样式*/
			#showdiv{
				border:  solid 1px;
				border-radius: 10px;/*设置边框角度*/
				width: 320px;
				height:400px;
				text-align: center;
				margin: auto;/*设置居中*/
				margin-top: 50px;
				background-color: floralwhite;	
			
				
			}
		/*设置输入框样式*/
			input[type=text]{
				margin-top: 20px;
				width: 290px;
				height: 40px;
				font-size: 20px;
				
			}
		/*设置按钮样式*/
			input[type=button]{
				width: 60px;
				height: 60px;
				margin-top: 20px;
				margin-left: 5px;
				margin-right: 5px;
				font-size: 30px;
				font-weight: bold;
				font-family: "萝莉体 第二版";
			}  
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//声明函数
			function test(btn){
				//获取button按钮对象的value值
				var num=btn.value;
				//根据用户点击动作执行对应的业务逻辑
				switch (num){
					case "=":
						document.getElementById("inp").value=eval(document.getElementById("inp").value);
						break;
					case "c":
						document.getElementById("inp").value="";
						break;
					default:
						//将按钮的值赋值给input输入框
						document.getElementById("inp").value=document.getElementById("inp").value+num;
						break;
				}
			}
		</script>
	</head>
	<body>
		<div id="showdiv">
			<input type="text" name="" id="inp" value="" readonly="readonly"/><br />
			<input type="button" name="" id="btn" value="1"value="" onclick="test(this)"/>
			<input type="button" name="" id="" value="2" onclick="test(this)"/>
			<input type="button" name="" id="" value="3" onclick="test(this)"/>
			<input type="button" name="" id="" value="4" onclick="test(this)"/><br />
			<input type="button" name="" id="" value="5" onclick="test(this)"/>
			<input type="button" name="" id="" value="6" onclick="test(this)"/>
			<input type="button" name="" id="" value="7" onclick="test(this)"/>
			<input type="button" name="" id="" value="8" onclick="test(this)"/><br />
			<input type="button" name="" id="" value="9" onclick="test(this)"/>
			<input type="button" name="" id="" value="+" onclick="test(this)"/>
			<input type="button" name="" id="" value="-" onclick="test(this)"/>
			<input type="button" name="" id="" value="*" onclick="test(this)"/><br />
			<input type="button" name="" id="" value="0" onclick="test(this)"/>
			<input type="button" name="" id="" value="/" onclick="test(this)"/>
			<input type="button" name="" id="" value="c" onclick="test(this)"/>
			<input type="button" name="" id="" value="=" onclick="test(this)"/>
		</div>
	</body>
</html>

  

 

常用操作:

<html>
	<head>
		<title>js数组的常用操作</title>
		<meta charset="UTF-8"/>
		<!--
			数组的操作学习:
				1、数组的合并:arr.concat(b,c);//数组的合并
				2、数组指定间隔符转换字符串:var b=arr.join("-");
				3、数组移除最后一个元素并返回:var ele=arr.pop();
				4、数组的追加,返回新的长度:var ln=arr.push("lol");//追加的元素可以是一个数组,但是为作为一个角标值存在
				5、数组的移除第一个元素:var ele=arr.shift();
				6、数组的在开始位置插入指定元素:var a=arr.unshift("又是周五了");
				7、数组删除指定位置元素:var arr2=arr.splice(1,3,"a");
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			/*声明数组*/
			var arr=[1,"abc","张三","12"];
			/*数组的操作*/
				/*var b=["今天天气不错","适合学习"];
				var c="js";
				var d=arr.concat(b,c,c);//数组的合并
				alert(d);
				alert(d.length);*/
			/*数组指定间隔符转换字符串*/
				/*var b=arr.join("-");
				alert(typeof b);*/
			/*数组移除最后一个元素并返回*/
				/*var ele=arr.pop();
				alert(ele);*/
			/*数组的追加*/
//				var ln=arr.push("lol");
//				var ln2=arr.push(["66",77]);
//				alert(arr);
			/*数组的移除第一个元素*/
//				var ele=arr.shift();
//				alert(ele);
//				alert(arr);
			/*数组的在开始位置插入指定元素*/
//				var a=arr.unshift("又是周五了");
//				alert(a);
			/*数组删除指定位置元素*/
				var arr2=arr.splice(1,3,"a");
				alert(arr);
	</script>
	</head>
	<body>
		<h3>js数组的常用操作</h3>
	</body>
</html>

  

04-js的数组和计算器案例及其常用操作

标签:efault   case   readonly   20px   个数   spl   concat   用户   define   

原文地址:https://www.cnblogs.com/wcyMiracle/p/12411317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!