JavaScript实现简易计算器

最新推荐文章于 2023-10-25 11:53:01 发布
最新推荐文章于 2023-10-25 11:53:01 发布
阅读量595 收藏 17
点赞数 3
分类专栏： web 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46379561/article/details/120142139
版权

完成样式

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

  • 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>
怎么取名啊
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在JavaScript中使用开平方根的sqrt()方法
10-24
主要介绍了在JavaScript中使用开平方根的sqrt()方法,是JS入门学习中的基础知识,需要的朋友可以参考下
js实现计算器，附思考过程。
returnadsss的博客
01-15 1277
今天的目的是做一个功能最全的计算器，按计划进行！ 界面用之前构思好的代码直接复用。 先理清思路： 1、数字（包括00）11个，（严格来说应该如果在一个运算结果出来后输入数据，则忽略运算结果，重新开始计算，这可以定义一个flag变量，但这里略去）。 2、运算符（包括%）5个，如果第一个输入的是运算符，则除了-号其它全部忽略，如果运算符前面别的合法表达式，则直接将 其计算出来，如果运算符前面是别的运算符，则用该运算符覆盖前面的运算符。 3、操作符（包括退格，等号，清零，小数点）4个，如果在等号前是一个运算符，则
审查元素找不到创建的元素_审查元素实操之去除优酷水印
weixin_39955829的博客
11-30 3027
今天我们学习的内容是Document 对象和forEach循环函数我们用到的是document.querySelectorAll(".spv-logo").forEach(function(item,index,arr){item.style.display='none';});接下来我们来逐段剖析这段代码每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我...
计算器运算逻辑实现（带括号，求余，乘方，加减乘除），不使用eval函数-前端JavaScript 源码实现——括号匹配与初等运算。
最新发布
qq_51165365的博客
10-25 210
1，实现计算归纳2，整体运算逻辑3，括号匹配与去括号4，数字分割与初等混合运算5，运算符的顺序6，JS源码实现效果展示。
[问题探讨]js不使用eval实现加减乘除运算，对标微信小程序等不支持eval的环境
tom_wong666
06-25 469
举例： 用户输入字符串1＋1×2-2÷1，需要计算出结果 分析： 1，在支持eval的环境中只需要replace用户输入的＋-×÷为js运算符关键词+ -*/，然后传入eval函数中就可以得到结果 2，不支持eval的环境，比如微信小程序，有如下几个问题： (1)一次只能进行加减乘除的任一计算 (2)需要把非运算符的字符串独立拆出来，并转为number (3)处理逐一运算造成的，对运算优先级的不支持，比如1+1*2=3，逐一运算的结果却是4 处理思路： 代码不方便贴，这里只列出已经走通的处理逻辑 (可以用微
用“Function“替代“eval“进行动态代码生成
Dpl0216的博客
06-07 438
在需要使用到动态代码生成的时候，我们有两个方法："eval"与"Function"，推荐使用Function构造函数，不止因为他在安全、可维护性上优秀于Eval，并且在严格模式下能够使用with语法
html+css+js实现科学计算器
findhappy117的博客
09-20 9433
代码地址如下：http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器，支持平方开方指数对数等基本函数，支持键盘输入，有简单和高级两种模式 文件结构 纯html+css+js实现，文件结构非常简单，就三个文件。 演示效果 实验设计 将按钮的value设置为按钮显示的字符，当点击按钮的时候，输入框增加的字符为按...
微信小程序使用math.js制作计算器
DayDayUp
05-10 6010
由于微信小程序不支持eval函数对数学表达式进行解析，所以需要另辟蹊径，而math.js数学库正好可以解决此类问题，并且功能强大。 微信小程序官方文档 Math.js是一个用于JavaScript和Node.js的扩展数学库 它提供了一个灵活的表达式解析器,支持符号计算,提供了大量的内置函数和常量,并提供了一个集成的解决方案来处理不同的数据类型,如数字 大数 复数 分数 单位和矩阵 强大和易于使用 （强烈建议在官网上学习） 官网地址：https://mathjs.org/...
javascript 模拟退格键_JavaScript —— 实现简单计算器【带有 开/关机 清零 退格 功能】...
weixin_29645033的博客
01-17 631
Calculator*{border:none;margin:0;padding:0;}body{}.center{background-color:#fff;border-radius:50%;height:800px;margin:auto;width:800px;}h1{color:#495678font-size: 30px;margin-top:20px;padding-top:50px...
JavaScript实现算术平方根算法-代码超简单
10-23
实现算术平方根的方法有很多种，本文是通过JavaScript实现的算术平方根算法，代码超简单，超管用，感兴趣的朋友跟着脚本之家的小编一起学习吧
js实现模拟计算器退格键删除文字效果的方法
01-19
本文实例讲述了js实现模拟计算器退格键删除文字效果的方法。分享给大家供大家参考。具体如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>无标题
javascript实现简易计算器
12-11
简易加减乘除计算器，利用表单的value值取值，用原生js实现.可直接复制到编辑器，打开即可运行. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>加减乘除计算器</...
javascript实现简易计算器功能
10-14
主要为大家详细介绍了javascript实现简易计算器功能，实现四则运算，小数点，回退，归0等功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现简易计算器小功能
01-21
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> &...
JavaScript实现计算器（菜鸟狗头保命）
小虫虫的博客
12-23 650
JavaScript 计算器一、实现功能二、展示1.代码展示2.效果展示3.总结 一、实现功能 （1）利用css样式、javascript语言和html语言实现计算器的算法 （2）对计算器的页面进行规划以及对界面进行颜色的填涂 （3）对界面各个边框边距进行适当的调整 二、展示 1.代码展示 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
JS——实现简单计算器
weixin_52148548的博客
02-18 570
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
Javascript 不用 eval 实现计算器功能
蒲公英芽的博客
12-30 3111
先来看下最终效果，鼠标点击数字、运算符，计算出结果。 布局采用的标签是 div ，下面是布局代码 <div id="show_course"></div> <div id="show_result">0</div> <div id="num_area"> <div>1</div> ...
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1947
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
【JavaScript】获取多项数组的交集
iuukai
10-14 723
注意： 1. 不支持引用类型数据（存在引用类型数据的数组应该不需要求交集吧）； 2. 不同数据类型但同值的数据，会识别为相同的元素，类似相等运算符； 3. 区分了 null 与 0，即：A数组的 null 与 B数组的 0 不能成为交集元素； 4. NaN 与 'NaN' 或者它本身，都进行了处理，使它们能够“相等”； 5. 关于返回的交集数组的元素数据类型：除非只能为字符串，否则都不会以字符串类型返回 关于NaN的处理： 一、forEach() 方法 /** * [interse...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值