直接上代码：
首先是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>
复习复习复习