JavaScript实现的计算器

2015/02/26 42855
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript计算器</title>
<style type="text/css">
input {
	background-color: #CCC;
	width: 70px;
	height: 40px;
}

table {
	background-color: #999;
	border: 3px solid #666;
	padding: 3px;
}

.result {
	width: 420px;
	background-color: #999;
	margin-bottom: 10px;
	font-family: "微软雅黑", Verdana, sans-serif, "宋体";
	font-size: 14px;
	color: #FFF;
	padding-left: 20px;
}

.clear {
	width: 146px;
}
</style>
</head>
<script language="JavaScript">
	var baseoper;
	var digitstate;
	var num1;
	var operstate;

	function setStartState() {
		digitstate = "beempty";
		num1 = 0;
		baseoper = "beempty";
		operstate = false;

	}
	function add(i) {
		if (operstate) {
			cal.total.value = i;
			operstate = false;
		} else {
			if (cal.total.value == "0") {
				cal.total.value = i;
				digistate = "bein";
			} else
				cal.total.value += i;
		}
	}
	function cleartext() {
		cal.total.value = "0";
		digitstate = "beempty";
		basestate = "beempty"
	}

	function count() {
		if (baseoper != "beempty") {
			switch (baseoper) {
			case "+":
				num1 = parseFloat(num1) + parseFloat(cal.total.value);
				break;
			case "-":
				num1 = parseFloat(num1) - parseFloat(cal.total.value);
				break;
			case "*":
				num1 = parseFloat(num1) * parseFloat(cal.total.value);
				break;
			case "/":
				num1 = parseFloat(num1) / parseFloat(cal.total.value);
				break;
			}
			preoper = true;
			cal.total.value = num1;
		}
		baseoper = "beempty";
	}
	function useFunc(func) {
		switch (func) {
		case "sin":
			cal.total.value = Math.sin(cal.total.value);
			break;
		case "cos":
			cal.total.value = Math.cos(cal.total.value);
			break;
		case "asin":
			cal.total.value = Math.asin(cal.total.value);
			break;
		case "acos":
			cal.total.value = Math.acos(cal.total.value);
			break;
		case "tan":
			cal.total.value = Math.tan(cal.total.value);
			break;
		case "atan":
			cal.total.value = Math.atan(cal.total.value);
			break;
		case "log":
			cal.total.value = Math.log(cal.total.value);
			break;
		case "exp":
			cal.total.value = Math.exp(cal.total.value);
			break;
		case "sqrt":
			cal.total.value = Math.sqrt(cal.total.value);
			break;
		case "1/x":
			cal.total.value = 1 / cal.total.value;
			break;
		}
		operstate = true;
	}
	function addPoint() {
		if (digitstate == "bein" || digitstate == "beempty") {
			cal.total.value += ".";
			digistate = "befloat";
		}
	}
	function setOper(oper) {
		operstate = true;
		if (baseoper == "beempty") {
			num1 = 0 + cal.total.value;
			baseoper = oper;
		} else {
			count();
			baseoper = oper;
		}
	}
</script>
<body onload="setStartState()">
<h2>JavaScript计算器</h2>
<form name="cal">
<table cellpadding="0" cellspacing="0">
	<tr align="center">
		<td colspan="6"><input class="result" type="Text" name="total"
			size="25" value="0"></td>
	</tr>
	<tr align="center">
		<td><input type="Button" value="sin" onclick="useFunc('sin')"></td>
		<td><input type="Button" value="cos" onclick="useFunc('cos')"></td>
		<td><input type="Button" value="1" onclick="add('1')"></td>
		<td><input type="Button" value="2" onclick="add('2')"></td>
		<td><input type="Button" value="3" onclick="add('3')"></td>
		<td><input type="Button" value="+" onclick="setOper('+')"></td>
	</tr>
	<tr align="center">
		<td><input type="Button" value="asin" onclick="useFunc('asin')"></td>
		<td><input type="Button" value="acos" onclick="useFunc('acos')"></td>
		<td><input type="Button" value="4" onclick="add('4')"></td>
		<td><input type="Button" value="5" onclick="add('5')"></td>
		<td><input type="Button" value="6" onclick="add('6')"></td>
		<td><input type="Button" value="-" onclick="setOper('-')"></td>
	</tr>
	<tr align="center">
		<td><input type="Button" value="tan" onclick="useFunc('tan')"></td>
		<td><input type="Button" value="atan" onclick="useFunc('atan')"></td>
		<td><input type="Button" value="7" onclick="add('7')"></td>
		<td><input type="Button" value="8" onclick="add('8')"></td>
		<td><input type="Button" value="9" onclick="add('9')"></td>
		<td><input type="Button" value="x" onclick="setOper('*')"></td>
	</tr>
	<tr align="center">
		<td><input type="Button" value="log" onclick="useFunc('log')"></td>
		<td><input type="Button" value="exp" onclick="useFunc('exp')"></td>
		<td><input type="Button" value="0" onclick="add('0')"></td>
		<td><input type="Button" value="." onclick="addPoint()"></td>
		<td><input type="Button" value="c" onclick="cleartext()"></td>
		<td><input type="Button" value="÷" onclick="setOper('/')"></td>
	</tr>
	<tr align="center">
		<td><input type="Button" value="sqrt" onclick="useFunc('sqrt')">
		<td><input type="Button" value="1/x" onclick="useFunc('1/x')">
		<td><input type="Button" value="pi"
			onclick="cal.total.value=Math.PI"></td>
		<td><input type="Button" value="E"
			onclick="cal.total.value=Math.E"></td>
		<td colspan=2><input class="clear" type="Button" value="="
			onclick="count()"></td>
	</tr>
</table>
</form>
</body>
</html>
代码片段
