JavaScript制作简易计算器
标签:
JavaScript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.button
{
width: 55px;
height: 20px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td></td>
<td>购物简易计算器</td>
</tr>
<tr>
<td>第一个数</td>
<td><input type="text" id="oneNum"/></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="twoNum"/></td>
</tr>
<tr>
<td colspan="2">
<input onclick="add()" type="button" id="add" value="+" class="button" />
<input onclick="sub()" type="button" id="sub" value="-" class="button"/>
<input onclick="mul()" type="button" id="mul" value="*" class="button"/>
<input onclick="divide()" type="button" id="divide" value="/" class="button"/>
</td>
</tr>
<tr>
<td>计算结果</td>
<td><input type="text" id="result"/></td>
</tr>
</table>
</body>
<script>
var num_1=document.getElementById("oneNum");
var num_2=document.getElementById("twoNum");
var result=document.getElementById("result");
function add(){
result.value=parseFloat(num_1.value)+parseFloat(num_2.value);
}
function sub(){
result.value=parseFloat(num_1.value)-parseFloat(num_2.value);
}
function mul(){
result.value=parseFloat(num_1.value)*parseFloat(num_2.value);
}
function divide(){
result.value=parseFloat(num_1.value)/parseFloat(num_2.value);
}
</script>
</html>
点击查看更多内容
4人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦