jQuery 计算器，连续计算

最新推荐文章于 2023-06-13 19:19:43 发布

_胖_洋_葱_Silov

最新推荐文章于 2023-06-13 19:19:43 发布

阅读量1.3k

点赞数 1

分类专栏： jQuery 文章标签： jquery html

本文链接：https://blog.csdn.net/BlueBird_237/article/details/38012863

版权

jQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一个简单的jQuery计算器，只是实现了一个连续计算的功能

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf8"/>
	<title>Jquery计算器</title>
</head>
<body>
	<table>
		<tr>
			<td colspan="4"><input id="show" value="0"/></td>
		</tr>
		<tr>
			<td><button class="num" value="7">7</button></td>
			<td><button class="num" value="8">8</button></td>
			<td><button class="num" value="9">9</button></td>
			<td><button class="sym" value="+">+</button></td>
		</tr>
		<tr>
			<td><button class="num" value="4">4</button></td>
			<td><button class="num" value="5">5</button></td>
			<td><button class="num" value="6">6</button></td>
			<td><button class="sym" value="-">-</button></td>
		</tr>
		<tr>
			<td><button class="num" value="1">1</button></td>
			<td><button class="num" value="2">2</button></td>
			<td><button class="num" value="3">3</button></td>
			<td><button class="sym" value="*">*</button></td>
		</tr> 
		<tr> 
			<td><button class="num" value="0">0</button></td>
			<td><button class="sym" value="=">=</button></td>
			<td><button class="clr" value="c">c</button></td>
			<td><button class="sym" value="/">/</button></td>
		</tr>
	</table>
</body>
<script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var num0 = null;
var num1 = null;
var symble = null;
var lastclick = null;
var symarr = new Array();		//符号集合
symarr[0] = '+';
symarr[1] = '/';
symarr[2] = '*';
symarr[3] = '-';
symarr[4] = '=';
$('.num').click(function (){
	var numnow = $('#show');
	var _exist=$.inArray(lastclick,symarr); //判断上次点击是否为符号
	if (numnow.val() == 0 || _exist != -1) {//若显示框为0 或者上次点击为符号，则重新记录显示框
		numnow.val($(this).val());
	}else{
		numnow.val(parseInt(numnow.val()) * 10 +parseInt($(this).val()));
	}
	lastclick = $(this).val();   // 更新上次点击
});
$('.sym').click(function (){
	var numnow = $('#show');
	var _exist=$.inArray(lastclick,symarr);  
	if (num0 == null && symble == null) {	//初始状态
		num0 = numnow.val();
		symble = $(this).val();
	}else if(num0 != null && _exist !=-1){ // 连续点操作符的处理，及第一次点击操作符处理
		if ($(this).val() != '=') {
			symble = $(this).val();
		}else{
			var result = calculate(symble,num0,num1);
			num0 = result;
			numnow.val(result);
		}
	}else{					//正常计算状态
		num1 = numnow.val();
		var result = calculate(symble,num0,num1);
		if ($(this).val() != '=') {
			symble = $(this).val();	//上行及本行：先计算之前的运算符及结果，再更新运算符为本次点击
		}
		num0 = result;		
		numnow.val(result);
	}
	lastclick = $(this).val();	// 更新上次点击
});
$('.clr').click(function (){
	$('#show').val('0');
	num0 = null;
	num1 = null;
	symble = null;
	lastclick = null;
});

function calculate(sym,m,n){  //计算并返回结果
	var res = null;
	m = parseInt(m);
	n = parseInt(n);
	switch(sym){
		case '+':
			res = m+n;
			break;
		case '-':
			res = m-n;
			break;
		case '*':
			res = m*n;
			break;
		case '/':
			if (n == 0) {
				alert("false");
				break;
			}
			res = m/n;
			break;
		default:
			res = m;
			break;
	}
	return res;
}
</script>
</html>