js 计算器（加减乘除）

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量1.1w 收藏 49
点赞数 17
文章标签： javascript js 计算器 计算
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38984485/article/details/78631149
版权

拿js写了个网页计算器的小程序，代码如下，程序员新人，有可以改进的地方还望指点。（不支持/和百分号）


首先是CSS和HTML部分

<!DOCUMENT html>
<html>
	<head>
		<style>
			*{
				margin:0 auto;
				padding:0;				
			}
			.box1{
				width:25%;
				height:16%;
			}			
			input{
				width:100%;
				height:106%;
				font-size:150%;			
			}
		</style>
	</head>
	<body>
		<table align="center" height="500px"  width="400px" border="solid 1px" cellspacing="0"> 
			<tr>
				<td colspan="4">
					<input type="text" id="window" 
					style="width:100%;height:100%;text-align:left;font-size:200%;" readonly="readonly"/>
				</td>
			</tr>
			<tr>
				<td class="box1"><input type="button" value="AC" οnclick="bbb(this.value)"></td>
				<td class="box1"><input type="button" value="/"></td>
				<td class="box1"><input type="button" value="%"></td>
				<td class="box1"><input type="button" value="÷" οnclick="bbb(this.value)"></td>
			</tr>
			<tr>
				<td class="box1"><input type="button" value="7" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="8" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="9" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="*" οnclick="bbb(this.value)"></td>
			</tr>
			<tr>
				<td class="box1"><input type="button" value="4" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="5" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="6" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="—" οnclick="bbb(this.value)"></td>
			</tr>
			<tr>
				<td class="box1"><input type="button" value="1" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="2" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="3" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="+" οnclick="bbb(this.value)"></td>
			</tr>
			<tr>
				<td class="box1" colspan="2"><input type="button" value="0" οnclick="aaa(this.value)"></td>
				<td class="box1"><input type="button" value="." οnclick="bbb(this.value)"></td>
				<td class="box1"><input type="button" value="=" οnclick="bbb(this.value)"></td>
			</tr>
		</table>
	<body>

以下是js逻辑，用了4个变量实现加减乘除包括浮点数运算。

<script>
	var b=""				<!--用于记录小数点-->
	var c="";				<!--用于记录表单提交的数字-->
	var d="";				<!--用于记录表单提交的符号-->
	var e="";				<!--用于记录计算结果-->
		
		<!--记录数字的方法，点击的数字提交到aaa()-->
		function aaa(num){					
		<!--上一次操作是=号时，先重置所有数据再输入数字-->
			if(d=="="){							
					hehe();
				}
			if(c.length>=16){
					alert("输入的数太大了");return;
				}
			c=c+String(num);
			<!--第一个数直接被记录为计算结果-->
			if(d==""){							
					e=c;
				}					
			document.getElementById("window").value=c;				
		}
		<!--记录符号的方法，点击的符号提交到bbb()-->
		function bbb(lol){						
			if(lol=="AC"){						
					hehe();return;
				}
			<!--小数点被记录为数字，并不再向下执行-->
			if(lol=="."){						
					c=c+String(lol);b=lol;
					document.getElementById("window").value=c;return;
			}							
			<!--根据输入的符号计算，先调用计算方法而后给变量d赋值防止第一次点击错误计算-->
			duang();							
			d=lol;				
			document.getElementById("window").value=d;
			if(d=="="){
					result();
			}
			c="";								
		}
		<!--输出计算结果的方法-->
		function result(){				
			document.getElementById("window").value=e;		
		}		
		<!--计算方法，根据上一次数据的符号计算出前两次的结果-->
		function duang(){									
			if(d=="+"){e=Number(e)+Number(c);} 
			if(d=="—"){e=Number(e)-Number(c);}
			if(d=="*"){e=Number(e)*Number(c);}
			if(d=="÷"){e=Number(e)/Number(c);}
		}
		<!--重置方法-->
		function hehe(){									
			b="";c="";d="";e="";f=0;document.getElementById("window").value="";
		}			
</script>
</html>

weixin_38984485
关注
  • 17
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现简单的加减乘除
Xuan_m_o的博客
07-22 1833
使用简单的html和原生的Javascript进行加减乘除运算 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IFE ECMAScript</title> </head> <body> &lt...
加减乘除计算器
snow_5288的博客
05-02 885
一，首先，我们用最常规，最容易想到的办法写出代码 #include #include void menu() { printf("1.add 2.sub 3.mul 4.div 0.exit\n"); } int Add(int num1,int num2) { return num1+num2; } int Sub(int num1,int num2)
js 加减乘除
01-08
js 加减乘除 比较准确
js加减乘除的简单运算
qq_42166078的博客
06-17 4783
js加减乘除的简单运算 一直忙于vue项目，很久没碰js的一些操作了，今天稍微有空看了看js代码当作复习，也供初学者学习。本人一直坚持的初衷将复杂逻辑简化，方便于学习，当然有不足之处，还请各位多多指教。如图所示，根据输入框输入的值进行简单的加减运算 代码如下 HTML <body> <h1>请输入两个参加运算的整数</h1> <div> <span>操作数1：</span> <input type="text
Javascript实现加减乘除
Web编程少女
04-20 2793
Javascript实现加减乘除加减乘除 加减乘除 代码如下 // 加减乘除 export function plus(num1, num2) { const num1Digits = (num1.toString().split('.')[1] || '').length const num2Digits = (num2.toString().split('.')[1] || '').length const baseNum = Math.pow(10, Math.max(num1Digits
JS：学好加、减、乘、除运算，走遍天下都不怕
以气御码
07-05 2147
进入我的主页，查看更多JS的分享！ 这是另一种实现方式，更简洁（原先有一篇实现了，可以对比这一篇的代码看看） 一、加法、减法 1. 出错的例子 console.log(0.1+0.2); //输出：0.30000000000000004，正确结果：0.3 console.log(0.2 + 0.4) //输出：0.6000000000000001，正确结果：0.6 console.log(1.0 - 0.9); //输出：0.09999999999999998，正确结果：0.1 cons...
js实现计算器（包含加减乘除括号）
qq_28020627的博客
10-23 2299
// 求值的复杂表达式 const str = “3-7+352*(2+(4+3242-2-8+1)22)-22+(1/2.5+1)*3”; // 5216.2 // 用于打印正确的答案，好比较是否正确,式子要和上面str一样，只是没有双引号 const _str = 3-7+3*5*2*(2+(4+3*2*4*2-2-8+1)*2*2)-2*2+(1/2.5+1)*3; // 如果是减法或除法，第一个是被减数/被除数 function handleCalculation(numArr, num1, n
js加减乘除计算器代码
07-24
这个"js加减乘除计算器代码"项目提供了一个学习JavaScript基础运算、事件处理和GSAP动画的实例。通过阅读和理解代码，开发者可以提升自己的JavaScript编程技能，并了解如何在实际项目中应用这些知识。
js加减乘除在线计算器代码
06-24
在JavaScript编程语言中，创建一个加减乘除的在线计算器是一项常见的任务，它涉及到基本的DOM操作、事件处理以及数学运算。以下是对"js加减乘除在线计算器代码"相关知识点的详细说明： 1. **JavaScript基础**：...
vue + 计算器 实现 加减乘除
04-18
在本项目中，我们主要探讨如何使用Vue.js框架来实现一个基本的计算器功能，包括加、减、乘、除四种运算。Vue.js是一款轻量级的前端JavaScript框架，以其组件化开发模式、响应式数据绑定和易用性而受到开发者们的广泛...
js加减乘除计算器特效代码
03-20
在这个场景中，"js加减乘除计算器特效代码"是一个利用JavaScript实现的计算器应用，设计风格为扁平化，提供了基本的数学运算功能，包括加法、减法、乘法和除法。 首先，我们要理解JavaScript中的基本运算符。加法...
超级简易的JS计算器实例讲解(实现加减乘除)
12-10
废话不多说，直接上代码 ...简单的计算器</title> <style> body{ margin: 0; } .tab{ border: 3px solid black ; border-radius: 2px; border-collapse:collapse; width: 268px; height: 402px
利用JavaScript实现加减乘除运算
jrrfgj的博客
11-08 4481
利用JavaScript实现加减乘除运算
JS实现简单的加减乘除
qq_45706749的博客
05-29 4083
最简单不用动脑的方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <script src="./js/计算器.js"></script> </head> <body> 输入第一个数:<input type="text" id="num" /> <
js加减乘除
weixin_44475427的博客
09-23 3164
1、同字符串之间的运算 (一)字符串数字和number类型 1、将字符串类型转换成number类型 2、‘+’连接时，字符串的拼接 3、‘-’连接时，将字符串转换成了number类型进行计算 ...
js如何加减乘除运算代码,javascript加法计算器代码
2301_79533350的博客
12-06 413
这篇文章主要介绍了js如何加减乘除运算代码，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。
js-加减乘除
qq_52146538的博客
07-16 523
在 JavaScript 浮点数做数学运算的时候，你经常会发现一些问题，举几个例子： 0.0023 - 0.00000011 ==> 0.0022998899999999997 0.0023 + 0.00000000000001 ==> 0.0023000000000099998 0.0023 * 100 ==> 0.22999999999999998 0.0023 / 0.00001 ==> 229.99999999999997 计算方案优化后如下图所示 0.0023 - 0
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 778
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
vue简单计算器加减乘除
08-09
好的，我可以帮你实现一个简单的Vue计算器。首先，你需要创建一个Vue实例，并定义一些变量来存储计算器的状态和结果。... <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <sel

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值