您的位置：首页 > Web前端 > JavaScript

JavaScript实现简易计算器

2017-10-06 19:24 162 查看

从input取值并将值放入input2的操作：

var value = document.getElementById(“input”).value;

document.getElementById(“input2”).value =value;

最终效果

实现代码

<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
<style type="text/css">
* {
font: normal normal 18px "黑体";
}
#main {
margin: 0 auto;
}
h1 {
font: normal normal 24px "微软雅黑";
text-align: center;
}
div {
width: 610px;
}
input {
width: 140px;
height: 25px;
border: 1px solid #666;
outline: 0;
margin: 8px 2px;
}
.btn {
width: 80px;
border: 0;
background-color: #89B;
}
</style>
<script type="text/javascript">
function add() {
var a = document.getElementById("addNum1").value;
var b = document.getElementById("addNum2").value;
a = parseFloat(a);
b = parseFloat(b);
document.getElementById("addRes").value = (a+b).toFixed(3);
}
function sub() {
var a = document.getElementById("subNum1").value;
var b = document.getElementById("subNum2").value;
a = parseFloat(a);
b = parseFloat(b);
document.getElementById("subRes").value = (a-b).toFixed(3);
}
function multi() {
var a = document.getElementById("multiNum1").value;
var b = document.getElementById("multiNum2").value;
a = parseFloat(a);
b = parseFloat(b);
document.getElementById("multiRes").value = (a*b).toFixed(3);
}
function div() {
var a = document.getElementById("divNum1").value;
var b = document.getElementById("divNum2").value;
a = parseFloat(a);
b = parseFloat(b);
document.getElementById("divRes").value = (a/b).toFixed(3);
}
</script>
</head>
<body>
<div id="main">
<h1>JavaScript实现简易计算器</h1>
<div>
<input type="text" id="addNum1">
+
<input type="text" id="addNum2">
=
<input type="text" id="addRes">
<input type="button" class="btn" value="计算" onclick="add()">
</div>

<div>
<input type="text" id="subNum1">
-
<input type="text" id="subNum2">
=
<input type="text" id="subRes">
<input type="button" class="btn" value="计算" onclick="sub()">
</div>

<div>
<input type="text" id="multiNum1">
*
<input type="text" id="multiNum2">
=
<input type="text" id="multiRes">
<input type="button" class="btn" value="计算" onclick="multi()">
</div>

<div>
<input type="text" id="divNum1">
/
<input type="text" id="divNum2">
=

4000
<input type="text" id="divRes">
<input type="button" class="btn" value="计算" onclick="div()">
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航