直接上代碼：
首先是HTML代碼
1 <form> 2 第一個數字：<br> 3 <input type="text" id="num1"> 4 <br> 5 <br> 6 第二個數字：<br> 7 <input type="text" id="num2"> 8 <br> 9 <button id="add">+</button> 10 <button id="subtract">-</button> 11 <button id="multiply">*</button> 12 <button id="divide">/</button> 13 </form>
關於在js中計算，我寫了兩種常見方案
第一種是比較傻瓜式計算
1 <script type="text/javascript"> 2 //獲取加號按鈕 3 var addBtn = document.getElementById('add'); 4 var subtractBtn = document.getElementById('subtract'); 5 var multiplyBtn = document.getElementById('multiply'); 6 var divideBtn = document.getElementById('divide'); 7 8 9 //為按鈕添加點擊方法 10 addBtn.onclick = function(){ 11 var a = document.getElementById('num1').value; 12 var b = document.getElementById('num2').value; 13 var a_int = parseInt(a, 10); 14 var b_int = parseInt(b, 10); 15 //調用加法 16 var result = addition(a_int,b_int); 17 alert(result); 18 } 19 subtractBtn.onclick = function(){ 20 var a = document.getElementById('num1').value; 21 var b = document.getElementById('num2').value; 22 var a_int = parseInt(a, 10); 23 var b_int = parseInt(b, 10); 24 //調用減法 25 var result = substraction(a_int,b_int); 26 alert(result); 27 } 28 multiplyBtn.onclick = function(){ 29 var a = document.getElementById('num1').value; 30 var b = document.getElementById('num2').value; 31 var a_int = parseInt(a, 10); 32 var b_int = parseInt(b, 10); 33 //調用乘法 34 var result = multiplication(a_int,b_int); 35 alert(result); 36 } 37 divideBtn.onclick = function(){ 38 var a = document.getElementById('num1').value; 39 var b = document.getElementById('num2').value; 40 var a_int = parseInt(a, 10); 41 var b_int = parseInt(b, 10); 42 //調用減法 43 var result = division(a_int,b_int); 44 alert(result); 45 } 46 //構造函數 47 function addition(x, y){ 48 return x + y; 49 } 50 function substraction(x, y){ 51 return x - y; 52 } 53 function multiplication(x, y){ 54 return x * y; 55 } 56 function division(x, y){ 57 if(y==0){ 58 alert('0不能做除數'); 59 return; 60 } else { 61 return x / y; 62 } 63 } 64 </script>
另一種，是局部變量和全局變量的應用
<script type="text/javascript">
//獲取加號按鈕
var addBtn = document.getElementById('add');
var subtractBtn = document.getElementById('subtract');
var multiplyBtn = document.getElementById('multiply');
var divideBtn = document.getElementById('divide');
//定義兩個全局變量
var a_int;
var b_int;
//為按鈕添加點擊方法
addBtn.onclick = function(){
getInputNum();
//調用加法
var result = addition(a_int,b_int);
alert(result);
}
subtractBtn.onclick = function(){
getInputNum();
//調用減法
var result = substraction(a_int,b_int);
alert(result);
}
multiplyBtn.onclick = function(){
getInputNum();
//調用乘法
var result = multiplication(a_int,b_int);
alert(result);
}
divideBtn.onclick = function(){
getInputNum();
//調用減法
var result = division(a_int,b_int);
alert(result);
}
function getInputNum(){
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
//將轉化后的數字賦值給全局變量
a_int = parseInt(a, 10);
b_int = parseInt(b, 10);
}
//構造函數，加減乘除
function addition(x, y){
return x + y;
}
function substraction(x, y){
return x - y;
}
function multiplication(x, y){
return x * y;
}
function division(x, y){
if(y==0){
alert('0不能做除數');
return;
} else {
return x / y;
}
}
</script>
復習復習復習