JavaScript实现计算器方法拓展

一、最终效果

由于主要是逻辑的实现,就没有过多的样式,效果图如下

HTML代码

<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();" /> -->
        <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>

二、Js代码实现

0x1 最容易实现

<br />// 获取元素
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;
}

0x2 结构和行为分离

//HTML结构改变,行为与结构分离,删除onclick时间,统一加上btn类。
<input type="button" value="+" class="btn" />
<input type="button" value="-" class="btn" />
<input type="button" value="×" class="btn" />
<input type="button" value="÷" class="btn" />

//JavaScript代码
// 获取元素
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');

//这里querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问,索引值从 0 开始。
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;
}

0x3 循环结构

主要对上一段代码中绑定事件做优化

//增加title更加语义化。
<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" />

//JavaScript代码,仅对绑定事件优化
//绑定事件,通过循环结构绑定事件
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;
        }
    };
}

0x4 函数提取

不希望代码暴露过多的细节,可以利用函数封装代码。

//JavaScript代码
//获取元素部分不变
//绑定事件
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));
}

0x5 管理代码

上一段代码中,获取元素的一部分比较繁琐,改进之

// 获取元素
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;
        }
    };
});
//下面做相应改变

0x6 封闭原则

获取元素
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;
}

除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/757.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏weixuqin 的专栏

Scrapy选择器的用法

370120
来自专栏互联网软件技术

添加标签——无给定标签选项

13430
来自专栏lonelydawn的前端猿区

css选择器

下面是一张取自w3cschool的css选择器表 链接地址:http://www.w3school.com.cn/cssref/css_selectors.as...

19860
来自专栏个人随笔

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

34380
来自专栏闻道于事

JavaScript对象之document对象

DOM对象之document对象 DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM ...

30870
来自专栏SpringBoot

Jquery入门

jquery [] jquery概念 jquery是JS的框架。 JS的函数库。 【】BOM BOM:Br...

16020
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

12930
来自专栏专业duilib使用+业余界面开发

duilib自绘

22130
来自专栏web前端教室

html5-canvas刮刮卡实例-圆形刮痕

知识点 1、globalCompositeOperation属性,该属性表示的是图形的组合方式 2、使用到的是destination-out,它表示只绘制原图形...

24480
来自专栏天天

jQuery初识(20171025)

10340

扫码关注云+社区

领取腾讯云代金券