js____简单计算器

最新推荐文章于 2020-03-09 12:46:42 发布

Fxz_Jyy

最新推荐文章于 2020-03-09 12:46:42 发布

阅读量233

点赞数

分类专栏： javascript 文章标签： js html

本文链接：https://blog.csdn.net/Fxz_Jyy/article/details/79871490

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

老师让我们做一个小的计算器，程度上是很小的，之前有过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>