JS实现简易计算器的7种方法

JavaScript 2020-11-07

先放图（好吧比较挫）

方法一：最容易版

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style>
    body {
        background-color: #eee;
    }
    #calculator {
        margin: 100px 0 0 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" class="formerInput" value="1" />
        <span class="sign">+</span>
        <input type="text" class="laterInput" value="1" />
        <span>=</span>
        <span class="resultOutput">2</span>
    </p>
    <p>
        <input type="button" value="+" onclick="addHandler();" />
        <input type="button" value="-" onclick="subtractHandler();" />
        <input type="button" value="×" onclick="multiplyHandler();" />
        <input type="button" value="÷" onclick="divideHandler();" />
    </p>
</div>

<script> 
        // 获取元素
        var calculator = document.querySelector('#calculator');
        var formerInput = calculator.querySelector('.formerInput'var laterInput = calculator.querySelector('.laterInput'var sign = calculator.querySelector('.sign'var resultOutput = calculator.querySelector('.resultOutput');

         加
        function addHandler() {
            sign.innerHTML = '+';
            resultOutput.innerHTML = +formerInput.value + +laterInput.value;
        }
         减
         subtractHandler() {
            sign.innerHTML = '-';
            resultOutput.innerHTML = formerInput.value - laterInput.value;
        }
         乘
         multiplyHandler() {
            sign.innerHTML = '×';
            resultOutput.innerHTML = formerInput.value * 除
         divideHandler() {
            sign.innerHTML = '÷';
            resultOutput.innerHTML = formerInput.value / laterInput.value;
        }
</script>
</body>
</html>

方法二：结构和行为分离

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style> 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" class="formerInput" value="1" />
        <span class="sign">+</span>
        <input type="text" class="laterInput" value="1" />
        <span>=</span>
        <span class="resultOutput">2</span>
    </p>
    <p>
        <input type="button" value="+" onclick="addHandler();" />
        <input type="button" value="-" onclick="subtractHandler();" />
        <input type="button" value="×" onclick="multiplyHandler();" />
        <input type="button" value="÷" onclick="divideHandler();" />
    </p>
</div>

<script>
        var btns = calculator.querySelectorAll('.btn' 绑定事件
         +
        btns[0].onclick = addHandler;
         -
        btns[1].onclick = subtractHandler;
         ×
        btns[2].onclick = multiplyHandler;
         ÷
        btns[3].onclick = divideHandler;

         laterInput.value;
        }
</script>
</body>
</html>

方法三：循环绑定事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style>for (var i = 0; i < btns.length; i++) {
            btns[i].onclick =  () {
                switch (this.title) {
                    case 'add':
                        addHandler();
                        break;
                    case 'subtract':
                        subtractHandler();
                        case 'multiply':
                        multiplyHandler();
                        case 'divide':
                        divideHandler();
                        ;
                }
            };
        }

         laterInput.value;
        }
</script>
</body>
</html>

方法四：提取函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style> 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" class="formerInput" value="1" />
        <span class="sign">+</span>
        <input type="text" class="laterInput" value="1" />
        <span>=</span>
        <span class="resultOutput">2</span>
    </p>
    <p>
        <input type="button" value="+" class="btn" title="add" />
        <input type="button" value="-" class="btn" title="subtract" />
        <input type="button" value="×" class="btn" title="multiply" />
        <input type="button" value="÷" class="btn" title="divide" />
    </p>
</div>

<script>
         绑定事件
        each(btns, (index,elem ) {
            elem.onclick = ;
                }
            };
        });
        
         遍历
         each(array,fn) {
            var i = 0; i < array.length; i++) {
                fn(i,array[i]);
            }
        }

         更新符号
         updateSign(symbol) {
            sign.innerHTML = symbol;
        }

         加法
         add(num1,num2) {
            return +num1 + +num2;
        }
         减法
         subtract(num1,1)">return num1 - num2;
        }
         乘法
         multiply(num1,1)">return num1 * 除法
         divide(num1,1)">return num1 / num2;
        }

         输出结果
         outputResult(result) {
            resultOutput.innerHTML = result;
        }

         addHandler() {
             sign.innerHTML = '+';
            updateSign('+');
            outputResult(add(formerInput.value,laterInput.value));
        }
         subtractHandler() {
            updateSign('-');
            outputResult(subtract(formerInput.value,1)"> multiplyHandler() {
            updateSign('×');
            outputResult(multiply(formerInput.value,1)"> divideHandler() {
            updateSign('÷');
            outputResult(divide(formerInput.value,laterInput.value));
        }
</script>
</body>
</html>

方法五：管理代码(找到组织)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style> 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" class="formerInput" value="1" />
        <span class="sign">+</span>
        <input type="text" class="laterInput" value="1" />
        <span>=</span>
        <span class="resultOutput">2</span>
    </p>
    <p>
        <input type="button" value="+" class="btn" title="add" />
        <input type="button" value="-" class="btn" title="subtract" />
        <input type="button" value="×" class="btn" title="multiply" />
        <input type="button" value="÷" class="btn" title="divide" />
    </p>
</div>

<script>
             获取元素
            var wrapElem = document.querySelector('#calculator');
            var calculatorElem = {
                formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput''.resultOutput')
            };

             绑定事件
            each(calculatorElem.btns,elem    ) {
                elem.onclick =  () {
                    .title) {
                        :
                            addHandler();
                            ;
                        :
                            subtractHandler();
                            :
                            multiplyHandler();
                            :
                            divideHandler();
                            ;
                    }
                };
            });
            
             遍历
            ) {
                    fn(i,array[i]);
                }
            }

             更新符号
             updateSign(symbol) {
                calculatorElem.sign.innerHTML = symbol;
            }

            var operation = {
                add: (num1,num2) {
                    num2;
                },subtract:  num2;
                },multiply:  num2;
                }
            };

             输出结果
             outputResult(result) {
                calculatorElem.resultOutput.innerHTML = result;
            }

             加
             addHandler() {
                 sign.innerHTML = '+';
                updateSign('+');
                outputResult(operation.add(calculatorElem.formerInput.value,calculatorElem.laterInput.value));
            }
             减
             subtractHandler() {
                updateSign('-');
                outputResult(operation.subtract(calculatorElem.formerInput.value,1)"> 乘
             multiplyHandler() {
                updateSign('×');
                outputResult(operation.multiply(calculatorElem.formerInput.value,1)"> 除
             divideHandler() {
                updateSign('÷');
                outputResult(operation.divide(calculatorElem.formerInput.value,calculatorElem.laterInput.value));
            }
</script>
</body>
</html>

方法六：OCP开放--封闭原则

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style> 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" class="formerInput" value="1" />
        <span class="sign">+</span>
        <input type="text" class="laterInput" value="1" />
        <span>=</span>
        <span class="resultOutput">2</span>
    </p>
    <p>
        <input type="button" value="+" class="btn" title="add" />
        <input type="button" value="-" class="btn" title="subtract" />
        <input type="button" value="×" class="btn" title="multiply" />
        <input type="button" value="÷" class="btn" title="divide" />
        <input type="button" value="%" class="btn" title="mod" />
        <input type="button" value="^" class="btn" title="power" />
        <!-- <input type="button" value="1/x" class="btn" title="invert" /> -->
    </p>
</div>

<script>
     获取元素
    );
     {
        formerInput: wrapElem.querySelector('.formerInput')
    };

     绑定事件
    each(calculatorElem.btns,elem    ) {
            elem.onclick =  () {
                updateSign(.value);
                outputResult(operate(.title,calculatorElem.formerInput.value,calculatorElem.laterInput.value));
            };
    });
    
     遍历
    ) {
            fn(i,array[i]);
        }
    }

     更新符号
     updateSign(symbol) {
        calculatorElem.sign.innerHTML = symbol;
    }

     运算
     operate(name,num1,1)">if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！'return operation[name](num1,num2);
    }

     {
        add: num2;
        },num2) {
                 num2;
            },addOperation:  (name,1)">if (![name]) {
                    this[name] = fn;
                }
                return ;
            }
    };

    operation.addOperation('mod',1)"> (num1,num2) {
        return num1 % num2;
    }).addOperation('power',1)"> (base,power) {
         Math.pow(base,power);
    });

     输出结果
     outputResult(result) {
        calculatorElem.resultOutput.innerHTML = result;
    }
</script>
</body>
</html>

方法七：模块化

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style> 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" class="formerInput" value="1" />
        <span class="sign">+</span>
        <input type="text" class="laterInput" value="1" />
        <span>=</span>
        <span class="resultOutput">2</span>
    </p>
    <p>
        <input type="button" value="+" class="btn" title="add" />
        <input type="button" value="-" class="btn" title="subtract" />
        <input type="button" value="×" class="btn" title="multiply" />
        <input type="button" value="÷" class="btn" title="divide" />
        <input type="button" value="%" class="btn" title="mod" />
        <input type="button" value="^" class="btn" title="power" />
        <input type="button" value="1/x" class="btn" title="invert" />
    </p>
</div>

<script>

    ( () {
         {
            formerInput: wrapElem.querySelector('.formerInput')
        };

         绑定事件
        each(calculatorElem.btns,1)"> () {
                    updateSign(.value);
                    outputResult(operate( updateSign(symbol) {
            calculatorElem.sign.innerHTML = 运算
        var operate = ( {
                    add: num2;
                    },1)"> num2;
                    },1)"> num2;
                   },fn) {
                        operation[name]) {
                            operation[name] = fn;
                        }
                         operation;
                    }
            };

             operate(name) {
                    );
                    return operation[name].apply(operation,[].slice.call(arguments,1,arguments.length));
            }
            operate.addOperation = operation.addOperation;

             operate;
        })();

        operate.addOperation('mod',1)"> num2;
        }).addOperation('power',power) {
             (num) {
            return 1 / num;
        });

         outputResult(result) {
            calculatorElem.resultOutput.innerHTML = result;
        }
    })();
      
</script>
</body>
</html>

相关文章

让kindeditor显示高亮代码
kindeditor4.x代码高亮功能默认使用的是prettify插件，prett...
kindeditor4整合SyntaxHighlighter，让代码亮起来
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单？
js如何实现弹出form提交表单？（图文+视频）
js怎么获取复选框选中的值
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
如何用js控制图片放大缩小