html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 50px;
height: 40px;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="img/cart.png"></td>
<td colspan="3">购物简易计算器</td>
</tr>
<tr>
<td>第一个数</td>
<td colspan="3" ><input type="text" ></td>
</tr>
<tr>
<td>第二个数</td>
<td colspan="3"><input type="text" ></td>
</tr>
<tr>
<td><button onclick="cal('+')">+</button></td>
<td><button onclick="cal('-')">-</button></td>
<td><button onclick="cal('*')">*</button></td>
<td><button onclick="cal('/')">/</button></td>
</tr>
<tr>
<td>计算结果</td>
<td colspan="3"><input type="text" id="result"></td>
</tr>
</table>
<script>
function cal(type) {
var num1 = document.getElementsByTagName('input')[0].value;
var num2 = document.getElementsByTagName('input')[1].value;
var result = eval(parseInt(num1) + type + parseInt(num2));
document.getElementById('result').value = result;
}
</script>
</body>
</html>