JavaScript實現簡單計算器
阿新 • • 發佈：2019-01-31
一位 trac turn result set 加法 除法 asc class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>簡單計算器</title>
</head>
<body>
<p align="center">簡單計算器</p>
<div align="center">
<table border="1" style="position: center;">
<tr>
<td>第一個數：</td><td><input type="text" id="first"></td>
</tr>
<tr><td>第二個數：</td><td><input type="text" id="twice"></td>
</tr>
<tr>
<td colspan="2">
<button style="width:inherit" onclick="add()">+</button>
<button style="width:inherit" onclick="subtract()">-</button>
<button style="width:inherit" onclick="ride()">*</button>
<button style="width:inherit" onclick="devide()">/</button>
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<p id="result"></p>
</td>
</tr>
</table></div>
<script type="text/javascript">
//加法
function add()
{
var a=getFirstNumber();
var b=getTwiceNumber();
var re=Number( a) +Number( b);//註意:這裏不允許寫成a+b;
sendResult(re);
}
//減法
function subtract(){
var a=getFirstNumber();
var b=getTwiceNumber();
var re=a-b;
sendResult(re);
}
//乘法
function ride(){
var a=getFirstNumber();
var b=getTwiceNumber();
var re=a*b;
sendResult(re);
}
//除法
function devide(){
var a=getFirstNumber();
var b=getTwiceNumber();
var re=a/b;
sendResult(re);
}
//給P標簽傳值
function sendResult(result_1){
var num=document.getElementById("result");
num.innerHTML=result_1;
}
//獲取第一位數字
function getFirstNumber(){
var firstNumber=document.getElementById("first").value;
return firstNumber;
}
//獲取第二位數字
function getTwiceNumber(){
var twiceNumber=document.getElementById("twice").value;
return twiceNumber;
}
</script>
</body>
</html>
JavaScript實現簡單計算器