JS实现简易计算器的7种方法零基础入门_应用使用帮助

先放图(好吧比较挫)方法一:最容易版

简易计算器
body {background-color: #eee;}#calculator {margin: 100px 0 0 150px

JS实现简易计算器的7种方法零基础入门

先放图(好吧比较挫)

JS实现简易计算器的7种方法零基础入门_应用使用帮助

JS实现简易计算器的7种方法零基础入门_应用使用帮助

方法一:最容易版

<!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" value="1" />
        <span>+</span>
        <input type="text" value="1" />
        <span>=</span>
        <span>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;
        }
        // 减
        function subtractHandler() {
            sign.innerHTML = '-';
            resultOutput.innerHTML = formerInput.value - laterInput.value;
        }
        // 乘
        function multiplyHandler() {
            sign.innerHTML = '×';
            resultOutput.innerHTML = formerInput.value * laterInput.value;
        }
        // 除
        function 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>
    body {
        background-color: #eee;
    }
    #calculator {
        margin: 100px 0 0 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" value="1" />
        <span>+</span>
        <input type="text" value="1" />
        <span>=</span>
        <span>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');
        var btns = calculator.querySelectorAll('.btn');

        // 绑定事件
        // +
        btns[0].onclick = addHandler;
        // -
        btns[1].onclick = subtractHandler;
        // ×
        btns[2].onclick = multiplyHandler;
        // ÷
        btns[3].onclick = divideHandler;

        // 加
        function addHandler() {
            sign.innerHTML = '+';
            resultOutput.innerHTML = +formerInput.value + +laterInput.value;
        }
        // 减
        function subtractHandler() {
            sign.innerHTML = '-';
            resultOutput.innerHTML = formerInput.value - laterInput.value;
        }
        // 乘
        function multiplyHandler() {
            sign.innerHTML = '×';
            resultOutput.innerHTML = formerInput.value * laterInput.value;
        }
        // 除
        function 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>
    body {
        background-color: #eee;
    }
    #calculator {
        margin: 100px 0 0 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" value="1" />
        <span>+</span>
        <input type="text" value="1" />
        <span>=</span>
        <span>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');
        var btns = calculator.querySelectorAll('.btn');

        // 绑定事件
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                switch (this.title) {
                    case 'add':
                        addHandler();
                        break;
                    case 'subtract':
                        subtractHandler();
                        break;
                    case 'multiply':
                        multiplyHandler();
                        break;
                    case 'divide':
                        divideHandler();
                        break;
                }
            };
        }

        // 加
        function addHandler() {
            sign.innerHTML = '+';
            resultOutput.innerHTML = +formerInput.value + +laterInput.value;
        }
        // 减
        function subtractHandler() {
            sign.innerHTML = '-';
            resultOutput.innerHTML = formerInput.value - laterInput.value;
        }
        // 乘
        function multiplyHandler() {
            sign.innerHTML = '×';
            resultOutput.innerHTML = formerInput.value * laterInput.value;
        }
        // 除
        function 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>
    body {
        background-color: #eee;
    }
    #calculator {
        margin: 100px 0 0 150px;
    }
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
    <p>
        <input type="text" value="1" />
        <span>+</span>
        <input type="text" value="1" />
        <span>=</span>
        <span>2</span>
    </p>
    <p>
        <input type="button" value="+" title="add" />
        <input type="button" value="-" title="subtract" />
        <input type="button" value="×" title="multiply" />
        <input type="button" value="÷" title="divide" />
    </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');
        var btns = calculator.querySelectorAll('.btn');

        // 绑定事件
        each(btns, function (index, elem ) {
            elem.onclick = function () {
                switch (this.title) {
                    case 'add':
                        addHandler();
                        break;
                    case 'subtract':
                        subtractHandler();
                        break;
                    case 'multiply':
                        multiplyHandler();
                        break;
                    case 'divide':
                        divideHandler();
                        break;
                }
            };
        });
        
        // 遍历
        function each(array, fn) {
            for (var i = 0; i < array.length; i++) {
                fn(i, array[i]);
            }
        }

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

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

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

        // 加
        function addHandler() {
            // sign.innerHTML = '+';
            updateSign('+');
            outputResult(add(formerInput.value, laterInput.value));
        }
        // 减
        function subtractHandler() {
            updateSign('-');
            outputResult(subtract(formerInput.value, laterInput.value));
        }
        // 乘
        function multiplyHandler() {
            updateSign('×');
            outputResult(multiply(formerInput.value, laterInput.value));
        }
        // 除
        function 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>
    body {
        background-color: #eee;
    }
    #calculator {
        margin: 100px 0 0 150px;
    }
</style>
</head>
<body>

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

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

            // 绑定事件
            each(calculatorElem.btns, function (index, elem    ) {
                elem.onclick = function () {
                    switch (this.title) {
                        case 'add':
                            addHandler();
                            break;
                        case 'subtract':
                            subtractHandler();
                            break;
                        case 'multiply':
                            multiplyHandler();
                            break;
                        case 'divide':
                            divideHandler();
                            break;
                    }
                };
            });
            
            // 遍历
            function each(array, fn) {
                for (var i = 0; i < array.length; i++) {
                    fn(i, array[i]);
                }
            }

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

            var operation = {
                add: function(num1, num2) {
                    return +num1 + +num2;
                },
            subtract: function(num1, num2) {
                    return num1 - num2;
                },
            multiply: function(num1, num2) {
                    return num1 * num2;
                },
            divide: function(num1, num2) {
                    return num1 / num2;
                }
            };

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

            // 加
            function addHandler() {
                // sign.innerHTML = '+';
                updateSign('+');
                outputResult(operation.add(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
            }
            // 减
            function subtractHandler() {
                updateSign('-');
                outputResult(operation.subtract(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
            }
            // 乘
            function multiplyHandler() {
                updateSign('×');
                outputResult(operation.multiply(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
            }
            // 除
            function 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>
    body {
        background-color: #eee;
    }
    #calculator {
        margin: 100px 0 0 150px;
    }
</style>
</head>
<body>

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

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

    // 绑定事件
    each(calculatorElem.btns, function (index, elem    ) {
            elem.onclick = function () {
                updateSign(this.value);
                outputResult(operate(this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.value));
            };
    });
    
    // 遍历
    function each(array, fn) {
        for (var i = 0; i < array.length; i++) {
            fn(i, array[i]);
        }
    }

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

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

    var operation = {
        add: function(num1, num2) {
            return +num1 + +num2;
        },
        subtract: function(num1, num2) {
                return num1 - num2;
            },
        multiply: function(num1, num2) {
                return num1 * num2;
            },
        divide: function(num1, num2) {
                return num1 / num2;
            },
            addOperation: function (name, fn) {
                if (!this[name]) {
                    this[name] = fn;
                }
                return this;
            }
    };

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

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

方法七:模块化

<!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" value="1" />
        <span>+</span>
        <input type="text" value="1" />
        <span>=</span>
        <span>2</span>
    </p>
    <p>
        <input type="button" value="+" title="add" />
        <input type="button" value="-" title="subtract" />
        <input type="button" value="×" title="multiply" />
        <input type="button" value="÷" title="divide" />
        <input type="button" value="%" title="mod" />
        <input type="button" value="^" title="power" />
        <input type="button" value="1/x" title="invert" />
    </p>
</div>

<script>

    (function () {
        // 获取元素
        var wrapElem = document.querySelector('#calculator');
        var calculatorElem = {
            formerInput: wrapElem.querySelector('.formerInput'),
            laterInput: wrapElem.querySelector('.laterInput'),
            sign: wrapElem.querySelector('.sign'),
            resultOutput: wrapElem.querySelector('.resultOutput'),
            btns: wrapElem.querySelectorAll('.btn')
        };

        // 绑定事件
        each(calculatorElem.btns, function (index, elem    ) {
                elem.onclick = function () {
                    updateSign(this.value);
                    outputResult(operate(this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.value));
                };
        });
        
        // 遍历
        function each(array, fn) {
            for (var i = 0; i < array.length; i++) {
                fn(i, array[i]);
            }
        }

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

        // 运算
        var operate = (function () {
                var operation = {
                    add: function(num1, num2) {
                        return +num1 + +num2;
                    },
                subtract: function(num1, num2) {
                        return num1 - num2;
                    },
                multiply: function(num1, num2) {
                        return num1 * num2;
                    },
                divide: function(num1, num2) {
                        return num1 / num2;
                   },
                   addOperation: function (name, fn) {
                        if (!operation[name]) {
                            operation[name] = fn;
                        }
                        return operation;
                    }
            };

            function operate(name) {
                    if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法!');
                    return operation[name].apply(operation, [].slice.call(arguments, 1, arguments.length));
            }
            operate.addOperation = operation.addOperation;

            return operate;
        })();

        operate.addOperation('mod', function (num1, num2) {
            return num1 % num2;
        }).addOperation('power', function (base, power) {
            return Math.pow(base, power);
        }).addOperation('invert', function (num) {
            return 1 / num;
        });

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

原文:https://www.cnblogs.com/chenyingying0/p/12143674.html

海计划公众号
(0)
上一篇 2020/03/23 08:57
下一篇 2020/03/23 08:57

您可能感兴趣的内容

  • TypeScript基础指南_一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集

    TypeScript基础入门 官方网址:http://www.typescriptlang.org GitHub:https://github.com/Microsoft/Type…

    2020/03/06
  • 逼真的HTML5 3D水波动画 可多视角浏览菜鸟攻略_3D小白指南

    这是一款基于HTML5的3D水波动画特效,它的效果非常逼真,水池中的石头在水中沉浮,泛起了一层层水波。同时我们可以拖拽鼠标从不同的视角来浏览水池,3D效果非常不错。另外,我们可以按“G”键来让水池中的石头上下浮动,按“L”键添加灯光效果,设计相当完美。同时说明一下,这款3D水波动画是基于WebGL渲染技术的,大家可以了解一下WebGL。 HTML代码<im

    2020/03/24
  • 敲开通往架构师的门小白帮助_架构师小白知识

    最近学习了一些关于架构设计的知识想分享给大家。俗话说得好,不想当架构师的程序员不是好厨子。那么如何成为一名架构师呢?接下来就聊一聊我的一些想法。什么是架构师之前有同学问我,做了几年技术,应该转管理还是转架构师?对于这位同学,我给他的答案是,你要先踏踏实实做好现在的工作。因为就他提的问题来看,应该是刚入行不久或者是在校学生。专心做技术的,都想做架构师。但架构师

    2020/03/23
  • 拉勾网基础入门_互联网行业招聘平台

    拉勾网基础入门 官方网址:https://www.lagou.com/ 简介描述:互联网行业招聘平台 拉勾网是权威的互联网行业招聘平台。提供全国真实可靠的互联网招聘信息。工资不面议…

    2020/03/06
  • Webpack中如何编写一个自定义的loader小白攻略_webpack入门基础教程

    Webpack中如何编写一个自定义的loader小白攻略 基本Loader Webpack中loader是一个CommonJs风格的函数,接收输入的源码,通过同步或异步的方式替换源…

    2020/03/20
  • MVC和MVVM模型入门基础知识_模型入门百科

    MVC那时计算机世界天地混沌,浑然一体,然后出现了一个创世者,将现实世界抽象出模型形成model,将人机交互从应用逻辑中分离形成view,然后就有了空气、水、鸡啊、蛋什么的。——《前端MVC变形记》MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式。这种模式用于应用程序的分层开发。Model(模型)Model(模型)是应

    2020/03/23
  • SSL证书对SEO网站优有什么影响?使用HTTPS的SEO优势菜鸟指南_ssl基础入门

    理解差异根据您是网站的用户还是开发自己的网站,良好的在线体验将涉及安全的第三方和可信加密。为了理解如何完成这项工作并更好地理解为什么百度会支持某些元素,了解HTTP和HTTPS之间究竟有什么区别以及它为何重要至关重要。HTTP超文本传输协议(HTTP)是一种用于通过Internet发送和接收信息的系统。HTTP被称为“应用层协议”,这意味着它专注于如何将信息

    2020/03/29
  • assemblyscript入门知识_将 TypeScript 编译成 WebAssembly 的编译器

    assemblyscript入门知识 官方网址:https://assemblyscript.org GitHub:https://github.com/AssemblyScrip…

    2020/03/07
  • axios如何利用promise无痛刷新token入门知识_token零基础入门

    需求最近遇到个需求:前端登录后,后端返回token和token有效时间,当token过期时要求用旧token去获取新的token,前端需要做到无痛刷新token,即请求刷新token时要做到用户无感知。需求解析当用户发起一个请求时,判断token是否已过期,若已过期则先调refreshToken接口,拿到新的token后再继续执行之前的请求。这个问题的难点在

    2020/03/24
  • Js中Error错误对象使用指南_对象小白基础

    一、概念error,指程序中的非正常运行状态,在其他编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息。ECMAScript定义了六种类型的错误。除此之外,还可以使用Error构造方法创建自定义的Error对象,并使用throw语句抛出该对象。六种错误:ReferenceError:找不到对象时Typ

    2020/03/26
  • JavaScript 私有成员入门攻略_小白帮助

    Class field declarations for JavaScript(JavaScript 类的字段声明)目前已经进入了 stage-3,其中包含一项 OOP 开发者都很关注的内容:Private fields。JavaScript 一直没有私有成员并不是没有原因,所以这一提议给 JavaScript 带来了新的挑战。但同时,JavaScript

    2020/03/30
  • 从零实现TypeScript版Koa指南教程_Koa入门百科

    这篇文章会讲些什么?如何从零开始完成一个涵盖Koa核心功能的Node.js类库从代码层面解释Koa一些代码写法的原因:如中间件为什么必须调用next函数、ctx是怎么来的和一个请求是什么关系我们知道Koa类库主要有以下几个重要特性:支持洋葱圈模型的中间件机制封装request、response提供context对象,方便http操作异步函数、中间件的错误处理

    2020/03/29
  • React 中 setState()详细解读菜鸟教程网_组件新手入门

    对于 setState() 相信伙伴们都用过,它是 React 官方推荐用来更新组件 state 的 API,但是对于 setState() 你真的了解吗?且待我慢慢详聊一番。setState() 官方用法指南语法1: setState(updater[, callback])updater:函数类型,返回一个更新后的 state 中的状态对象,它会和 st

    2020/03/29
  • 使用vue.js的动态组件模板新手入门_组件小白攻略

    组件并不总是具有相同的结构。有时需要管理许多不同的状态(注:指的是根据不同状态显示不同组件)。异步加载组件对此操作很有帮助。用例在 Scrumpy 中组件用于提醒、评论和附件等多个地方。让我们看一下评论部分,看看我要表达的是什么意思。评论不再只是简单的文本字段,你希望能够发布链接,上传图片,集成视频等等。所有这些完全不同的元素都必须在此评论中呈现出来。如果您

    2020/03/29
  • Js BOM之window核心模块入门基础_bom使用说明

    Window对象包含以下五大核心:document,screen,navigator,history,location。 一 document 文档 document包含了浏览器对标准DOM实现的所有方法和属性。1,BOM和DOM的关系大致如下图: 二 screen window.screen包含了用户屏幕的相关信息,比较有用的有四个属性,他们

    2020/03/24
  • alligator.io菜鸟攻略_快速理解那些看似困难的前端代码片段

    alligator.io菜鸟攻略 官方网址:https://alligator.io/ 简介描述:快速理解那些看似困难的前端代码片段 快速理解那些看似困难的前端代码片段,内容包括:…

    2020/03/11