老师让我们做一个小的计算器,程度上是很小的,之前有过HTML的基础。但是熟练程度感觉还是不行,还需课下多加练习
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
width:30%;
border:1px solid #ccc;
border-collapse:collapse;
margin:10px auto;
}
td{
border:1px solid #ccc;
}
</style>
<script type="text/javascript">
function show(fuhao){
var num1=document.getElementById('shu1').value;
var num2=document.getElementById('shu2').value;
num1=Number(num1);
num2=Number(num2);
var result=0;
switch(fuhao.value){
case'+':
result=num1+num2;
break;
case'-':
result=num1-num2;
break;
case'*':
result=num1*num2;
break;
case'/':
result=num1/num2;
break;
}
document.getElementById('jieguo').value=result;
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="3" align="center">计算器</td>
</tr>
<tr>
<td>第一个</td>
<td><input id="shu1" type="text" name="first"></td>
<td><input type="button" name="an" value="+" οnclick="show(this)"></td>
</tr>
<tr>
<td>第二个</td>
<td><input id='shu2'type="text" name="second"></td>
<td><input type="button" name="an" value="-" οnclick="show(this)"></td>
</tr>
<tr>
<td>结果</td>
<td><input type="text" id="jieguo" name="result"></td>
<td><input type="button" name="jieguo" value="*" οnclick="show(this)"></td>
</tr>
<tr>
<td>运算方法:</td>
<td>先两个数,再选择算法</td>
<td><input type="button" value="/"οnclick="show(this)"></td>
</tr>
</table>
</body>
</html>