两款简易计算器纯js版附源码下载

效果如图：

js代码如下，

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<input type="text" class="" id="res" readonly value="">
	<br>
	<input type="text" class="" id="input" readonly value="">
	<table>
		<tr>
			<td><button id="+" onclick="operate(this)">+</button></td>
			<td><button id="-" onclick="operate(this)">-</button></td>
			<td><button id="*" onclick="operate(this)">*</button></td>
			<td><button id="/" onclick="operate(this)">/</button></td>
		</tr>
		<tr>
			<td><button id="" onclick="getNum(this)">7</button></td>
			<td><button id="" onclick="getNum(this)">8</button></td>
			<td><button id="" onclick="getNum(this)">9</button></td>
			<td><button id="" onclick="backspace()"><-</button></td>
		</tr>
		<tr>
			<td><button id="" onclick="getNum(this)">4</button></td>
			<td><button id="" onclick="getNum(this)">5</button></td>
			<td><button id="" onclick="getNum(this)">6</button></td>
			<td><button id="" onclick="clearInput()">C</button></td>
		</tr>
		<tr>
			<td><button id="" onclick="getNum(this)">3</button></td>
			<td><button id="" onclick="getNum(this)">2</button></td>
			<td><button id="" onclick="getNum(this)">1</button></td>
			<td rowspan="2"><button id="equ" onclick="calculator()">=</button></td>
		</tr>
		<tr>
			<td colspan="2"><button id="zero" onclick="getNum(this)">0</button></td>
			<td><button id="" onclick="getNum(this)">.</button></td>
		</tr>
	</table>
	
</body>
<script type="text/javascript">
	var num_a = null;
	var num_b = null;
	var op = null;
	var init = false;
	
	//清空
	function clearInput() {
		
		init = false;
		
		document.getElementById("res").value = "";
		document.getElementById("input").value = "";
	}
	
	//退格
	function backspace() {
		//计算出来的结果不能退格
		if (init) return;
		
		var value = document.getElementById("input").value;
		document.getElementById("input").value = value.substring(0, value.length-1);
	}
	
	//显示点击的数字
	function getNum(obj) {
		//计算出结果后继续点数字则自动清空前一个算式
		if (init) clearInput();
		
		var Num = obj.innerHTML;
		var value = document.getElementById("input").value;
		
		if (Num == ".") {
			if (value == null || value == "") return;//开头不能是小数点
			if (value.indexOf(".") >= 0) return;//不能有多个小数点
		}
		
		document.getElementById("input").value += Num;
	}
	
	//+-*/ 操作
	function operate(obj){
	
		var value = document.getElementById("input").value;
		
		if (!cofrim(value)) {
			return;
		}
		document.getElementById("input").value = "";
		value = parseFloat(value);
		num_a = value;
		op = obj.id;
		
		document.getElementById("res").value = num_a + op;
	}
	
	//验证
	function cofrim(value) {
		if (value == null || value == "") {
			alert("您还没有输入数值，请输入");
			return false;
		}
		
		value = parseFloat(value);
		
		if (isNaN(value)) {
			alert("您输入有误，请输入数值");
			return false;
		}
		
		return true;
	}
	
	//计算
	function calculator() {
		var value = document.getElementById("input").value;
		
		if (!cofrim(value)) {
			return;
		}
		value = parseFloat(value);
		document.getElementById("input").value = "";
		
		if (op == "+") {
			num_b = value + num_a;
		} else if (op == "-") {
			num_b = num_a - value;
		} else if (op == "*") {
			num_b =  value * num_a;
		} else if (op == "/") {
			num_b = num_a / value;
		}
		
		document.getElementById("res").value += value + "=";
		document.getElementById("input").value = num_b;
		init = true;
	}
	
</script>
</html>

还有一款更简易的

下载地址：
链接：http://pan.baidu.com/s/1o8MEQwE 密码：3ssf

两款简易计算器纯js版附源码下载

猜你喜欢