js实现简易计算器（含中间过程）

最新推荐文章于 2020-11-24 21:39:03 发布
最新推荐文章于 2020-11-24 21:39:03 发布
阅读量183 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45147812/article/details/106860174
版权

由链表栈和数组实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="str"/>
		<button id="btn">计算</button>
		<script>
			class Data{
				constructor(ch) {
				    this.ch=ch;
					this.next=null;
				}
			}
			class LinkedListStack{
				constructor() {
				    this.head = {
						next : null
					}
				}
				pushObj(obj){
					if(obj.ch!=undefined){
						let temp = this.head;
						while(temp.next!=null){
							temp=temp.next;
						}
						temp.next=obj;
					}
				}
				popObj(){
					let temp = this.head;
					if(temp.next==null){
						// document.write("链表为空还未有数据");
						return;
					}
					while(temp.next.next!=null){
						temp=temp.next;
					}
					let obj = temp.next;
					temp.next=null;
					return obj;
				}
				show(){
					document.write("<br />");
					let temp = this.head.next;
					while(temp!=null){
						document.write(temp.ch+"<br />");
						temp=temp.next;
					}
				}
			}
			//定义+-*/的优先级
			var arr = new Array(4);
			for(let i=0;i<4;i++){
				arr[i]= new Array(2);
			}
			arr[0][0]="+";
			arr[1][0]="-";
			arr[2][0]="*";
			arr[3][0]="/";
			arr[0][1]=0;
			arr[1][1]=0;
			arr[2][1]=1;
			arr[3][1]=1;
			
			document.getElementById("btn").onclick=function(){
				//计算式
				var str = document.getElementById("str").value;
				//开始计算
				var numList =[];
				var chList =[];
				var resultList = new LinkedListStack();
				if(isNaN(str[0])){
					alert("输入算式不合法");
					return;
				}
				//将所有数字符号进栈
				for(let i=0;i<str.length;i++){
					let ch = str[i];
					if(!isNaN(ch)){//是数字
						var n = ch;
						while(!isNaN(str[i+1])){
							i++;
							n = n*10 + parseInt(str[i]);
						}
						// let obj = new Data(n);
						numList.push(n)
					}else{
						// let obj = new Data(ch);
						chList.push(ch);
						if(isNaN(str[i+1])){
							alert("输入算式不合法");
							return;
						}
					}
				}
				document.write("符号有："+"<br />");
				for(let i=0;i<chList.length;i++){
					document.write(chList[i]+"<br />");
				}
				document.write("数字有："+"<br />");
				for(let i=0;i<numList.length;i++){
					document.write(numList[i]+"<br />");
				}
				
				//计算乘除
				for(let i=0;i<chList.length;i++){
					let ch = chList[i];
					if(ch=='*'||ch=='/'){//优先级较高
						let num1 = numList[i];
						let num2 = numList[i+1];
						var result ;
						if(ch=='*'){result = num1 * num2;}
						if(ch=='/'){result = num1 / num2;}
						while(chList[i+1]=='*'||chList[i+1]=='/'){
							i++;
							let num2 = numList[i+1];
							if(chList[i]=='*'){result = result * num2;}
							if(chList[i]=='/'){result = result / num2;}
						}
						let obj = new Data(result);
						resultList.pushObj(obj);
						let chobj = new Data(chList[i+1]);
						resultList.pushObj(chobj);
						i+=2;
						if(i==chList.length){
							let num = numList[i];
							let obj = new Data(num);
							resultList.pushObj(obj);
						}
					}else{
						let num = numList[i];
						let obj = new Data(num);
						resultList.pushObj(obj);
						let chobj = new Data(ch);
						resultList.pushObj(chobj);
						if(i==chList.length-1){
							let num = numList[i+1];
							let obj = new Data(num);
							resultList.pushObj(obj);
						}
					}
				}
				document.write("计算过程为："+"<br />");
				resultList.show();
				//计算加减
				document.write("<br />");document.write("<br />");
				var temp = resultList.popObj();
				// console.log(temp);
				if(temp.ch==undefined){
					temp = resultList.popObj();
				}
				// resultList.show();
				var sum = parseInt(temp.ch);
				// console.log(sum);
				// console.log( resultList.popObj().ch);
				
				while(temp!=null){
					var ch = temp.ch;
					console.log(ch)
					if(isNaN(ch)){
						var aa= resultList.popObj().ch;
						console.log(aa)
						if(ch=='+'){
							sum+=parseInt(aa);
						}else{
							sum-=parseInt(aa);
						}
					}
					temp=resultList.popObj();
				}
				document.write("结果为："+sum+"<br />");
			}
		</script>
	</body>
</html>

测试：1+235/6+5

在这里插入图片描述
在这里插入图片描述
另一种方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="str" />
		<button id="btn">计算</button>
		<script>
			class Data{
				constructor(ch) {
					this.ch=ch;
					this.next=null;
				}
			}
			class LinkedListStack{
				constructor() {
					this.head = {
						next : null
					};
					this.top=null;
				}
				pushObj(obj){
					let temp = this.head;
					while(temp.next!=null){
						temp=temp.next;
					}
					temp.next=obj;
					this.top=obj;
				}
				popObj(){
					let temp = this.head;
					if(temp.next==null){
						// document.write("链表为空还未有数据");
						return;
					}
					while(temp.next.next!=null){
						temp=temp.next;
					}
					let obj = temp.next;
					this.top=temp;
					temp.next=null;
					return obj;
				}
				show(){
					document.write("<br />");
					let temp = this.head.next;
					while(temp!=null){
						document.write(temp.ch+"<br />");
						temp=temp.next;
					}
				}
			}
			//判断谁的优先级高
			function judge(ch1,ch2){//ch为当前运算符
			
				if(ch1==ch2){
					return 1;
				}else if((ch1=='+'||ch1=='-')&&(ch2=='*'||ch2=='/')){
					return 1;
				}else if((ch1=='*'||ch1=='/')&&(ch2=='*'||ch2=='/')){
					return 1;
				}else{
					return 0;
				}
			}
			//给数字和符号，进行运算
			function operate(num1,num2,ch){
				// console.log(ch)
				num1=parseInt(num1);
				num2=parseInt(num2);
				if(ch=='+'){return num1+num2;}
				if(ch=='-'){console.log(num2+"-"+num1); return num2-num1;}
				if(ch=='*'){return num1*num2;}
				if(ch=='/'){console.log(num2+"/"+num1); return num2/num1;}
			}
			document.getElementById("btn").onclick=function(){
				var numList = new LinkedListStack();//数字栈
				var chList = new LinkedListStack();//符号栈
				var ch = chList.popObj();
				var str = document.getElementById("str").value;
				// alert(str)
				for(let i=0;i<str.length;i++){
					if(isNaN(str[i])){//是个符号
						var ch = chList.popObj();
						if(ch==undefined){//栈空
							chList.pushObj(new Data(str[i]));
							// chList.show();
						}else if(judge(str[i],ch.ch)==1){
							let num1=numList.popObj().ch;
							let num2=numList.popObj().ch;
							let result=operate(num1,num2,ch.ch);
							numList.pushObj(new Data(result));
							chList.pushObj(new Data(str[i]));
						}else{
							chList.pushObj(new Data(ch.ch));
							chList.pushObj(new Data(str[i]));
						}
					}else{
						var n=str[i];
						while(!isNaN(str[i+1])){
							i++;
							n = n*10 + parseInt(str[i]);
							
						}
						numList.pushObj(new Data(n));
						// numList.pushObj(new Data(str[i]));
					}
				}
				var ch = chList.popObj();
				while(ch){
					ch=ch.ch;
					var num1 = numList.popObj().ch;
					var num2 = numList.popObj().ch;
					// if(ch=='/'){
					// 	result = operate(num2,num1,ch);
					// }else{
					// 	result = operate(num1,num2,ch);
					// }
					result = operate(num1,num2,ch);
					numList.pushObj(new Data(result));
					ch=chList.popObj();
				}
				document.getElementById("str").value=document.getElementById("str").value+"="+numList.popObj().ch;
			}
		</script>
	</body>
</html>
加油挣米粒呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【JS】中缀表达式计算器
wu_yihao的专栏
09-10 1341
JavaScript的中缀表达式计算器。 最近没事做的时候就浅浅地学了一下js，和c++太神似了，只是变量无类型很不习惯。打了一个计算器来练一下手。 目前支持加、减、乘、除、乘方、括号、三角函数、自然对数，用的还是过去学的知识。。只是用js裹了一层皮，我想效率应该比c++低很多。 浮点支持比较弱，因为oi选手接触实数却是频率较小，不太会处理。 不支持高精，这是基础知识中少有
逆波兰表达式实现的简易计算器
06-01
本文主要讨论的是如何使用JavaScript和jQuery实现一个基于逆波兰表达式的移动端自适应简易计算器。JavaScript是一种广泛使用的客户端脚本语言，用于在浏览器环境中动态更新网页内容。jQuery则是一个快速、简洁的...
javascript 实现计算器效果(输入中缀表达式字符串=＞转为后缀表达式数组=＞后缀表达式计算)
美人如玉，剑气如虹
11-24 418
实现功能：鼠标点击输入；键盘输入；计算结果
js实现简单的计算器
起小点
05-22 717
js实现简单的计算器 1.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = functio...
js实现四则计算(中缀,后缀表达式)
极客神殿
12-31 1116
index.html &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&am
【JavaScript数据结构与算法】中缀表达式转后缀以及表达式求值
ljs_coding
03-27 984
声明：本文章转载自作者http://godlikemeteor.com/的一篇，尊重原创。 题目描述 一个算术表达式的后缀表达式形式如下： op1 op2 operator 使用两个栈，一个用来存储操作数，另外一个用来存储操作符，设计并实现一个 JavaScript 函数，该函数可以将中缀表达式转换为后缀表达式，然后利用栈对该表达式求值。 什么是中缀表达式和后缀表达式？ 中缀表示法（...
js实现简易的计算器源码.zip
11-19
在简易计算器中，我们需要获取用户输入的数字和运算符，以及显示计算结果，这就需要用到`document.getElementById`或`querySelector`来选取特定元素，然后用`innerHTML`或`value`属性读取或设置元素内容。...
JavaScript，HTML制作简易图形化界面计算器
06-23
以下是每个技术在实现过程中所扮演的角色： 1. **HTML（超文本标记语言）**： HTML是网页内容的基础结构，负责定义页面上的各个元素，如按钮、输入框等。在创建计算器界面时，我们需要用HTML来创建数字和运算符...
实现一个简易计算器
04-24
博主"dingfan"分享了他的经验，通过iteye这个平台，可能讨论了代码结构、算法设计以及实现过程中遇到的问题和解决方案。 标签“源码”意味着会有具体的编程代码示例，这将帮助读者理解如何将理论转化为实际操作。而...
简易计算器_微信小程序模板js代码前台前端H5页面源码.rar
08-09
【简易计算器微信小程序模板js代码】是用于创建一个基本计算功能的小程序模板，适用于前端开发者，特别是对微信小程序开发感兴趣的人。这个模板包含了构建一个简单计算器所需的全部前端资源，包括HTML、CSS和...
利用JS编写一个简单的计算器
qq_37607502的博客
08-06 790
js编写一个简单的计算器 学习js遇到的一个问题 描述：获取两个输入框中的数字，以及运算符号，点击“=”，得最终的计算值。形式如下。 思路：定义变量分别获取两个运算文本框的值，通过判断获取的运算符号，将两个数的运算结果写入最后一个文本框。 <!DOCTYPE html> <html> <head> <title> 事件</title&g...
javascript常用字符串函数
findu_at的专栏
01-23 116
几种常用的表单输入判断 文章类型：JavaScript 文章加入时间：2004年11月1日11:2 --------------------------------------------------------------------------------   几种常用的表单输入判断 //函数名：chksafe //功能介绍：检查是否含有"'",'\\',"/" //参数说明：要检查的字符...
使用JS写一个计算器
weixin_30646315的博客
11-08 5676
先上效果图： 简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。 根据预期效果，可以确定页面中的布局要用到table tr td。 所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，...
CSS：图片不拉伸，垂直居中显示
qq_42034498的博客
12-15 2105
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
生成与中文字符串相对映的拼音首字母串的函数(js)
热门推荐
xuStanly的专栏
08-28 1万+
/*作者:梅雪香日期:2006-7-29功能:生成与中文字符串相对映的拼音首字母串版本: V1.0 alpha*/// 汉字拼音首字母列表 本列表包含了20902个汉字,用于配合 ToChineseSpell //函数使用,本表收录的字符的Unicode编码范围为19968至40869, XDesigner 整理var strChineseFirstPY = "YDYQSXMWZSSXJBYMGC
利用中缀表达式转后缀表达式实现简易计算器
百里杨的博客
04-06 941
我们先来了解几个概念 前缀表达式：运算符位于两个相应操作数之前，前缀表达式又被称为前缀记法或波兰式 中缀表达式：是人类最常用的算术表达式，运算符在运算数中间,运算需要考虑运算符优先级 后缀表达式：是计算机容易运算的表达式，运算符在运算数后面,从左到右进行运算,无需考虑优先级,运算呈线性结构 中缀表达式像这样：1 + (2 + 3) × 4 - 5 前缀表达式像这样：- + 1 × +...
基于卷积神经网络的食物识别及实现.pdf
最新发布
07-22
在超市无人结算服务中，使用电子标签对部分货物如水果、蔬菜等进行结算的成本过高、便捷性不高，至今依然采用人工结算的方式。 针对这一问题，本文提出了基于卷积神经网络的食物识别方法。 通过自建水果数据集来训练卷积神经网络分类模型；基于训练后的模型构建可视化平台进行食物识别。 实验结果表明，利用卷积神经网络的食物识别的预测准确率 为 ９６．３４％。
使用 Javascript 编写的 ToDo List 应用程序及其源代码.zip
07-22
项目：使用 JavaScript 编写的 ToDo List 应用程序及其源代码 ToDo List App 是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。在这里，用户可以添加待办事项详细信息的数量，您可以看到以列表形式存储的详细信息，如便签。此外，如果用户想删除列表项，也可以删除它。   项目制作 ToDo List App 项目仅包含 HTML、CSS 和 JavaScript。谈到该系统的功能，用户可以列出他们必须完成的日常工作并将其作为记录保存。您只需在文本字段中输入工作信息，然后按 Enter 键即可将信息添加到记录中。该项目包含大量 JavaScript，用于使项目正常运行。 如何运行该项目？ 要运行此项目，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要运行此系统，首先，通过单击 index.html 文件在浏览器中打开项目。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
MobaXterm-Installer-v24.2.zip（windows版本），41M
07-22
MobaXterm_Installer_v24.2解压之后，执行MobaXterm_installer_24.2.msi安装程序，无脑安装即可。 目前个人觉得最好用的一款远程连接工具，支持SSH、Telnet、Rsh、Xdmcp、RDP、VNC、FTP、SFTP、Serial、File、Shell、Browser、Mosh、Aws S3、WSL等多种连接，并且可以提供可视化linux的文件夹系统，可以直接点击查看、创建、删除、修改等可视化操作，十分方便，传输文件直接拖动到对应的文件夹即可快速传输！速度吊打scp命令传输！
javascript实现简易计算器
05-14
以下是一个简单的 JavaScript 计算器： ```html <!DOCTYPE html> 简易计算器 <script type="text/javascript"> function calculate() { var num1 = document.getElementById('num1').value; var num2 =...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值