css部分
table{margin: 100px auto;height: 500px;}
input{width: 100%;height: 100%;}
td{color: #000;text-align: center;font-size: 40px;cursor: pointer;}
input{font-size: 40px;}
html部分
<table width="400px" border="1">
<tr>
<td colspan="4"><input type="text" id="number" value=""/></td>
</tr>
<tr>
<td onclick="enterNumber(7)">7</td>
<td onclick="enterNumber(8)">8</td>
<td onclick="enterNumber(9)">9</td>
<td onclick="del()">C</td>
</tr>
<tr>
<td onclick="enterNumber(4)">4</td>
<td onclick="enterNumber(5)">5</td>
<td onclick="enterNumber(6)">6</td>
<td onclick="calculater('/')">/</td>
</tr>
<tr>
<td onclick="enterNumber(1)">1</td>
<td onclick="enterNumber(2)">2</td>
<td onclick="enterNumber(3)">3</td>
<td onclick="calculater('x')">x</td>
</tr>
<tr>
<td onclick="enterNumber(0)">0</td>
<td onclick="calculater('+')">+</td>
<td onclick="calculater('-')">-</td>
<td onclick="calculater('=')">=</td>
</tr>
</table>
js部分
var results ="", flag = false, ope = "";
function $(id){
return document.getElementById(id);
}
function enterNumber(Num){
if (flag) {
$("number").value = Num;
flag = false;
}else{
if ($("number.value") == '0') {
$("number").value = Num;
}else{
$("number").value += Num;
}
}
}
function del(){
results = "";
$("number").value = "";
}
function calculater(symbol){
var fnum = $("number").value;
flag = true;
if (ope != "=") {
if (ope == '+') {
results += parseFloat(fnum);
}else if(ope == '-'){
results -= parseFloat(fnum);
}else if (ope == '/') {
results /= parseFloat(fnum);
}else if (ope == 'x') {
results *= parseFloat(fnum);
}else{
results = parseFloat(fnum);
}
}
ope=symbol;
$("number").value = results;
}