<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用JavaScript制作运算器</title>
		
		<style type="text/css">
			#result{
				width: 500px;
			}
			
			table td{
				width: 80px;
			}
		</style>
	</head>
	<body>
		<table width="500px">
			<!--占六个位置的方框-->
			<tr><td colspan="6"><input type="text" name="" id="result" value="" /></td></tr>
			
			<tr>	<!--tr是行-->
				<td><button onclick="fill_result(this)">0</button></td>
				<td><button onclick="fill_result(this)">1</button></td>
				<td><button onclick="fill_result(this)">2</button></td>
				<td><button onclick="fill_result(this)">3</button></td>
				<td><button onclick="fill_result(this)">4</button></td>
				<td><button onclick="fill_result(this)">+</button></td>
			</tr>
			
			<tr>	<!--tr是行，td是列-->
				<td><button onclick="fill_result(this)">5</button></td>
				<td><button onclick="fill_result(this)">6</button></td>
				<td><button onclick="fill_result(this)">7</button></td>
				<td><button onclick="fill_result(this)">8</button></td>
				<td><button onclick="fill_result(this)">9</button></td>
				<td><button onclick="fill_result(this)">-</button></td>
			</tr>
			
			<tr>	<!--tr是行-->
				<td><button onclick="fill_result(this)">*</button></td>
				<td><button onclick="fill_result(this)">/</button></td>
				<td><button onclick="fill_result(this)">**</button></td>
				<td><button onclick="to_hex()">十六进制</button></td>
				<td></td>	<!--实现中间空白一行的效果-->
				<td><button onclick="to_binnery()">二进制</button></td>
			</tr>
			
			<!--实现中间空白三行的效果-->
			<tr><td></td></tr>
			<tr><td></td></tr>
			<tr><td></td></tr>	
			
			
			<tr>	<!--tr是行-->
				<td></td>
				<td></td>
				<td><button onclick="counter()">Enter</button></td>
			</tr>
			
		
		</table>
		
		<script type="text/javascript">
			var myresult=document.getElementById("result");
			var s="";
			function fill_result(Object) {
				myresult.value += Object.innerHTML;
				s = myresult.value;
			}
			
			function counter() {	<!--实现Enter：返回运行结果到显示框-->
				s = eval(s);
				myresult.value=s;
			}
			
			function to_binnery() {		<!--实现二进制功能-->
				s = Number(s).toString(2);
				myresult.value = s;
			}
			
			
			function to_hex() {		<!--实现十六进制功能-->
				s = Number(s).toString(16);
				if(s <= 16) {
					myresult.value = s;
				}
				else {
					myresult.value = s+'H';
				}
			}
		</script>
	</body>
</html>

更多推荐

在html文件中使用JavaScript实现运算器（计算器）功能——平方、二进制、十六进制