采用jquery实现简单的计算器

实现的原理只要是利用jquery eval(string）函数对字符串的计算。

string:必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。

返回值

通过计算 string 得到的值（如果有的话）。

说明

该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。

如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。

抛出

如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。

如果非法调用 eval()，则抛出 EvalError 异常。

如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
		<link href="bootstrap-3.3.0/dist/css/bootstrap-theme.min.css" />
		<style>
			*{
				padding: 0;margin: 0;
			}
			#maxbox{
				width: 300px;
				padding-top: 12px;
				margin: 0 auto;
			}
			td{
				border: 1px grey solid;
				width: 54px;
				height: 54px;
				text-align: center;
				background-color: #00FFFF;
				color: #0074D9;
				font-size: 24px;
				font-weight: bold;
			}
			#input{
				width: 286px;
				height: 32px;
				margin-left: 2px;
				font-size: 14px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<table width="200" border="1" cellpadding="2">
		  <tr>
		    <td colspan="4"><input type="text" name="result" id="result" size="33"></td>
		  </tr>
		  <tr>
		    <td><input type="button" value="  1   " onclick="getNum(1)"></td>
		    <td><input type="button" value="  2   " onclick="getNum(2)"></td>
		    <td><input type="button" value="  3   " onclick="getNum(3)"></td>
		    <td><input type="button" value="  +   " onclick="getNum('+')"></td>
		  </tr>
		  <tr>
		    <td><input type="button" value="  4   " onclick="getNum(4)"></td>
		    <td><input type="button" value="  5   " onclick="getNum(5)"></td>
		    <td><input type="button" value="  6   " onclick="getNum(6)"></td>
		    <td><input type="button" value="  -   " onclick="getNum('-')"></td>
		  </tr>
		  <tr>
		    <td><input type="button" value="  7   " onclick="getNum(7)"></td>
		    <td><input type="button" value="  8   " onclick="getNum(8)"></td>
		    <td><input type="button" value="  9   " onclick="getNum(9)"></td>
		    <td><input type="button" value="  *   " onclick="getNum('*')"></td>
		  </tr>
		  <tr>
		    <td><input type="button" value="  0   " onclick="getNum(0)"></td>
		    <td><input type="button" value="  00   " onclick="getNum('00')"></td>
		    <td><input type="button" value="  .   " onclick="getNum('.')"></td>
		    <td><input type="button" value="  /   " onclick="getNum('/')"></td>
		  </tr>
		  <tr>
		    <td><input type="button" value="  (   " onclick="getNum('(')"></td>
		    <td><input type="button" value="  )   " onclick="getNum(')')"></td>
		    <td><input type="button" value="  %   " onclick="getNum('%')"></td>
		    <td><input type="button" value="  =   " onclick="getResult()"></td>
		  </tr>
		</table>
		<script language="javascript" type="text/javascript">
			 var cleartext=false;//设置标识值
			 function getNum(num){
			 //alert(num);
			  var result=document.getElementById("result");
			  if(cleartext){
			   result.value="";
			   cleartext=false;
			  }
			 result.value+=num;
			 }
			function getResult(){
			 var result=document.getElementById("result");
			 result.value=result.value+"="+eval(result.value);
			 cleartext=true;//计算结果后改变标识
			}
		</script>
	</body>
</html>特别说明

特别说明：在实现计算表达式的时候一定要注意计算表达式的为合法表达式，异常请参考上面的抛出部分

界面展示以及结果展示

采用jquery实现简单的计算器

猜你喜欢