04-js的数组和计算器案例及其常用操作
Posted 胡辣汤王子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;/*设置边框角度*/
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的数组和计算器案例及其常用操作的主要内容，如果未能解决你的问题，请参考以下文章