<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="calculator2.css">
</head>
<body>
<div class="result-area">
<input id="result" class="result" type="text" readonly>
</div>
<div class="btn-area">
<button id="btn1" class="btn-top" onclick="append(this)">1</button>
<button id="btn2" class="btn-top" onclick="append(this)">2</button>
<button id="btn3" class="btn-top" onclick="append(this)">3</button>
<button id="btn-add" class="btn-top-right" onclick="append(this)">+</button>
<button id="btn4" class="btn" onclick="append(this)">4</button>
<button id="btn5" class="btn" onclick="append(this)">5</button>
<button id="btn6" class="btn" onclick="append(this)">6</button>
<button id="btn-sub" class="btn-right" onclick="append(this)">-</button>
<button id="btn7" class="btn" onclick="append(this)">7</button>
<button id="btn8" class="btn" onclick="append(this)">8</button>
<button id="btn9" class="btn" onclick="append(this)">9</button>
<button id="btn-mul" class="btn-right" onclick="append(this)">*</button>
<button id="btn0" class="btn" onclick="append(this)">0</button>
<button id="btn-clear" class="btn" onclick="clr()">C</button>
<button id="btn-equal" class="btn" onclick="equal()">=</button>
<button id="btn-div" class="btn-right" onclick="append(this)">/</button>
<button id="btn-left-bracket" class="btn" onclick="append(this)">(</button>
<button id="btn-right-bracket" class="btn" onclick="append(this)">)</button>
<button id="btn-point" class="btn" onclick="append(this)">.</button>
<button id="btn-mod" class="btn-right" onclick="append(this)">%</button>
</div>
</body>
<script type="text/javascript" src="calculator2.js"></script>
</html>
CSS代码
*{ margin: 0; padding: 0;}.result-area{ width: 306px; margin: 60px auto 0;}.result{ width: 304px; height: 40px; border: 1px solid #ccc; text-align: right; line-height: 40px; font-size: 2em; outline: none;}.btn-area{ width: 306px; height: 200px; margin: 20px auto 0;}button{ width: 75px; height: 40px; border: 1px solid #ccc; font-size: 2em; outline: none; float: left;}.btn-top{ margin-right: 2px;}.btn{ margin-right: 2px; border-top: 0;}.btn-right{ border-top: 0;}
JavaScript代码
var result = document.getElementById("result");// 按下键向显示框添加键上的数字或符号function append(obj) { var btnText = obj.innerText; var resultText = result.value; if(!inputValid(resultText, btnText)) { alert("输入不合法"); return; } result.value = result.value + btnText;}// 按下清除按钮后清除显示框的内容function clr() { result.value = "";}// 按下等于键计算显示框表达式的值function equal() { if(dividedBy0(result.value)) { alert("除数不能为0"); clr(); return; } try { result.value = parseFloat(eval(result.value).toFixed(8)); } catch(e) { alert("输入不合法"); }}// 判断输入是否合法,如果输入不完整,那么补"0"或右括号或"0"和右括号结合使表达式完整function inputValid(str, ch) { var exp = str + ch; try { eval(exp); return true; } catch(e) { try { eval(exp + "0"); return true; } catch(e) { try { eval(exp + rightBracketsToFill(exp)); return true; } catch(e) { try { eval(exp + "0" + rightBracketsToFill(exp)); return true; } catch(e) { return false; } } } }}// 获得需要补齐的右括号的数量,并拼接右括号function rightBracketsToFill(str) { var l = 0; var r = 0; for(var i = 0; i < str.length; i++) { var ch = str.charAt(i); if(ch == "(") { l++; } if(ch == ")") { r++; } } var rightBrackets = ""; for(var i = 0; i < l - r; i++) { rightBrackets = rightBrackets + ")"; } return rightBrackets;}// 导致除数为0的子字符串可能是"/0" "%0" "/.0" "%.0"function dividedBy0WithFormat(str, sub) { var index = str.indexOf(sub); if(index < 0) { return false; } if(index + sub.length == str.length) { return true; } for(var i = index + sub.length; i < str.length; i++) { var ch = str.charAt(i); if(isNaN(ch) && ch != ".") { return true; } if(!isNaN(ch) && ch > 0) { return false; } } return true;}// 判断除数是否为0function dividedBy0(str) { return dividedBy0WithFormat(str, "/0") || dividedBy0WithFormat(str, "%0") || dividedBy0WithFormat(str, "/.0") || dividedBy0WithFormat(str, "%.0");}
