制作简易计算器

最新推荐文章于 2021-08-09 13:39:35 发布

Miss_ Crush

最新推荐文章于 2021-08-09 13:39:35 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/miss_forget/article/details/80048197

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<script type="text/javascript">
function mycomputer(op){
var num1 = document.getElementById('num1').value;
n1 = Number(num1);
var num2 = document.getElementById('num2').value;
n2 = Number(num2);
var result = "";
n1 = parseInt(n1);
n2 = parseInt(n2);
switch(op){
case "+":
result = n1+n2;
break;
case "-":
result = n1-n2;
break;
case "*":
result = n1*n2;
break;
case "/":
result = n1/n2;
break;
}
document.getElementById("result").value = result;
}

</script>
<style type="text/css">
table{
width: 400px;
margin: 30px auto;
border: 1px solid #e1e1e1;
border-collapse: collapse;
}
td,th{
border: 1px solid #e1e1e1;
}
th{
height: 40px;
line-height: 40px;
font-size: 16px;
}
td{
height: 30px;
padding-left: 15px;
font-size: 14px;
}
input[type=text]{
border: 1px solid #adbdef;
height: 22px;
width: 180px;
line-height: 22px;
}
input[type=button]{
background: #adbdef;
width: 45px;
height: 28px;
border: 0;
margin-top: 6px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">简易计算器</th>
</tr>
<tr>
<td>第一个数</td>
<td><input type="text" id="num1"></td>
<td rowspan="4">
<input type="button" value="+" οnclick="mycomputer('+')"><br>
<input type="button" value="-" οnclick="mycomputer('-')"><br>
<input type="button" value="*" οnclick="mycomputer('*')"><br>
<input type="button" value="/" οnclick="mycomputer('/')">
</td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="num2"></td>
</tr>
<tr>
<td>结果</td>
<td><input type="text" id="result"></td>
</tr>
<tr>
<td colspan="2">运算方法:先输入两个数,再选择算法</td>
</tr>
</table>
</body>
</html>

Miss_ Crush

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作简易计算器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简易计算器&lt;/title&gt; &lt;script type="text/javascript"&gt; function myco
复制链接

扫一扫