简易计算器

简易计算器案例的两种方法：

 

设置基础样式如下图就开始用下面的方法达到加减乘除计算效果，

 

第一种使用JavaScript:

 

思路如下：

1. getElementById（）返回对拥有指定 id 的第一个对象的引用。通过ID获取元素。
2. if判断num1和num2提示不能为空/num2提示不能为零。
3. 字符串转为数字（Number），如果是纯数字的字符串，则可以直接转换为数字。
4. 最后相对于整个文档获取到结果的ID，value赋值于结果。

 

         var jisuan=document.getElementById("jisuan");

               jisuan.onclick=function(){

         var num1=document.getElementById("num1").value;

         var num2=document.getElementById("num2").value;

            if (num1==""||num2==""){

            alert("输入框不能为空")

            return false;            }

         var op=document.getElementById("op").value;

                   if(op=="+"){

                      result=Number(num1)+Number(num2);

                }  if(op=="-"){

                      result=Number(num1)-Number(num2);

                } if(op=="*"){

                      result=Number(num1)*Number(num2);

                }  if(op=="/"){

                      result=Number(num1)/Number(num2);

                    if (num2==0){

                        alert("除数不能为0")

                    } }

                document.getElementById("result").value=result;

               }

 

第二种使用Jquery：

思路如下：

1.  声明变量，通过JQ的ID选择器选择到元素
2.  if...else条件语句用于不同的条件来执行不同的动作。
3.  console.log(result);输出结果
4.  声明一个变量（result=0）为空，当需要时则调用。 
5.  parseFloat() 把一个字符串转换为一个浮点数,将相加的两位转为数值类型否则相加的不是数值而是拼接。

 

 <script>

        $(function(){

            $("#jisuan").click(function(){

              var numA=$("#num1").val();

              var numB=$("#num2").val();

              var opC=$("#op").val();

              var result=0;



if(opC=="+"){

            result=parseFloat(numA)+parseFloat(numB);

          } else if(opC == "-"){

               result=numA-numB;

          } else if(opC == "*"){

               result=numA*numB;

          } else if(opC == "/"){

                  if(numB == 0){

                  alert("除数不能为零");return;

} result=numA/numB;

              console.log(result);      

          }  $("#result").val(result);

            })

            });

 </script>

 

 

---------------------------------------------------------------------

JavaScript运算符的基础知识补充（运算符也叫做操作符通过运算符可以对一个或则多个值进行运算，并获取运算结果）：

+ 加 可以对两个值进行加法运算，如果是两个字符串则进行字符串拼接，任何值和字符串做加法运算，都会先转为字符串，然后再和字符串做拼接操作，也可以通过"+"完成隐式转换。

- 减 可以对两个值进行减法运算，并返回运算结果

* 乘 可以对两个值进行乘法运算，并返回运算结果

/ 除可以对两个值进行除法运算，并返回运算结果

% 取模 取模运算(取余数)

++ 自增

-- 自减