js简单实现计算器+数组类

最新推荐文章于 2022-07-02 23:58:02 发布

聪明的王二狗

最新推荐文章于 2022-07-02 23:58:02 发布

阅读量565

点赞数 1

分类专栏： HTML+CSS+JS 文章标签： js javascript html css

本文链接：https://blog.csdn.net/w_xy999/article/details/104867440

版权

HTML+CSS+JS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章目录

js简单实现计算器

先来看效果：
在这里插入图片描述
按键功能和普通的计算器相同，%是取余运算（模运算）。

实现计算器时用到的新知识：

设置输入框只读，不能输入：加上属性 readonly=“readonly”
js函数的写法：function 函数名(参数名){函数体} ，因为js变量关键字只有var，所以参数不用写var
html的每一个标签可以看做一个类，在函数中获得标签对象用 document.getElementById(“标签id”) ，当然也可以把标签对象当做参数传入，标签调用这些函数，只需要在标签中添加属性：οnclick=“test(this)” ，（点击时调用test这个函数，把自己当做参数传进去）
把字符串当做一条指令的一部分执行：调用方法eval(字符串)即可。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style type="text/css">
			#showid{
				border:solid 1px;
				border-radius: 10px;
				width: 18.75rem;
				text-align: center;
				margin: auto;
				margin-top: 80px;
			}
			input[type=text]{
				margin-top: 10px;
				width: 240px;
				height: 80px;
				font-size: 30px;
				font-weight: bold;
			}
			input[type=button]{
				width:50px;
				height:50px;
				margin: 5px;
				font-size: 30px;
				font-weight: bold;
			}
		</style>
		<script type="text/javascript">
			/* 声明函数 */
			function test(btn){
				var num = btn.value;
				switch(num){
					case "=":
						document.getElementById("inp").value = eval(document.getElementById("inp").value);
						break;
					case "c":
						document.getElementById("inp").value = "";
						break;
					case "del":
						var len = document.getElementById("inp").value.length;
						document.getElementById("inp").value = document.getElementById("inp").value.substr(0,len-1);
						break;
					default:
						document.getElementById("inp").value = document.getElementById("inp").value+num;
						break;
				}
			}
			/* 调用函数 */
			//test();
			
		</script>
	</head>
	<body>
		<div id="showid">
			<input type="text" name="" id="inp" value="" readonly="readonly" /><br/>
			<input type="button" name="" id="" value="c" 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="del" onclick="test(this)"/>
			<br/>
			<input type="button" name="" id="" value="7" onclick="test(this)"/>
			<input type="button" name="" id="" value="8" onclick="test(this)"/>
			<input type="button" name="" id="" value="9" onclick="test(this)"/>
			<input type="button" name="" id="" value="-" onclick="test(this)"/>
			<br/>
			<input type="button" name="" id="" value="4" onclick="test(this)"/>
			<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="+" onclick="test(this)"/>
			<br/>
			<input type="button" name="" id="" value="1" 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="=" onclick="test(this)"/>
			<br/>
			<input type="button" name="" id="" value="%" onclick="test(this)"/>
			<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="=" onclick="test(this)"/>
			<br/>
		</div>
	</body>
</html>

常用数组操作方法

concat() :合并

作用：合并两个或多个数组。
用法：

var arr = [1,"abc","张三","12"];
var b = ["王二狗","大伟哥"];
var c = "js";
var d = arr.concat(b,c);

join():转化字符串

作用：将数组的内容合并成一个字符串并返回，用传入的符号做分隔符，默认是“，”
用法：

var b = arr.join("-");

pop() : 移除

作用：移除数组最后一个元素并返回值
用法：

var b = arr.pop();

push():添加

作用：在数组最后添加一个元素，并返回长度，元素可以是另一个数组（看做一个元素，即原数组长度加1）。
用法：

var b = arr.push("最后一个");

reverse() : 反转

作用：把数组的元素逆序排列。
用法：

var b = arr.reverse();

shift():移除

作用：移除数组第一个元素并返回值。
用法：

var b = arr.shift();

unshift():添加

作用：添加一个元素在数组第一个位置并返回长度，其他元素一次向后移一位。
用法：

var b = arr.unshift("第一个");

sort():排序

作用：将数组的元素按从小到大排序。
用法：

var b = arr.sort();

splice():移除

作用：移除指定位置的元素，如果需要，可以替换成指定的元素。
用法：

var b = arr.splice(1,3,"a");//"a"参数不写则仅移除下标1，2，3位置的元素

聪明的王二狗

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录