使用动态监听方法实现js简单加减乘除

最新推荐文章于 2024-03-11 10:18:19 发布

pigpigzzz

最新推荐文章于 2024-03-11 10:18:19 发布

阅读量205

点赞数

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/pigpigzzz/article/details/128902943

版权

在菜鸟教程上复习js知识点的时候，Javascript函数章节中有一条《使用 HTML 、JavaScript 创建一个简单的计算器，包含加、减、乘、除四个功能》的笔记，遂下载查阅了代码。

<html>

<head></head>

<body>
    <p>简单计算器:</p>
    <table border="1" style="position:center;">
        <tbody>
            <tr>
                <td>第一个数：</td>
                <td><input type="text" id="first"></td>
            </tr>
            <tr>
                <td>第二个数：</td>
                <td><input type="text" id="twice"></td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                    <button style="width:inherit" onclick="add()">+</button>
                    &nbsp;
                    <button style="width:inherit" onclick="subtract()">-</button>
                    &nbsp;
                    <button style="width:inherit" onclick="ride()">*</button>
                    &nbsp;
                    <button style="width:inherit" onclick="devide()">/</button>
                </td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2">
                    <p id="result"></p>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        var result_1;
        //加法
        function add() {
          var a = getFirstNumber();
          var b = getTwiceNumber();
          var re =Number( a) +Number( b);
          sendResult(re);
        }
        
        //减法
        function subtract() {
          var a = getFirstNumber();
          var b = getTwiceNumber();
          var re = a - b;
          sendResult(re);
        }
        
        //乘法
        function ride() {
          var a = getFirstNumber();
          var b = getTwiceNumber();
          var re = a * b;
          sendResult(re);
        }
        
        //除法
        function devide() {
          var a = getFirstNumber();
          var b = getTwiceNumber();
          var re = a / b;
          sendResult(re);
        }
        
        //给p标签传值
        function sendResult(result_1) {
          var num = document.getElementById("result")
          num.innerHTML = result_1;
        }
        
        //获取第一位数字
        function getFirstNumber() {
          var firstNumber = document.getElementById("first").value;
          return firstNumber;
        }
        
        //获取第二位数字
        function getTwiceNumber() {
          var twiceNumber = document.getElementById("twice").value;
          return twiceNumber;
        }
    </script>
</body>
<script id="allow-copy_script">
    (function e(){var e=!1;document.addEventListener("allow_copy",(function(t){e=t.detail.unlock}));var t=["copy","cut","contextmenu","selectstart","mousedown","mouseup","mousemove","keydown","keypress","keyup"],n=function(t){e&&(t.stopPropagation(),t.stopImmediatePropagation&&t.stopImmediatePropagation())};t.forEach((function(e){document.documentElement.addEventListener(e,n,{capture:!0})}))})()
</script>

</html>

可以看到在js部分的加减乘除函数中多次重复定义了两个操作数a、b并且调用两个取值函数

var a = getFirstNumber();
var b = getTwiceNumber();

为了尽量减少重复代码的出现次数，通过jquery的实时监听更改了取操作数的方法。

1. 引用jquery文件

<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>

2. 绑定（监听）输入事件
首先了解一下jquery中bind绑定方法

$(selector).bind(event,data,function)

selector是我们要监听的html元素，event是监听元素的事件，data传参（可选），function规定了监听事件发生时需要进行的操作内容。

这里我们需要做的是当输入框进行输入时，能够动态获取到输入的内容。因此我们用到的是input propertychange事件（该方法具体的使用条件请自行搜索）。
给tbody标签增加id”tb“后改方法具体代码如下：

$('#tb').bind('input propertychange', function(){
		a = document.getElementById("first").value;     //获取第一个操作数 
		b = document.getElementById("twice").value;     //获取第二个操作数
	});

完整代码如下

<html>

<head>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>
</head>

<body>
    <p>简单计算器:</p>
    <table border="1" style="position:center;">
        <tbody id="tb">
            <tr>
                <td>第一个数：</td>
                <td><input type="text" id="first"></td>
            </tr>
            <tr>
                <td>第二个数：</td>
                <td><input type="text" id="twice"></td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                    <button style="width:inherit" onclick="add()">+</button>
                    &nbsp;
                    <button style="width:inherit" onclick="subtract()">-</button>
                    &nbsp;
                    <button style="width:inherit" onclick="ride()">*</button>
                    &nbsp;
                    <button style="width:inherit" onclick="devide()">/</button>
                </td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2">
                    <p id="result"></p>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        var result_1,a,b;
        $('#tb').bind('input propertychange', function(){
            a = document.getElementById("first").value;     //获取第一个操作数 
            b = document.getElementById("twice").value;     //获取第二个操作数
        });

        //加法
        function add() {
            var re =Number( a) +Number( b);
            sendResult(re);
        }
        
        //减法
        function subtract() {
            var re = a - b;
            sendResult(re);
        }
        
        //乘法
        function ride() {
            var re = a * b;
            sendResult(re);
        }
        
        //除法
        function devide() {
            var re = a / b;
            sendResult(re);
        }
        
        //给p标签传值
        function sendResult(result_1) {
            var num = document.getElementById("result")
            num.innerHTML = result_1;
        }
        var a = document.getElementById('first').value;
        var b = document.getElementById('twice').value;
        
    </script>
</body>
<script id="allow-copy_script">
    (function e(){var e=!1;document.addEventListener("allow_copy",(function(t){e=t.detail.unlock}));var t=["copy","cut","contextmenu","selectstart","mousedown","mouseup","mousemove","keydown","keypress","keyup"],n=function(t){e&&(t.stopPropagation(),t.stopImmediatePropagation&&t.stopImmediatePropagation())};t.forEach((function(e){document.documentElement.addEventListener(e,n,{capture:!0})}))})()
</script>

</html>