2021-05-18

一、简易计算器

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：vs JQ

作者： 龚紫康

撰写时间：2021年5月8日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

项目功能：进行简易计算，项目组成由<input>的number输入框，<select> 下拉框，两个text文本框和一个button按钮组成。

初始效果：

 

 

图1

<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是数字大小、文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等，

    <input type=“number”>可以显示出一个上下箭头从而选择数字大小

结果如图：

 

图2

 

<select>标签Select 对象代表 HTML 表单中的一个下拉列表。在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。通过option设置下拉框内容。代码如下：

 

 

 

 

二、Js代码讲解

代码如下：

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

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

            //    //console.log(num1);

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

            //    //console.log(num2);

            var zf = $("#ZhiFu").val();

            if (zf == 0) {

                $("#num3").val(parseInt(num1) + parseInt(num2));

            }else

            if (zf == 1) {

                $("#num3").val(parseInt(num1) - parseInt(num2));

            }else

            if (zf == 2) {

                $("#num3").val(parseInt(num1) * parseInt(num2));

            }else{

                $("#num3").val(parseInt(num1) / parseInt(num2));

                if (num2 == 0) {

                    alert("除数不为0");

                    return;

                }

            }

 

        })

First，给计算button按钮绑定一个click（）点击事件，使用jq方法获取到两个text文本输入框的值，我们可以在控制台输出num1、num2检查是否获取到值，

效果如图：

结果如图：

 

申明一个变量zf表示下拉框的value值；利用if……else if……else语句执行多个代码：$("#num3").val(parseInt(num1) + parseInt(num2));当然，还能使用switch语句。

$("#num3").val(parseInt(num1) + parseInt(num2));中的parseInt()函数可解析一个字符串，并返回一个整数。当参数 radix 的值为 0，或没有设置该参数时，parseInt () 会根据 string 来判断数字的基数。

举例，如果 string 以 "0x" 开头, parseInt () 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt () 的  一个 实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt () 将把它解析为十进制的整数。

最后，当算数符为除号时，我们知道除数不能为0，所以我们要给符号为“/”时加上一个判断代码如下：

$("#num3").val(parseInt(num1) / parseInt(num2));

 if (num2 == 0) {

                    alert("除数不为0");

                    return;

}