JavaScript实现计算器

最新推荐文章于 2024-07-30 21:08:25 发布
最新推荐文章于 2024-07-30 21:08:25 发布
阅读量3.2w 收藏 81
点赞数 26
分类专栏： JavaScript 文章标签： JavaScript 计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Huymi/article/details/100085976
版权 
核心是使用eval(str);//传入的字符串会被当成JavaScript代码执行;

在这里插入图片描述

大致是这样的界面：

当我们点击数字时在屏幕上会显示点击的数字，当我们点击" + 、- 、* 、/ "时只会出现运算符，之前的结果将被清空。
当我们点击" c "时，会清空。当我们点击" = "会在屏幕上显示结果。

思路：

使用一个全局变量字符串去接收我们每次点击内容( 除 = ) 因为在点击等号的时候我们要执行eval()语句，将得到的值显示到屏幕上。

代码部分

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var strs = "";

			function OnClick(obj) {
				var str = obj.innerText;
				var numInput = document.getElementById("numInput");
				
				//如果是=,清空原有显示的内容，以免附加上去。执行eval();得到结果。
				if(str=="="){
					numInput.value="";
					str=eval(strs);
					strs = str+"";
				}else{
				//否则的话，继续将内容拼接到字符串后；
					strs += str;
				}
				//如果点击C的话，将所有内容清空。
				if(str=="c"){
					numInput.value = "";
					strs="";
					str="";
				}
				//如果点击的是运算符的话，只显示运算符。
				if(str=="+"||str=="-"||str=="*"||str=="/"){
					numInput.value = str;
				}else{
					//如果前一次点击的是运算符：先将原有显示的内容清空，再将本次点击的显示到屏幕上；
					//主要是为了避免出现: +23456 这样的情况。
					if(isNaN(numInput.value)){
						numInput.value="";	
					}
					//如果一直为数字，继续拼接显示。
					numInput.value += str;				
				}
			}
		</script>
	</head>

	<body>
		<h1 align="center">计算器</h1>
		<table border="1px" cellspacing="2" align="center" bgcolor="lightgray" bordercolor="white">

			<tr>
				<td colspan="4">
					<input type="text" id="numInput" style="text-align: right;"/>
				</td>
			</tr>
			<tr align="center"> 
				<td onclick="OnClick(this)">c</td>
				<td onclick="OnClick(this)">/</td>
				<td onclick="OnClick(this)">*</td>
				<td onclick="OnClick(this)">-</td>
			</tr>
			<tr  align="center">
				<td onclick="OnClick(this)">7</td>
				<td onclick="OnClick(this)">8</td>
				<td onclick="OnClick(this)">9</td>
				<td onclick="OnClick(this)" rowspan="2">+</td>
			</tr>
			<tr  align="center">
				<td onclick="OnClick(this)">4</td>
				<td onclick="OnClick(this)">5</td>
				<td onclick="OnClick(this)">6</td>
			</tr>
			<tr  align="center">
				<td onclick="OnClick(this)">1</td>
				<td onclick="OnClick(this)">2</td>
				<td onclick="OnClick(this)">3</td>
				<td onclick="OnClick(this)" rowspan="2">=</td>
			</tr>
			<tr  align="center">
				<td onclick="OnClick(this)">0</td>
				<td onclick="OnClick(this)" colspan="2">.</td>
			</tr>

		</table>

	</body>

</html>

最后附上结果：
在这里插入图片描述

肆律
关注
  • 26
    点赞
  • 踩
  • 81
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
使用JS完成一个简单的计算器功能
chuisiqin5881的博客
05-08 2577
<!DOCTYPEhtml> <html> <head> <title>事件</title> <scripttype="text/javascript"> functioncount(){ ...
JavaScript简单计算器
热门推荐
⁣  ⁡⁣⁣
10-20 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> </head> <body> <!--页面布局--> <input type="text" id="num1" placeholder="请输入第一个数字"/> <input type="text" id.
使用ArkTs进行计算器的实现
最新发布
weixin_74943910的博客
07-30 711
利用栈实现HarmonyOS计算器
JavaScript计算器
12-06
JavaScript计算器 html、css、JavaScript等知识点，简单易懂，能够看代码巩固知识点
js代码做计算器
Anansoul的博客
01-07 2139
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;script type="text/javascript"&gt; window.on
JavaScript 计算器
allway2的博客
06-02 7292
在本教程中，我们将创建一个简单的JavaScript 计算器。该计算器能够对 2 个或 2 个以上的数字进行加减乘除。计算器可以成为日常生活中非常有用的应用程序。您可以使用计算器来计算您的购物账单、计算您的贷款、执行简单的数学计算等。一般来说，我们有两种类型的计算器，一种是科学计算器，另一种是简单计算器。科学计算器用于执行复杂的数学计算，如平方根、平方、立方、对数、三角函数等。而简单的计算器用于执行简单的数学计算，如加法、减法、乘法和除法。我们将在本文中使用 HTML、CSS 和 JavaScript 逐步
javascript计算器
suyogi的专栏
10-13 5400
计算器                                                                                                         var FKeyPad = document.forms[Keypad];var Accum = "0";var FlagNewNum = false;var PendingOp
简单的JavaScript计算器
Yonggie的博客
04-29 360
带有enter键出结果， 可以直接复制粘贴。 <html> <head> </head> <title> calculator</title> <script src="jquery-3.3.1.min.js"> </script> <style> #container{ ...
javascript实现计算器功能
10-15
JavaScript实现计算器功能的知识点可以分为以下几个方面详细阐述： 1. HTML结构设计：文章中提供了一个简易计算器的HTML布局，其中使用了div元素来构建计算器的基本外观。在这个布局中，计算器被分为三个主要部分：...
结合 HTML、CSS，基于原生 JavaScript 实现计算器
01-06
结合 HTML、CSS，基于原生 JavaScript 实现计算器 要求界面、按键设计合理、 美观，除基本计算功能外，需实现进制转换、结果存储、取存计算的功能。实现长度转换。实现时间计算
Javascript 实现计算器时间功能详解及实例（二）
01-21
Javascript 实现计算器时间功能详解及实例（二） Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下： 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this....
JavaScript简易计算器
02-28
利用JavaScript简易计算器，北大青鸟javascript作业题
一个用JS做的简易计算器
05-06
一个用JS做的简易计算器,不是很完整，有兴趣的朋友可扩展一下
用HTML CSS JavaScript实现计算器的设计.pdf
01-03
总的来说，这个HTML+CSS+JavaScript实现的计算器是一个典型的前端开发实例，它结合了网页的结构、样式和动态功能，展示了Web开发中的基础知识和技术。通过这种方式，用户可以在浏览器中直接使用一个功能完备的计算器...
简单javascript计算器
aodan5223的博客
05-04 138
简单javascript计算器 预览地址:预览 <!-- Author:jom_ch E-mail:phpoop#Gmail.com blog:blogch.cn Date:2007-5-4 功能有待完善,仅供参考 //--> <!...
JavaScript实现计算器运算网页
05-30
可以使用HTML、CSS和JavaScript来创建一个计算器运算网页。以下是一个简单的实现： HTML代码： ``` <div class="calculator"> <input type="text" id="input" disabled> <div class="buttons"> <button onclick="clearInput()">C</button> <button onclick="backspace()">←</button> <button onclick="insert('+')">+</button> <button onclick="insert('-')">-</button> <button onclick="insert('*')">*</button> <button onclick="insert('/')">/</button> <button onclick="calculate()">=</button> <button onclick="insert('7')">7</button> <button onclick="insert('8')">8</button> <button onclick="insert('9')">9</button> <button onclick="insert('4')">4</button> <button onclick="insert('5')">5</button> <button onclick="insert('6')">6</button> <button onclick="insert('1')">1</button> <button onclick="insert('2')">2</button> <button onclick="insert('3')">3</button> <button onclick="insert('0')">0</button> <button onclick="insert('.')">.</button> </div> </div> ``` CSS代码： ``` .calculator { width: 200px; margin: 0 auto; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; } button { background-color: #4CAF50; color: white; border: none; border-radius: 5px; padding: 10px; font-size: 20px; cursor: pointer; } button:hover { background-color: #3e8e41; } ``` JavaScript代码： ``` var input = document.getElementById('input'); function insert(value) { input.value += value; } function backspace() { input.value = input.value.slice(0, -1); } function clearInput() { input.value = ''; } function calculate() { try { input.value = eval(input.value); } catch (e) { if (e instanceof SyntaxError) { input.value = 'Error'; } } } ``` 这个计算器运算网页支持加、减、乘、除、小数点和清空操作，并且使用了eval()函数来进行计算。需要注意的是，eval()函数可能存在安全隐患，不建议在生产环境中使用。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值