JavaScript实现简易计算器

最新推荐文章于 2025-01-21 09:36:24 发布

怎么取名啊

最新推荐文章于 2025-01-21 09:36:24 发布

阅读量741

点赞数 3

分类专栏： web 文章标签： javascript css html5

本文链接：https://blog.youkuaiyun.com/weixin_46379561/article/details/120142139

版权

web 专栏收录该内容

9 篇文章

订阅专栏

完成样式

完成样式如图，计算器支持一般的加减乘除。

C：清屏
<-：退格
+/-：正负转换
H：历史记录（暂未完善）

在这里插入图片描述

实现函数和界面

此计算器中不包括历史记录，需要实现以下函数：

clickBtn()：用于传递当前按键值的函数。
display()：用于显示输入字符和显示结果的函数。
clearRes()：用于清空结果和已输入字符的函数。
backSpace()：用于实现退格操作的函数。
convert()：用于实现反转正负的函数。

在此计算器中，每一个按键都是一个div，数字按键、小数点按键和加减乘除按键都是用的同一个函数clickBtn()，区别就是传递的参数不同，对应按键传递对应的参数。
使用一个输入框display来显示所得结果，界面排布使用flex布局进行设置。

HTML界面代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#all {
				width: 400px;
				height: 650px;
				border: solid 1px black;
				margin: auto;
				border-radius: 5px;
				margin-top: 30px;
			}
			
			#top {
				height: 120px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			#bottom {
				height: 530px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;
			}
			
			#display {
				width: 370px;
				height: 75px;
				border: solid 1px black;
				border-radius:5px;
				font-size: 40px;
				text-align: right;
			}
			
			#btn {
				width: 80px;
				height: 80px;
				border: solid 1px black;
				flex-shrink: 0;
				border-radius:5px;
				font-size: 20px;
				margin: 7px;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
			
			#btn:hover {
				background-color: gainsboro;
			}
			
		</style>
	</head>
	<body>
		<div id="all">
			<div id="top">
				<input type="text" id="display">
			</div>
			<div id="bottom">
				<div id="btn" onclick="backSpace()">
					<-
				</div>
				<div id="btn" onclick="clearRes()">
					C
				</div>
				<div id="btn" onclick="convert()">
					+/-
				</div>
				<div id="btn" value="+" onclick="clickBtn('+')">
					+
				</div>
				
				
				<div id="btn" value="9" onclick="clickBtn('9')">
					9
				</div>
				<div id="btn" value="8" onclick="clickBtn('8')">
					8
				</div>
				<div id="btn" value="7" onclick="clickBtn('7')">
					7
				</div>
				<div id="btn" value="-" onclick="clickBtn('-')">
					-
				</div>
				
				
				<div id="btn" value="6" onclick="clickBtn('6')">
					6
				</div>
				<div id="btn" value="5" onclick="clickBtn('5')">
					5
				</div>
				<div id="btn" value="4" onclick="clickBtn('4')">
					4
				</div>
				<div id="btn" value="*" onclick="clickBtn('*')">
					x
				</div>
				
				
				<div id="btn" value="3" onclick="clickBtn('3')">
					3
				</div>
				<div id="btn" value="2" onclick="clickBtn('2')">
					2
				</div>
				<div id="btn" value="1" onclick="clickBtn('1')">
					1
				</div>
				<div id="btn" value="/" onclick="clickBtn('/')">
					÷
				</div>
				
				
				<div id="btn" value="0" onclick="clickBtn('0')">
					0
				</div>
				<div id="btn" value="." onclick="clickBtn('.')">
					.
				</div>
				<div id="btn">
					H
				</div>
				<div id="btn" onclick="display()">
					=
				</div>
			</div>
		</div> 
	</body>
</html>

全局变量

res：显示最终结果。
d：获取显示结果的输入框display对象。
res_x：显示用户输入的式子。

var res = "";
var d = document.getElementById("display");
var res_x = "";

计算结果

使用一个变量res和变量res_x来存储计算的式子和结果。使用者在点击不同按键时不断传递参数，res 不断与传进来的参数进行相加即字符串拼接并将结果输出在输入框display上，最后调用eval()方法计算最终结果把值输出在输入框display上。

res和res_x有何不同？他们两个都是用于计算结果的，可是在用户显示界面上，要想让乘号显示“ x ”而不是代码中的“ * ”（除号同理），所以需要res_x变量来用于存放该显示给用户的字符串，而真正用于计算结果的还是变量res。

代码如下：

function clickBtn(nums) {	
				res = res + nums;
				if(nums == '*') {
					nums = 'x';
				}
				if(nums == '/') {
					nums = '÷';
				}
				res_x = res_x + nums;
				d.value = res_x;
			}

显示结果

显示结果只需调用eval方法并将结果输出至输入框即可。代码如下：

function display() {
				d.value = eval(res);
				res = "";
				res_x = "";
			}

清屏

清屏功能只需要将res和res_x清空，再将结果输出至输入框。代码如下：

function clearRes() {
				 res = "";
				 res_x = "";
				 d.value = res_x;
			}

退格

退格功能只需使用substring方法，截取从下标0到res.length - 1的长度的字符串，然后覆盖原先的res。代码如下：

function backSpace() {
				res = res.substring(0,res.length - 1);
				res_x = res_x.substring(0,res_x.length - 1);
				d.value = res_x;
			}

正负反转

正负反转功能只需将结果乘以-1并输出至输入框。代码如下：

function convert() {
				res = res * (-1);
				d.value = res;
			}

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#all {
				width: 400px;
				height: 650px;
				border: solid 1px black;
				margin: auto;
				border-radius: 5px;
				margin-top: 30px;
			}
			
			#top {
				height: 120px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			#bottom {
				height: 530px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;
			}
			
			#display {
				width: 370px;
				height: 75px;
				border: solid 1px black;
				border-radius:5px;
				font-size: 40px;
				text-align: right;
			}
			
			#btn {
				width: 80px;
				height: 80px;
				border: solid 1px black;
				flex-shrink: 0;
				border-radius:5px;
				font-size: 20px;
				margin: 7px;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
			
			#btn:hover {
				background-color: gainsboro;
			}
			
		</style>
	</head>
	<body>
		<div id="all">
			<div id="top">
				<input type="text" id="display">
			</div>
			<div id="bottom">
				<div id="btn" onclick="backSpace()">
					<-
				</div>
				<div id="btn" onclick="clearRes()">
					C
				</div>
				<div id="btn" onclick="convert()">
					+/-
				</div>
				<div id="btn" value="+" onclick="clickBtn('+')">
					+
				</div>
				
				
				<div id="btn" value="9" onclick="clickBtn('9')">
					9
				</div>
				<div id="btn" value="8" onclick="clickBtn('8')">
					8
				</div>
				<div id="btn" value="7" onclick="clickBtn('7')">
					7
				</div>
				<div id="btn" value="-" onclick="clickBtn('-')">
					-
				</div>
				
				
				<div id="btn" value="6" onclick="clickBtn('6')">
					6
				</div>
				<div id="btn" value="5" onclick="clickBtn('5')">
					5
				</div>
				<div id="btn" value="4" onclick="clickBtn('4')">
					4
				</div>
				<div id="btn" value="*" onclick="clickBtn('*')">
					x
				</div>
				
				
				<div id="btn" value="3" onclick="clickBtn('3')">
					3
				</div>
				<div id="btn" value="2" onclick="clickBtn('2')">
					2
				</div>
				<div id="btn" value="1" onclick="clickBtn('1')">
					1
				</div>
				<div id="btn" value="/" onclick="clickBtn('/')">
					÷
				</div>
				
				
				<div id="btn" value="0" onclick="clickBtn('0')">
					0
				</div>
				<div id="btn" value="." onclick="clickBtn('.')">
					.
				</div>
				<div id="btn">
					H
				</div>
				<div id="btn" onclick="display()">
					=
				</div>
			</div>
		</div> 
		<script type="text/javascript">
			var res = "";
			var d = document.getElementById("display");
			var res_x = "";
			function clickBtn(nums) {	
				res = res + nums;
				if(nums == '*') {
					nums = 'x';
				}
				if(nums == '/') {
					nums = '÷';
				}
				res_x = res_x + nums;
				d.value = res_x;
			}
			
			function display() {
				d.value = eval(res);
				res = "";
				res_x = "";
			}
			
			function clearRes() {
				 res = "";
				 res_x = "";
				 d.value = res_x;
			}
			
			function backSpace() {
				res = res.substring(0,res.length - 1);
				res_x = res_x.substring(0,res_x.length - 1);
				d.value = res_x;
			}
			
			function convert() {
				res = res * (-1);
				d.value = res;
			}
		</script>
	</body>
</html>