console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单计算器</title>
</head>
<body>
<p>简单计算器:</p>
<table border="1" style="position: center;">
<tr>
<td>第一个数:</td>
<td><input type="text" id="first" /></td>
</tr>
<tr>
<td>第二个数:</td>
<td><input type="text" id="twice"></td>
</tr>
<tr>
<td colspan="2">
<button style="width: inherit;" onclick="add()">+</button>
<button style="width: inherit;" onclick="subtrast()">-</button>
<button style="width: inherit;" onclick="ride()">*</button>
<button style="width: inherit;" onclick="devide()">/</button>
<input type="button" id="clear" value="清空">
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<p id="result"></p>
</td>
</tr>
</table>
<script>
var result_1;
function add(){
var a=getFirstNumber();
var b=getTwiceNumber();
var re=Number(a)+Number(b);
sendResult(re);
}
function subtrast(){
var a=getFirstNumber();
var b=getTwiceNumber();
var re=a-b;
sendResult(re);
}
function ride(){
var a=getFirstNumber();
var b=getTwiceNumber();
var re=a*b;
sendResult(re);
}
function devide(){
var a=getFirstNumber();
var b=getTwiceNumber();
var re=a/b;
sendResult(re);
}
function sendResult(result_1){
var num=document.getElementById("result");
num.innerHTML=result_1;
}
function getFirstNumber(){
var firstNumber=document.getElementById("first").value;
return firstNumber;
}
function getTwiceNumber(){
var twiceNumber=document.getElementById("twice").value;
return twiceNumber;
}
document.getElementById("clear").addEventListener("click",function(){
document.getElementById("first").value="";
document.getElementById("twice").value="";
document.getElementById("result").value="";
})
</script>
</body>
</html>