zoukankan      html  css  js  c++  java
  • 04-js的数组和计算器案例及其常用操作

    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;/*设置边框角度*/
    				 320px;
    				height:400px;
    				text-align: center;
    				margin: auto;/*设置居中*/
    				margin-top: 50px;
    				background-color: floralwhite;	
    			
    				
    			}
    		/*设置输入框样式*/
    			input[type=text]{
    				margin-top: 20px;
    				 290px;
    				height: 40px;
    				font-size: 20px;
    				
    			}
    		/*设置按钮样式*/
    			input[type=button]{
    				 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>
    

      

  • 相关阅读:
    转换时间对象和字符串对象&添加时间
    jquery深入学习17-2-19
    jquery深入学习
    java上传附件含有%处理或url含有%(URLDecoder: Illegal hex characters in escape (%) pattern
    数据库备份脚本(整库备份)
    docker 利用maven插件推送镜像
    排序算法对比分析图
    Java计算时间差、日期差总结
    百度地图计算点是否在园,正方形,多边形范围内。电子围栏
    java maven docker-maven-plugin 结合Dockerfile 构建 docker image 并上传到docker server
  • 原文地址:https://www.cnblogs.com/wcyMiracle/p/12411317.html
Copyright © 2011-2022 走看看