代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<span id="result"></span>
</div>
<table border="1px" width="200px" height="300px">
<tbody align="center">
<tr>
<td width="50px" οnclick="leftBracket()">(</td>
<td width="50px" οnclick="rightBracket()">)</td>
<td width="50px" οnclick="ppow()">^</td>
<td width="50px" οnclick="psqrt()">√</td>
</tr>
<tr>
<td οnclick="c()">C</td>
<td οnclick="po('%')">%</td>
<td width="50px" οnclick="backspace()"><img src="img/back.png" width="25px"/></td>
<td οnclick="po('÷')">÷</td>
</tr>
<tr>
<td οnclick="pn(7)">7</td>
<td οnclick="pn(8)">8</td>
<td οnclick="pn(9)">9</td>
<td οnclick="po('×')">×</td>
</tr>
<tr>
<td οnclick="pn(4)">4</td>
<td οnclick="pn(5)">5</td>
<td οnclick="pn(6)">6</td>
<td οnclick="po('-')">-</td>
</tr>
<tr>
<td οnclick="pn(1)">1</td>
<td οnclick="pn(2)">2</td>
<td οnclick="pn(3)">3</td>
<td οnclick="po('+')">+</td>
</tr>
<tr>
<td οnclick="pn('00')">00</td>
<td οnclick="pn(0)">0</td>
<td οnclick="pn('.')">.</td>
<td οnclick="equals1()">=</td>
</tr>
</tbody>
</table>
</body>
<script>
//div块元素
var result;
//是否进行了运算
var equal = false;
window.onload = function(){
result = document.getElementById("result");
result.innerHTML = "";
}
//如果进行了运算,下次输入数前进行清零
function isEqual(){
if (equal){
c();
equal = false;
}
}
function pn(n){
isEqual();
result.innerHTML += n;
}
function po(o){
result.innerHTML += o;
equal = false;
}
function leftBracket(){
isEqual();
var r = result.innerHTML;
var c = r.charAt(r.length - 1);
if ("0" <= c && c <= "9" || c == "%"){
po("×");
}
result.innerHTML += "(";
}
function rightBracket(){
isEqual();
result.innerHTML += ")"
}
function ppow(){
isEqual();
result.innerHTML += "^"
}
function psqrt(){
isEqual();
var r = result.innerHTML;
var c = r.charAt(r.length - 1);
if ("0" <= c && c <= "9" || c == "%"){
po("×");
}
result.innerHTML += "√";
}
function c(){
result.innerHTML = "";
}
function backspace(){
var r = result.innerHTML;
result.innerHTML = r.substr(0,r.length - 1);
isEqual();
}
function equals1(){
equal = true;
var r = result.innerHTML;
//将特殊字符进行替换
r = r.replace(/×/g,"*");
r = r.replace(/÷/g,"/");
r = r.replace(/%/g,"*0.01");
try{
r = pow(r);
r = sqrt(r);
result.innerHTML=eval(r);
}catch(e){
result.innerHTML="表达式不正确";
}
}
function pow(r){
var arr = r.split("^");
if (arr.length == 1){
return r;
}
var leftstr = leftOperation(arr[0]);
var rightstr = rightOperation(arr[1]);
var num = "Math.pow(" + leftstr + "," + rightstr + ")";
var leftr = arr[0].substring(0,arr[0].length - leftstr.length);
var rightr = arr[1].substring(rightstr.length,arr[1].length);
var r = leftr + num + rightr;
return pow(r);
}
function sqrt(r){
if (r.indexOf("√") == -1){
return r;
}
var arr = r.split("√");
var rightstr = rightOperation(arr[1]);
var num = "Math.sqrt(" + rightstr + ")";
var leftr = arr[0];
var rightr = arr[1].substring(rightstr.length,arr[1].length);
var r =leftr + num + rightr;
return sqrt(r);
}
function leftOperation(r){
var leftBracket = 0;
var rightBracket = 0;
var i;
for (i = r.length - 1; i >=0; i--){
var c = r.charAt(i);
if (c == ")"){
rightBracket++;
} else if (leftBracket == rightBracket && c >="0" && c <= "9"){
break;
} else if (c == "("){
leftBracket++;
}
}
return r.substring(i);
}
function rightOperation(r){
var leftBracket = 0;
var rightBracket = 0;
var i;
for (i = 0; i < r.length; i++){
var c = r.charAt(i);
if (c == "("){
leftBracket++;
} else if (leftBracket == rightBracket && c >="0" && c <= "9"){
break;
} else if (c == ")"){
rightBracket++;
}
}
return r.substring(0,i+1);
}
</script>
<style>
div {
width: 198px;
height: 50px;
border: 1px solid black;
border-bottom: none;
position: relative;
}
#result {
position: absolute;
right: 5px;
bottom: 5px;
}
</style>
</html>