JQuery实现简易计算器

最新推荐文章于 2022-11-04 14:43:52 发布

DaiYuMeng

最新推荐文章于 2022-11-04 14:43:52 发布

阅读量4.2k

点赞数 6

分类专栏：前端文章标签： jquery 计算器

本文链接：https://blog.csdn.net/DaiYuMeng/article/details/102172335

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近在学习jquery框架，写了好多小demo，这个案例讲的就是jquery简易版计算器。

本人目前承接各类小demo和作业，类型有HTML+CSS+JS/部分前端框架/JAVA/Android/PHP/高等数学，有意请私聊！

效果图片如下：

第一张是刚运行在网页时的效果图。

第二张是输入运算数和运算符时的效果图。

第三张是错误输入的运算符。

整体代码如下：
<html>
<head>
<meta charset="utf-8" />
<title>jquery计算器</title>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
.panel {
	margin: 0 auto;
	width: 275px;
	height: 310px;
	border: 2px solid #bbb;
}

#screen {
	width: 200px;
	height: 40px;
	border: 1px solid #bbb;
	margin: 7px 0px 0px 7px;
	float: left;
}

input {
	font-size: 20px;
	width: 50px;
	height: 50px;
	margin: 6px;
}
</style>
<script>
	$(function() {
		/*  
			思路一：将点击了input的选项的值传到input上
			
			思路二：利用原生的eval()函数计算结果，并进行赋值操作
			
			思路三：清空按钮特别处理一下
		 */

		// 点击按钮
		var clickBtn = "";
		// count判断是否是第一次点击
		var count = 0;
		//假如报错
		if (window.onerror) {
			return $("#screen").text("您的操作有误哦！");
		}
		$(":button").click(function() {
			// 选择了清零按钮
			if ($(this).val() == 'C') {
				count = 0;
				return $("#screen").text("");
			}
			// 选择了相等按钮
			if ($(this).val() == '=') {
				try {
					var inputText = $("#screen").text();
					clickBtn = window.eval(inputText);
					return $("#screen").text(window.eval(inputText));
				} catch (err) {
					count = 0;
					return $("#screen").text("您的操作有误哦！");
				}
			}
			if (count == 0) {
				$("#screen").text("");
				clickBtn = $(this).val();
			} else {
				clickBtn += $(this).val();
			}
			count++;
			return $("#screen").text(clickBtn);
		});

	});
</script>
</head>
<body>
	<div class="panel">
		<div>
			<p id="screen"></p>
			<input type="button" value="C" />
		</div>
		<div>
			<input type="button" value="7" /> <input type="button" value="8" /> <input
				type="button" value="9" /> <input type="button" value="/" /> <input
				type="button" value="4" /> <input type="button" value="5" /> <input
				type="button" value="6" /> <input type="button" value="*" /> <input
				type="button" value="1" /> <input type="button" value="2" /> <input
				type="button" value="3" /> <input type="button" value="-" /> <input
				type="button" value="0" /> <input type="button" value="." /> <input
				type="button" value="=" /> <input type="button" value="+" />
		</div>
	</div>
</body>
</html>
重难点讲解如下：

1.count在这里起的具体作用是什么？

count是一个计数器。

如果count为0，它的意思是要么我第一次打开这个页面，要么我点击了清零（C）按钮，即我下一步不管是点击了运算符还是运算数，都是一个全新的操作。

它出现在三个地方，①第一次打开网页运行这个计算器，②点击了清零按钮，③运算报错出现“您的操作有误”字样。

2.clickBtn如何取值？

它主要是利用jquery的val()方法取input输入框的value值，它结合count这个计数器可以实现一个比较巧妙的结果。

判断是否是第一个使用这个运算器，如果不是第一次的话。你执行完一步操作，按下等号后出现了一个值，只要没有报错，这个值就可以作为下一个运算的第一个运算数。

最后如果你对这个代码有任何疑问，欢迎在下文给我评论留言，只要我看到了就一定会回复哒！~~

DaiYuMeng

关注

6
点赞
踩
35

收藏

觉得还不错? 一键收藏
3
评论
JQuery实现简易计算器

最近在学习jquery框架，写了好多小demo，这个案例讲的就是jquery简易版计算器。本人目前承接各类小demo和作业，类型有HTML+CSS+JS/部分前端框架/JAVA/Android/PHP/高等数学，有意请私聊！效果图片如下：第一张是刚运行在网页时的效果图。第二张是输入运算数和运算符时的效果图。第三张是错误输入的运算符。整体代码如下：<html...
复制链接

扫一扫