JavaScript四则运算计算器

直接上代码：

首先是HTML代码

 <form>
             第一个数字：<br>
             <input type="text" id="num1">
             <br>
             <br>
             第二个数字：<br>
             <input type="text" id="num2">
             <br>
             <button id="add">+</button>
             <button id="subtract">-</button>
             <button id="multiply">*</button>
             <button id="divide">/</button>
         </form>

关于在js中计算，我写了两种常见方案

第一种是比较傻瓜式计算

 <script type="text/javascript">
             //获取加号按钮
             var addBtn = document.getElementById('add');
             var subtractBtn = document.getElementById('subtract');
             var multiplyBtn = document.getElementById('multiply');
             var divideBtn = document.getElementById('divide');

             //为按钮添加点击方法
             addBtn.onclick = function(){
                 var a = document.getElementById('num1').value;
                 var b = document.getElementById('num2').value;
                 var a_int = parseInt(a, 10);
                 var b_int = parseInt(b, 10);
                 //调用加法
                 var result = addition(a_int,b_int);
                 alert(result);
                 }
             subtractBtn.onclick = function(){
                 var a = document.getElementById('num1').value;
                 var b = document.getElementById('num2').value;
                 var a_int = parseInt(a, 10);
                 var b_int = parseInt(b, 10);
                 //调用减法
                 var result = substraction(a_int,b_int);
                 alert(result);
                 }
             multiplyBtn.onclick = function(){
                 var a = document.getElementById('num1').value;
                 var b = document.getElementById('num2').value;
                 var a_int = parseInt(a, 10);
                 var b_int = parseInt(b, 10);
                 //调用乘法
                 var result = multiplication(a_int,b_int);
                 alert(result);
                 }
             divideBtn.onclick = function(){
                 var a = document.getElementById('num1').value;
                 var b = document.getElementById('num2').value;
                 var a_int = parseInt(a, 10);
                 var b_int = parseInt(b, 10);
                 //调用减法
                 var result = division(a_int,b_int);
                 alert(result);
                 }
             //构造函数
             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>

另一种，是局部变量和全局变量的应用

<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>

复习复习复习