做一个简易计算器

已于 2023-04-17 12:07:49 修改
阅读量3.7k 收藏 30
点赞数 6
文章标签： css css3 html
于 2023-04-14 08:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylxb2234/article/details/130123446
版权

做一个简易计算器

1.目标图片

在这里插入图片描述

2.计算器的内容（HTML）

由图片可以看出，计算器是一个整体标签，里面分为两个大块级标签，第一个大块级标签用来存放计算器的显示框，第二个大块级标签用来存放计算机的按键。共16个按键，将第二个大块级标签分为四个块级标签，每个块级标签里存放四个小块级标签，每个小块级标签即一个按键。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四题</title>
		<link href="css/fourth.css" rel="stylesheet" />
	</head>
	<body>
		<!-- 讲一个整体标签拆成两个部分，一个标签用来放入计算机的显示框，另一个标签存放计算机的按钮 -->
		<!-- 整体标签开始 -->
		<div id="counter">
			<!-- 显示框标签 -->
			<div id="input"></div>
			<!-- 计算机按钮标签开始，将其分为四个部分，每个部分保存4个计算机按钮 -->
			<div id="countkey">
				<!-- 按钮部分一 -->
			<div id="key">
				<div onclick="count(this)">7</div>
				<div onclick="count(this)">8</div>
				<div onclick="count(this)">9</div>
				<div onclick="count(this)">+</div>
			 </div>
			<div style="clear: left;"></div>
				<!-- 按钮部分二-->
			<div id="key">
				<div onclick="count(this)">4</div>
				<div onclick="count(this)">5</div>
				<div onclick="count(this)">6</div>
				<div onclick="count(this)">-</div>
			</div>
			<div style="clear: left;"></div>
				<!-- 按钮部分三 -->
			<div id="key">
				<div onclick="count(this)">1</div>
				<div onclick="count(this)">2</div>
				<div onclick="count(this)">3</div>
				<div onclick="count(this)">*</div>
			</div>
			<div style="clear: left;"></div>
				<!-- 按钮部分四 -->
			<div id="key">
				<div onclick="count(this)">0</div>
				<div onclick="count(this)">C</div>
				<div onclick="count(this)">=</div>
				<div onclick="count(this)">/</div>
			</div>
			<div style="clear: left;"></div>
			</div>
			<!-- 计算机按钮标签结束 -->
		</div>
		<!-- 整体标签结束 -->
		<script src="js/fourth.js"></script>
	</body>
</html>

3.计算器的样式（CSS）

对计算器的每个部分设置样式

/* 清除默认外边距和内边距 */
*{
	margin: 0;
	padding: 0;
}
/* 计算机设置基本样式并定位 */
#counter{
	width:500px;
	height: 400px;
	background-color: #C0C0C0;
	position: absolute;
	top: 25%;
	left: 35%;
}
/* 为显示框设置基本样式 */
#input{
	width: 400px;
	height: 40px;
	background-color: white;
	position: absolute;
	top:3%;
	left:10%;
	border-top-style:inset;/* 清除默认外边距和内边距 */
*{
	margin: 0;
	padding: 0;
}
/* 计算机设置基本样式并定位 */
#counter{
	width:500px;
	height: 400px;
	background-color: #C0C0C0;
	position: absolute;
	top: 25%;
	left: 35%;
}
/* 为显示框设置基本样式 */
#input{
	width: 400px;
	height: 40px;
	background-color: white;
	position: absolute;
	top:3%;
	left:10%;
	/* 为显示框边界设置样式显得更立体 */
	border-top-style:inset;
	border-left-style:inset;
	border-right-style:inset;
	border-bottom-style: inset;
}
/* 计算机按钮设置基本样式，每个部分浮动 */
#key div{
	border: none;
	width:90px;
	height:40px;
	background-color:#DDDDDD ;
	line-height: 40px;
	text-align: center;
	/* 为计算机按钮边界设置样式 */
	border-right-style: outset;
	border-top-style: outset;
	border-bottom-style: inset;
	border-bottom-color: #DDDDDD;
	/* 设置浮动 */
	float: left;
	/* 为按钮添加外边距调整按钮之间的距离 */
	margin-top:30px;
	margin-left: 28px;
}
/* 为计算机按钮整个部分添加外边距，使第一行的按钮能与显示框保持距离 */
#countkey{
	margin-top: 80px;
}
	border-left-style:inset;
	border-right-style:inset;
	border-bottom-style: inset;
}
/* 计算机按钮设置基本样式，每个部分浮动 */
#key div{
	border: none;
	width:90px;
	height:40px;
	background-color:#DDDDDD ;
	line-height: 40px;
	text-align: center;
	border-right-style: outset;
	border-top-style: outset;
	border-bottom-style: inset;
	border-bottom-color: #DDDDDD;
	float: left;
	margin-top:30px;
	margin-left: 28px;
}
/* 为计算机按钮整个部分添加外边距，使第一行的按钮能与显示框保持距离 */
#countkey{
	margin-top: 80px;
}

完成样式后，计算器基本内容可以在网页里呈现出来

计算器样式

4.计算器的功能（JS）

接下来实现计算器的功能，首先要清楚计算器每个部分及每个部分的功能

首先显示框是用来显示点击按钮后的结果，按钮分为四种按钮：

1.数字按钮：点击后显示框可以显示相应的数字或将对应的数字与之前输入的内容拼接起来。

2.运算符按钮：点击后将运算符号和之前输入的内容拼接起来。

从上面两部分可以看出，实现拼接功能很容易就能联想到字符串，在实现功能时肯定要定义一个字符串变量

3.结果按钮"="：计算输入的结果并显示

结合前面的思路，输入的肯定是一个字符串，要对字符串内容进行运算，那么可以用eval函数

4.清除按钮"C"：清空显示屏

那么只需要对字符串变量赋空值即可

秉持要操作，先得到的原则，我们需要先得到对象，对象为两个，一个是显示框，另一个就是按钮

可是按钮共有16个，如果每个都要得到，那么仅按钮就需要定义16个变量。 所以在此我们就可以设一个有参函数，定义两个变量，一个用来取显示框，另一个来取参数的内容即使用innerhtml。参数为Obj,在写完后每个按钮利用onClick点击事件调用函数，传过去的参数为this。

在JS里定义功能函数：
在这里插入图片描述

在HTML里每个按钮标签里调用该函数
在这里插入图片描述

接下来是实现按钮功能。根据上面的思路我们先定义一个空字符串并从条件表达式简单的写

首先是清除按钮"C"，很明显当条件成立时只需要将字符串变量变为空

在这里插入图片描述

然后是结果按钮"="，条件成立时变量等于eval（变量名）即可

在这里插入图片描述

然后是其余按钮，它们需要实现的主要就是拼接。那么就用+=将字符串变量和按钮的内容拼接起来。

在这里插入图片描述

最后是显示，直接将字符串变量赋给显示屏的变量即可。

在这里插入图片描述

到此基本功能已经实现，但总会出现一些意外情况，比如点错了连续输入两个运算符，又或是开头直接输入乘除号等，为了更加规范，便需要添加一些判定，以下是自己目前能考虑到的情况

1.字符串的首字母是乘号或除号时输入不合法，比如"*36",“/9+8”

这里我想到了String类里的CharAt方法，利用其取出首字符进行判定

在这里插入图片描述

2.字符串连续出现相同的运算符，比如"7++",“787945–”

很明显判定时，每个相邻之间的位置都有可能出现这种情况。这里我想到了用循环去判定，仍然用CharAt方法去判定

在这里插入图片描述

3.开始时直接点击"="按钮

开始时字符串为空，用它作为判定条件，执行报错即可。

在这里插入图片描述

4.报错后,字符串的内容就成了报错的内容。此时在进行运算就会直接在报错的字体后面拼接

于是设一个if语句，判定字符串里内容为报错时，将字符串清空

在这里插入图片描述

5.进行一次运算后，数值会保留在显示屏上，如果这时候输入数字，会直接拼接在后面。例如运算出结果为"16"，这时候如果直接输入"6",那么就会变成"166"。

很明显这种情况并不是我们想要的，我们想下次输入数字时，将前面的运算结果清除，但如果下次输入运算符，计算器应该仍是拼接他们，这时候需要注意两个点：

在此之前，我们可以设置控制台显示输入结果和result类型

在这里插入图片描述

5.1 ： 此时的result已经不是String类型，变为了number类型

在这里插入图片描述

5.2：我们利用innerhtml得到的按钮的内容是String类型；

在这里插入图片描述

虽然此时result是number类型，但因为获得的按钮内容仍是String类型，通过拼接表达式又拼接成了字符串赋给了result，然后result又变成了String类。

那么我们就利用result变成number类这一特性来进行判定，因为不管是清除还是拼接都是在运算结果出来后的状况，所以当变为number类时再进行下一步操作，判定是否输入的是运算符，如果不是就清空显示屏内容。这里面就可以用 if嵌套。

在这里插入图片描述

5.过程中遇到的一些问题

1.点击运算符按钮和数字按钮时，发现没有拼接起来

在这里插入图片描述

解决方案：起初我以为是我的拼接表达式写的不对，或者是思路有问题，innerhtml取得内容不能拼接等等，最后发现是我把定义字符串变量的位置写错了，我将它写入了函数里即成了局部变量，每次调用函数时，都会先让它变成空字符串，再进行后面的操作，将定义字符串变量写在函数之前,即将字符串变量变为全局变量即可。

错误代码：

在这里插入图片描述

正确代码：

在这里插入图片描述

2.执行合法表达式没有达到预期效果

在这里插入图片描述

当时把合法情况的表达式写入了for循环里，结果发现这样的话，每次合法时都会运算一下，于是我又将它写在了循环体外面，结果发现当遇到不合法的情况时赋给result报错内容后跳出循环，然后又会执行eval运算。

解决方案：首先肯定要写在循环体外，但是不合法的时候不能执行合法表达式，于是我想到了布尔变量，我将其加到了函数体内，每次调用函数时就会使其为true，如果判定不合法时在赋给result报错内容后，然后将布尔变量变为false，再跳出循环，而合法表达时放在if语句里，如果布尔型变量为true才能执行。这样就避免了前面的问题发生。

在这里插入图片描述

3.判定运算结果之后的操作

在这里插入图片描述

起初我想的时将判断是否为运算符和数值类型是否为number用||连接起来。但是我忽略了一个问题：它为number类是绝对成立的，也就是说这个表达式一直为真，不管是否为运算符都会执行。后来我用&&去连接它们，但是当输入的不是运算符时，两边都为真，条件就会成立。从而将字符串清空了。

解决方案:于是我选择了if嵌套，将等于number类放在前提，成立了后再去判断是否是运算符。并且四个运算符都不是时再执行清空操作。后来我发现我之前的不为运算符的判定式也写的不对，每个小块之间应该用&&连接

在这里插入图片描述

于是有了第二种写法：

在这里插入图片描述

4.判定直接输入"="时的情况

在这里插入图片描述

当时我是想着直接把result=""跟其余不合法情况写在一起用||连接起来，但是在测试时发现并没有起作用，我猜测可能是因为如果字符串为空的话，本来长度就为0，但是我是把他放在for循环里执行的，而for循环判定时涉及到了字符串的长度。i初始值为0，字符串长度减1就变成了-1，那么for循环根本不会执行。也就没有判定这一说。

解决方案：将判定为空的条件和其余不合法情况条件分开来写，两者之间用if…else 来联系，因为不论是首字符是乘除号还是字符串里有连续的运算符，实际此时的字符串并不是空的。

在这里插入图片描述
JS完整代码：

/* 计算机功能分为4个部分，一个是点击数字按钮输入数值，一个是点击运算符按钮拼接内容，
   一个是点击"="进行相应的运算并显示结果，最后一个是点击"C"清除屏幕上的内容*/
// 定义一个字符串用来拼接，存储变量
    var result="";
function count(obj){
	var inputObj=document.getElementById("input");
	var KeyObj=obj.innerHTML;
	// 定义一个布尔型变量，来确定点击"="时的应实现哪种情况
	var judge=true;
	// 点击"C"时清除内容
	if(KeyObj=="C"){
		result="";
	}
	/* 点击"="时分情况，"="相当于对前面做的一系列操作进行判定，那么就分为合法和不合法两种情况
	不合法： 如果字符串首字母是"*"或"/"又或者输入时连续输入相同的运算符就显示输入格式错误，
	合法：   其余的情况就利用eval函数计算 */ 
	else if(KeyObj=="="){
		// 不合法时的情况
		  //未进行输入直接按"=" 
		if(result==""){
			result="输入格式错误，请重新输入";
		}
		  // 字符串内容不规范
		else {
			for(var i=0;i<result.length-1;i++){
			if((result.charAt(i)=="+"&&result.charAt(i+1)=="+")||(result.charAt(i)=="-"&&result.charAt(i+1)=="-")||
			(result.charAt(i)=="*"&&result.charAt(i+1)=="*")||(result.charAt(i)=="/"&&result.charAt(i+1)=="/")||
			(result.charAt(0)=="*"||result.charAt(0)=="/")){
			result="输入格式错误，请重新输入";
			judge=false;
			break;
			    }
			}
		// 合法时的情况
			if(judge==true){
				result=eval(result);
			}		
		}
	}
	//不管是点击数字还是运算符应该都是字符串的拼接,但是如果已经有结果就要分情况
	/*如果此时已经计算过一次，那么result的数值类型会变成number，这时候如果直接进行下次运算，先输入数字的话就会和上一次的结果拼接在一块
	所以要在result的类型变为number的基础上再进行是否运算符的判断，即if嵌套*/ 
	else {
			if((KeyObj!="+"&&KeyObj!="-"&&KeyObj!="*"&&KeyObj!="/") && (typeof(result)=="number")   ){
				result="";
			}

			result+=KeyObj;
			
    }
	// 将每次操作后的result值显示到显示框上
	inputObj.innerHTML=result;
	// 如果格式错误将字符串清空，否则会直接继续在后面拼接，影响重新输入的操作。
	if(result=="输入格式错误，请重新输入"){
		result="";
	}
}

6.结果

经过目前测试，想要的功能都已经实现

在这里插入图片描述

永无魇足
关注
  • 6
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【html】用html5+css3+JavaScript制作一个计数器
weixin_56334307的博客
06-17 591
文件，你应该就能看到一个简单的计数器，每次点击按钮时，计数就会加一。将这三个文件放在同一个文件夹中，并在浏览器中打开。
做一个简易计算器 Python
weixin_53312151的博客
11-13 2218
简易计算器
HTML程序大全(1)：简易计算器
joe_g12345的博客
12-05 2723
这是一个简单的计算器，使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面，CSS代码设置了计算器的样式，JavaScript代码实现了计算器的功能。这个计算器可以执行加、减、乘、除和取模运算。同时，它还支持小数点和多位数运算。
用C#做一个简易计算器
2301_79756232的博客
05-20 1842
1.我们需要选择“C#”语言，然后选择“Windows窗体应用（.NET Framework ）”，这个窗体类型一定不能选错，接着就下一步创建项目。2.我先放我搭建好的计算器界面，但%的代码没有放进来，因此这按键不可用。
用c++做一个简易计算器
heyanbo20130307的博客
08-02 1555
用c++做一个最简易的加减乘除计算器，只需要一些最基础的知识。
JavaScript 用三种方法做一个简易计算器
m0_62496369的博客
10-21 7504
new关键字执行过程 // 1.new构造函可以在内存中创建了一个空的对象 // 2.this就会指向刚才创建的空对象 // 3.执行构造函数里面的代码 给这个空对象添加属性和方法 // 4.返回这个新对象(所以构造函数里面不需要return)
用Visual Studio C#做一个简易计算器
ahcbhs的博客
06-03 566
/定义第一个数、第二个数、结果//运算符比之前用Java做计算器简单太多了，但是这此只是个简单实验，没有考虑除零之类的其他问题。
JS基础-做一个简易计算器
qq_43781887的博客
04-11 1725
思路：采用函数和switch来完成，每完成一个功能之后又要重新输入数字，直到输入数字5就停止程序，所以要采用while循环来实现输入部分。代码如下： <script> //简易计算器 function conuter(number) { switch (number) { case "1": var number1 = Number(prompt("请输入第一...
js做一个简易计算器
Cupid
04-27 993
运用js做一个简易的计算器效果，实现加减乘除取余 <input type="text" id="a"> <select name="" id="fh"> <option value="+">+</option> <option value="-">-</option>...
JavaScript 用两种方法做一个简易计算器
weixin_45899362的博客
03-09 7887
第一种 使用基本数据类型 注意点： prompt 用户从浏览器输入的任何数据都是字符串型的，使用数字需要强制转换 // 简易对象器 function input1(){ var num1 = prompt('请输入第一个数:'); return parseFloat(num1); } function input2(){ var num2 = prompt('请输入第二个数:'); return parseFloat(num2); } // 1. 加法运算 function
Dw 和 HtmI 制作一个简易计算器
04-12
<!DOCTYPE html> 计算机 table{border:1px solid gray;} td{width: 10px;height: 10px;border:1px groove gray;text-align: right;padding: 5px;margin: 5px;border-radius: 5px 5px 5px 5px;...
PHP实现简易计算器功能
10-17
主要为大家详细介绍了PHP实现简易计算器功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一个简易的计算器 java小程序
01-17
通过以上步骤，我们可以构建一个功能齐全且易于使用的简易计算器。这个项目对于初学者来说是一个很好的实践，可以帮助他们掌握Java GUI编程和基本的数学运算处理。同时，这个程序也可以作为进一步学习的基础，如添加...
一个简易计算器
07-26
【简易计算器】是一种常见的软件应用，它为用户提供了一个简便的方式来执行基本到复杂的数学运算。这款计算器不仅具有基础的加、减、乘、除功能，还可能包含其他高级运算，如求平方根、立方根、指数、对数以及三角...
使用pyqt5开发的一个简易计算器
02-13
在开发一个使用PyQt5的简易计算器之前，确保已经安装了以下软件和库： 1. Python：Python是PyQt5的基础，需要确保你的系统上安装了Python 3.x版本。 2. PyQt5：使用pip安装，命令为`pip install PyQt5`或`pip3 ...
flex：1
最新发布
m0_47999208的博客
07-25 381
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS 自适应图片根据 div 大小进行均匀填充
gz_qiulinyong的博客
07-24 947
在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的object-fit属性来实现这一需求。使用object-fit属性可以非常方便地实现图片在容器中的自适应填充，保持图片的宽高比并使其均匀填充容器。这个方法适用于各种情况，例如响应式设计和多设备支持。
CSS前端面试题——CSS 中，有哪些方式可以隐藏页面元素？有什么区别?
lbcbjtlhmjq的博客
07-25 301
这些方式的区别在于是否占据空间和是否可见，开发者可以根据实际情况选择不同的方式来隐藏页面元素。
怎么用qt做一个简易计算器
06-10
使用Qt做一个简易计算器可以遵循以下步骤： 1. 创建一个Qt项目，选择MainWindow作为主窗口。 2. 在MainWindow中添加按钮和文本框，用于显示数字和运算符。 3. 设置按钮的信号和槽函数，使得按钮被点击后可以向...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值