<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<tr>
<td><img src="" /></td>
<td colspan="3">购物简易计算器</td>
</tr>
<tr>
<td>第一个数</td>
<td colSpan="3">
<input type="test" id="num1" />
</td>
</tr>
<tr>
<td>第二个数</td>
<td colSpan="3">
<input type="test" id ="num2" />
</td>
</tr>
<tr>
<td>
<input type="button" value=" + " οnclick="cal('+')"/>
</td>
<td>
<input type="button" value=" - " οnclick="cal('-')"/>
</td>
<td>
<input type="button" value=" * " οnclick="cal('*')"/>
</td>
<td>
<input type="button" value=" / " οnclick="cal('/')"/>
</td>
</tr>
<tr>
<td>计算结果</td>
<td colspan="3">
<input type="test" id="resultId" />
</td>
</tr>
</table>
<script type="text/javascript">
function cal(type){
var inputObj1 = document.getElementById('num1')
var inputObj2 = document.getElementById('num2')
var result;
switch(type){
case '+':
result = parseInt(inputObj1.value) + parseInt(inputObj2.value);
break;
case '-':
result = parseInt(inputObj1.value) - parseInt(inputObj2.value);
break;
case '*':
result = parseInt(inputObj1.value) * parseInt(inputObj2.value);
break;
case '/':
result = parseInt(inputObj1.value) / parseInt(inputObj2.value);
break;
}
console.log(result);
var resultObj = document.getElementById('resultId');
resultObj.value = result;
}
</script>
<!-- 错误点
1、中英文括号
2、单词拼写
3、<td> 斜杠不对应
4、case-break不对应
5、inputObj未分1,2
6、table框架-->
</body>
</html>
HTML制作简易计算机(一开始错了不知道哪里错的,看了很久才发现全都是小错误,注意细节。错误在最后)
最新推荐文章于 2022-09-04 18:40:57 发布
关键词由CSDN通过智能技术生成