javascript实现计算器_用js写出计算器是什么水平-程序员宅基地

技术标签：计算器布局 javascript实现计算器 # 前端系列 js javascript

首先说明一下为什么发这篇文章，因为今天早晨看到一篇类似的文章，我看了他的源码，发现实在太啰嗦了，于是便准备把这篇文章发出来！
其实使用javascript的函数来实现计算器可以说是练习javascript的一个好方法，虽然我的代码可以使用eval函数进行简化，但是我觉得没有必要。如果我的文章对你有用就点个赞吧！
先看下布局
在这里插入图片描述
源码放在这里

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style>
		.wrapper{
			width: 400px;
			border: 1px solid gray;
			box-sizing: border-box;
		}
		#content{
			width: 400px;
			height: 150px;
			border: 1px solid gray;
			box-sizing: border-box;
			text-align: right;
			line-height: 150px;
			font-size: 30px;
		}
		.box{
			width: 400px;
		}
		.div1{
			width: 100px;
			height: 100px;
			border: 1px solid gray;
			box-sizing: border-box;
			float: left;
			font-size: 25px;
			text-align: center;
			line-height: 100px;

		}
		.div1:hover{
			box-shadow: 2px 2px 2px gray;
		}
		.div1:active{
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div id="content"></div>
		<div class="box">
			<div class="div1" id="1" onclick="getNum(this)">1</div>
			<div class="div1" id="2" onclick="getNum(this)">2</div>
			<div class="div1" id="3" onclick="getNum(this)">3</div>
			<div class="div1" id="+" onclick="getOperator(this)">+</div>
		</div>
		<div class="box">
			<div class="div1" id="4" onclick="getNum(this)">4</div>
			<div class="div1" id="5" onclick="getNum(this)">5</div>
			<div class="div1" id="6" onclick="getNum(this)">6</div>
			<div class="div1" id="-" onclick="getOperator(this)">-</div>
		</div>
		<div class="box">
			<div class="div1" id="7" onclick="getNum(this)">7</div>
			<div class="div1" id="8" onclick="getNum(this)">8</div>
			<div class="div1" id="9" onclick="getNum(this)">9</div>
			<div class="div1" id="*" onclick="getOperator(this)">*</div>
		</div>
		<div class="box">
			<div class="div1" id="0" onclick="getNum(this)">0</div>
			<div class="div1" id="C" onclick="clearClick(this)">C</div>
			<div class="div1" id="=" onclick="opert(this)">=</div>
			<div class="div1" id="/" onclick="getOperator(this)">/</div>
		</div>
	</div>
	<script>
		var 数字1 = 0;
		var 按钮标识 = 0;
		var 运算符 = '+';
		var content = document.getElementById('content');
		function getNum(btn){
			if(按钮标识== 0){
				content.innerText += btn.innerText;
			}else{
				content.innerText = btn.innerText;
			}
			按钮标识 = 0;
		}
		function getOperator(btn){
			数字1 = content.innerText;
			运算符 = btn.innerText;
			按钮标识 = 1;
		}
		function opert(btn){
			var result = 0;
			switch(运算符){
				case '+':
					result = parseInt(数字1) + parseInt(content.innerText);
					break;
				case '-':
					result = parseInt(数字1) - parseInt(content.innerText);
					break;

				case '*':
					result = parseInt(数字1) * parseInt(content.innerText);
					break;

				case '/':
					result = parseInt(数字1) / parseInt(content.innerText);
					break;

			}
			content.innerText = result;
		}
		function clearClick(btn){
			content.innerText = '';
			数字1 = 0;
			按钮标识 = 0;
			运算符 = '+';
		}
	</script>
</body>
</html>

本文链接：https://blog.csdn.net/weixin_42380348/article/details/103842269

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Qt删除,复制当前路径下所有文件(夹)_qfile::remove文件夹-程序员宅基地

文章浏览阅读1.2k次，点赞4次，收藏6次。Qt删除路径下所有文件,复制路径下所有文件方法的封装.//删除当前文件路径下的文件bool KQProductHelper::RemoveFiles(QString sfilePath){ if(sfilePath.isEmpty()) return false; QFileInfo fileinfo(sfilePath); QString bas..._qfile::remove文件夹

真·simulink车辆仿真基础教程-这玩意真不难：仿真基础知识（1）_真simulink车辆仿真基础教程-程序员宅基地

文章浏览阅读1.1k次，点赞25次，收藏29次。汽车动力性概括来讲，是指汽车在良好路面上直线行驶时，由汽车受到的纵向外力决定、所能达到的平均行驶速度。通常用最高车速、爬坡能力、加速时间表征。_真simulink车辆仿真基础教程

Swagger2总结（Swagger2引入、Spring-Swagger2整合、Swagger2常用注解与插件）-程序员宅基地

文章浏览阅读2.4k次，点赞2次，收藏12次。Swagger2引入、Spring-Swagger2整合、Swagger2常用注解与插件_swagger2

JVM原理讲解和调优_jvm原理及性能调优-程序员宅基地

文章浏览阅读881次。一、什么是JVMJVM是Java Virtual Machine（Java虚拟机）的缩写，JVM是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java语言的一个非常重要的特点就是与平台的无关性。而使用Java虚拟机是实现这一特点的关键。一般的高级语言如果要在不同的平台上运行，至少需要编译成不同的目标代码。而引入Java语言虚拟机后，Java_jvm原理及性能调优

社交网络分析重要概念简介、相关资料和前沿研究（持续更新ing...）_social network的bei 和ei-程序员宅基地

文章浏览阅读804次。社交网络分析重要概念简介、相关资料和前沿研究_social network的bei 和ei

pythontcp服务器框架_GitHub - xiaowang359/ChatServer: 基于python-tornado 与 sqlalchemy建立的1个TCP聊天服务器框架示例。...-程序员宅基地

文章浏览阅读140次。version 0.1 版本还存在一些BUG，采用sqlite数据库做为测试关于推送部分大家可以在pypi搜索anps 下载安装apnsclient 测试###通用部分提交length = json整体包长action = 协议关键字部分提交部分提交 uid ，为了使协议通用语web环境返回status = 状态成功失败errcode = 错误代码,需要具体定义common1000010001 ..._python tornado tcp 聊天

随便推点

PYTHON常用库简介_python常用库介绍-程序员宅基地

文章浏览阅读8.3k次，点赞6次，收藏80次。Python科学计算基础库：Numpy，Pandas，Scipy，Matplotlib1.NumPy支持大量的维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库,线性代数，傅里叶变换和随机数功能底层使用C语言编写，内部解除了GIL（全局解释器锁），其对数组的操作速度不受Python解释器的限制，效率远高于纯Python代码。2.PandasPandas是一个强大的基于Numpy分析结构化数据的工具集；Pandas 可以从各种文件格式比如 CSV、JSON、SQL、Micros_python常用库介绍

Anaconda创建Pytorch虚拟环境（排坑详细）_anaconda创建pytorch环境-程序员宅基地

文章浏览阅读5.9w次，点赞150次，收藏1.4k次。利用conda指令搭建Pytorch环境，并在Pytorch环境中安装GPU版Pytorch相关包。_anaconda创建pytorch环境

Linux：磁盘状态观察命令lsblk、blkid-程序员宅基地

文章浏览阅读955次，点赞12次，收藏32次。有时我们在磁盘规划前会想要确定一下当前系统的文件系统或磁盘分区情况。这时，就有几个命令可以供选择，通过本文，可以学习这些命令的使用。_lsblk

构造方法与方法的区别详解_构造方法和普通方法之间的区别-程序员宅基地

文章浏览阅读5.7k次，点赞11次，收藏46次。结论！！！学生类当中虽然没有构造方法但是测试代码当中Student对象也创建完成了。是因为当类中没有任何构造方法的时候系统默认构造一个无参数的构造方法构造方法和普通方法结构的区别如下：调用构造方法怎么调用呢？..._构造方法和普通方法之间的区别

高维数据惩罚回归方法：主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据...-程序员宅基地

文章浏览阅读199次。全文链接：http://tecdat.cn/?p=23378在本文中，我们将使用基因表达数据。这个数据集包含120个样本的200个基因的基因表达数据。这些数据来源于哺乳动物眼组织样本的微阵列实验（点击文末“阅读原文”获取完整代码数据）。相关视频1 介绍在本文中，我们将研究以下主题证明为什么低维预测模型在高维中会失败。进行主成分回归（PCR）。使用glmnet()进行岭回归、lasso 和弹性网el..._高维数据回归方法

中科数安 | 防泄密软件-程序员宅基地

文章浏览阅读419次，点赞16次，收藏3次。此外，中科数安防泄密软件还具有智能加密功能，可以识别散落在企业不同位置的机密文件，并对其强制加密，非核心数据不被过分加密，防止敏感内容泄漏。同时，它还支持离网办公，针对出差人员或网络故障等原因引起的客户端离网，用户可以发起离网审批，确保终端密文在出差过程中保持可用状态，不影响正常办公。它采用了多种加密机制和技术手段，确保企业数据的安全性、完整性和机密性。总之，中科数安防泄密软件是一种功能强大、技术先进的企业数据保护软件，可以有效地防止敏感数据的泄露和非法访问，保障企业的信息安全和业务连续性。