【前端】【HTML+CSS+JavaScript(JS)】简易计算器的实现 可连加连减 带注释/总结

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量919 收藏 5
点赞数 2
分类专栏： 前端 文章标签： javascript 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc2855816075/article/details/122896468
版权

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<script type="text/javascript">
		
			//	初始状态，记得每次按等号要还原
			var t1 = 0, t2 = 0, flag = 0;	//初始0 加法1 减法2 乘法3 除法4
			
			var equal_times = 0;
			
			function cal(n){	//传参 n
				
				if(n != 'C')
					document.getElementById("txt-1").value += n;	//直接展示，因为都要展示，但是C除外
				
				if(n >= 0 && n <= 9){	//如果n是数字
					//还未敲操作数分支
					if(flag >= 1 && flag <= 4){	//意为：如果已经敲了+-*/后再敲数字，就可以取t2了
						t2 = t2 * 10 + parseInt(n);	//得到t2
					}
				}
				else{	//如果n不是数字
					switch(n){
						case 'C':	//还原 
							document.getElementById("txt-1").value = "";
							//★★★★★★★★★★★这个equal_times也要归位！！！★★★★★★★★★★
							t1 = t2 = flag = equal_times = 0;
							break;
							
							
						case '+':
							t1 = parseInt(document.getElementById("txt-1").value);	//得到t1
							flag = 1;	//表明是加法
							break;
						case '-':
							t1 = parseInt(document.getElementById("txt-1").value);
							flag = 2;
							break;
						case '*':
							t1 = parseInt(document.getElementById("txt-1").value);
							flag = 3;
							break;
						case '÷':
							t1 = parseInt(document.getElementById("txt-1").value);
							flag = 4;
							break;
							
							
						case '=':
							//检查这是第几次等于
							++equal_times;
							// 	★★★数字加空串变字符串★★★
							// flag += '';
							//如果下面是 case '1' 时就需要修改。case 1 这样是数字
							switch(flag){
								case 1:
								//只要不是第一次等于。t1就等于原来两数相加，。即可实现连加。
									if(equal_times > 1)
											t1 += t2;
									document.getElementById("txt-1").value += t1 + t2;
									break;
								case 2:
									if(equal_times > 1)
											t1 -= t2;
									document.getElementById("txt-1").value += t1 - t2;
									break;
								case 3:
									if(equal_times > 1)
											t1 *= t2;
									document.getElementById("txt-1").value += t1 * t2;
									break;
								case 4:
									if(equal_times > 1)
											t1 /= t2;
									document.getElementById("txt-1").value += t1 / t2;
									break;
							}
							//要连等于的话，以下变量无法归位，因为如果要归位，t1，t2，flag数据就丢失了。
							// t1 = t2 = flag = 0;	//flag归位，操作数归位
							break;
					}
				}
			}
			
		</script>
		
		<style type="text/css">
			#b-box{
				width: 300px;
				margin:150px auto;
			}
			.line input{
				width: 60px;
				height: 30px;
			}
			div{
				margin-top: 15px;
			}
		</style>
		
	</head>
	<body>
		<div id="b-box">
			<div id="tt"><label>计算器</label></div>
			<div id="txt"><input type="text" id="txt-1" /></div>
			<div class="line">
				<input type="button" value="7" onclick="cal(7)" />
				<!-- 经过测试cal(7)和cal('7')都可以，因为★★★判断★★★的时候自动转换 -->
				<input type="button" value="8" onclick="cal(8)" />
				<input type="button" value="9" onclick="cal(9)" />
				<input type="button" value="+" onclick="cal('+')" />
			</div>
			
			<div class="line">
				<input type="button" value="4" onclick="cal(4)" />
				<input type="button" value="5" onclick="cal(5)" />
				<input type="button" value="6" onclick="cal(6)" />
				<input type="button" value="-" onclick="cal('-')" />
			</div>
			
			<div class="line">
				<input type="button" value="1" onclick="cal(1)" />
				<input type="button" value="2" onclick="cal(2)" />
				<input type="button" value="3" onclick="cal(3)" />
				<input type="button" value="*" onclick="cal('*')" />
			</div>
			
			<div class="line">
				<input type="button" value="C" onclick="cal('C')" />
				<input type="button" value="0" onclick="cal(0)" />
				<input type="button" value="=" onclick="cal('=')" />
				<input type="button" value="÷" onclick="cal('÷')" />
			</div>
			
		</div>
	</body>
</html>

注意：

1.每次按等号要还原几个值。
2.数字转换成字符串的方法：
加一个空字符“”，例如：flag += ‘’;
3.switch函数会自动转换数字或字符（有待考证）

_小鹰
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
《学习js计算器代码的实例教程，提高加减乘除等js基础计算能力》源码
04-21
本文件属于文章《学习js计算器代码的实例教程，提高加减乘除等js基础计算能力》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的...
用js来实现一个简单地计算器
aduan__的博客
01-15 5898
一、前端样式部分 首先我们需要给计算机来写一个外壳，我们使用html和css来实现计算器的样子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #outbox{/*計算機底座 */ width: 388px; height: 450px;
用javascript制作简易计算器,用js做一个计算器代码
神经网络爱好者
11-15 333
虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
使用JS写一个计算器
weixin_30646315的博客
11-08 5666
先上效果图： 简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。 根据预期效果，可以确定页面中的布局要用到table tr td。 所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，...
用js做出计算机界面,网页版计算器的实现(js实现计算功能)
weixin_31826689的博客
07-24 1360
标签都有一个点击事件,appContent(this),相信大家也看得懂,这是把点击的当前的对象当成参数传进方法中,其实这样子做的目的应该能猜到,就是往上面的框框中尾加字符串的意思,除了几个特别的,比如图中的"del","c","="这几个是不能尾加的,所以需要另作考虑,既然这样的话,那我们的代码其实就很简单了:function appContent(td){//找到显示字符串等式的td标签var...
利用原生js实现一个简易的计算器（附详细注释）
nqq0921的博客
04-09 510
利用原生js实现一个简易的计算器（附详细注释） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&
【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码）
tutu6663的博客
12-01 1735
实现了如上图所示的一般计算器的功能包括（1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思）（2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思（3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果（4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深。
JS基础——switch语句小练
Garniel的博客
12-27 485
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
利用JavaScript在html页面做一个计算器
热门推荐
qq_33655643的博客
03-31 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、html组成二、html和css,js基础知识***1.html******2.css****3.javascript*代码一些细节未解决的bug 前言 提示：这里可以添加本文要记录的大概内容： 提示：以下是本篇文章正文内容，下面案例可供参考 一、html组成 我们所要做的计算器可由两种方式构成 1.可以用table标签和tr，th，td标签构成，然后用css对他们的属性进行操作得到计算器. 2.可以用div容器实现，.
用JS点击事件做一个简单的计算器
m0_54072287的博客
01-02 1555
用JS的点击事件和事件委托做一个简单的计算器（加减乘除，清除），下面就是计算器的样子，这里主要是用js，样式就随便设置，可能有点丑了； 首先大概写出计算器的样子，简单设置一下样式 <style> .icon { width: 500px; height: 600px; border: 1px solid #000000; position: relative;
JavaScript基础——算术运算符（加+、减-、乘*、除/、取余%）、比较运算符（大于＞，小于＜，小于等于＜=，大于等于＞=，等于==，不等于）、逻辑运算符（逻辑与&&、逻辑或||、逻辑非）
ranran0306的博客
03-29 2076
JavaScript基础——算术运算符（加+、减-、乘*、除/、取余%）、比较运算符（大于>，小于<，小于等于<=，大于等于>=，等于==，不等于!=）、逻辑运算符（逻辑与&&、逻辑或||、逻辑非！）
JavaScript 仿windows 计算器
02-26
用html+css+JavaScript 写的一个简单版仿windows 计算器，界面非常相似,有最大化、最小化以及关闭窗口按钮，计算功能只有加减乘除,用的都是刚学的js基础知识，没有面向对象，内容简单易懂，关系嵌套清晰明了，还写了...
使用js,css,html实现的网页计算器
07-01
使用javascript,css，html实现的网页计算器，入门级别的代码，适合初学者学习与巩固，代码注释非常详细，还有说明文档。
JS实现多功能计算器
01-22
本文实例为大家分享了JS实现多功能计算器的具体代码，供大家参考，具体内容如下 1、开发语言 HTML+CSS+JavaScript 2、开发工具 Visual Studio Code 3、项目GitHub地址：计算器 (喜欢可以给一个star) 4、项目运行截图...
Clalc:计算带注释的基本数学
05-03
使用的技术： HTML，CSS，JavaScript，express和node.js 我使用了以前的项目，并将我的javascript与当前的javascript文件集成在一起。 然后，我将html文件添加到index.ej文件，以便计算器仍然可以工作。 然后我转...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 367
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 369
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1006
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 299
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
html+js+css计算器，只需实现加减和等于功能
06-08
好的，我可以为您提供一个简单的HTML+CSS+JavaScript计算器示例，可以实现加减和等于功能。以下是代码示例： HTML代码： ``` <div class="calculator"> <input type="text" class="screen" readonly> <div class="keys"> <button class="operator" value="+">+</button> <button class="operator" value="-">-</button> <button class="number" value="1">1</button> <button class="number" value="2">2</button> <button class="number" value="3">3</button> <button class="number" value="4">4</button> <button class="number" value="5">5</button> <button class="number" value="6">6</button> <button class="number" value="7">7</button> <button class="number" value="8">8</button> <button class="number" value="9">9</button> <button class="number" value="0">0</button> <button class="equals" value="=">=</button> </div> </div> ``` CSS代码： ``` .calculator { width: 200px; border: 1px solid #ccc; border-radius: 5px; padding: 10px; } .screen { width: 100%; margin-bottom: 10px; } .keys { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px; } button { font-size: 20px; padding: 5px; } .operator { background-color: #f2f2f2; } .number { background-color: #fff; } ``` JavaScript代码： ``` const screen = document.querySelector('.screen'); const keys = document.querySelector('.keys'); let firstNum = ''; let operator = ''; let secondNum = ''; keys.addEventListener('click', (e) => { if (e.target.matches('.number')) { if (operator === '') { firstNum += e.target.value; screen.value = firstNum; } else { secondNum += e.target.value; screen.value = secondNum; } } if (e.target.matches('.operator')) { operator = e.target.value; } if (e.target.matches('.equals')) { if (operator === '+') { screen.value = parseInt(firstNum) + parseInt(secondNum); } else if (operator === '-') { screen.value = parseInt(firstNum) - parseInt(secondNum); } } }); ``` 这个计算器的界面非常简单，只有一个文本框和一些按钮，您可以在文本框中输入数字，然后按下加号或减号按钮来选择您要执行的操作，最后按下等于号按钮来显示结果。请注意，这个示例只实现了加减和等于功能，如果需要实现更多的功能，需要扩展代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小鹰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值