JavaScript四则运算计算器

本文转载自查看原文 2018-04-13 18:13 1568

直接上代码：

首先是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>

复习复习复习

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 C++四则运算计算器 python 简易四则运算计算器 js实现简单四则运算计算器 python实现简单四则运算计算器 JS做一个四则运算计算器 python 四则运算计算器四则运算计算器的微信小程序_2 运算【实践】js实现简易的四则运算计算器利用ANTLR4实现一个简单的四则运算计算器 MIPS汇编程序设计——四则运算计算器