JavaScript实现计算器方法拓展

news/2024/7/19 13:22:04 标签: JavaScript, 计算器, js, js拓展

一、最终效果

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

HTML代码

js ocaml"><div id=js-string">"calculator">
    <p>
        <input js-class">js-keyword">type=js-string">"text" js-keyword">class=js-string">"formerInput" js-keyword">value=js-string">"1" />
        <span js-keyword">class=js-string">"sign">+</span>
        <input js-class">js-keyword">type=js-string">"text" js-keyword">class=js-string">"laterInput" js-keyword">value=js-string">"1" />
        <span>=</span>
        <span js-keyword">class=js-string">"resultOutput">js-number">2</span>
    </p>
    <p>
        <!-- <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"+" onclick=js-string">"addHandler();" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"-" onclick=js-string">"subtractHandler();" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"×" onclick=js-string">"multiplyHandler();" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"÷" onclick=js-string">"divideHandler();" /> -->
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"+" js-keyword">class=js-string">"btn" title=js-string">"add" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"-" js-keyword">class=js-string">"btn" title=js-string">"subtract" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"×" js-keyword">class=js-string">"btn" title=js-string">"multiply" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"÷" js-keyword">class=js-string">"btn" title=js-string">"divide" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"%" js-keyword">class=js-string">"btn" title=js-string">"mod" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"^" js-keyword">class=js-string">"btn" title=js-string">"power" />
        <input js-class">js-keyword">type=js-string">"button" js-keyword">value=js-string">"1/x" js-keyword">class=js-string">"btn" title=js-string">"invert" />
    </p>
</div>

js代码实现">二、Js代码实现

0x1 最容易实现

js javascript">
js-comment">// 获取元素
js-keyword">var calculator = document.querySelector(js-string">'#calculator');
js-keyword">var formerInput = calculator.querySelector(js-string">'.formerInput');
js-keyword">var laterInput = calculator.querySelector(js-string">'.laterInput');
js-keyword">var sign = calculator.querySelector(js-string">'.sign');
js-keyword">var resultOutput = calculator.querySelector(js-string">'.resultOutput');

js-comment">// 加
js-function">js-keyword">function js-title">addHandlerjs-params">() {
    sign.innerHTML = js-string">'+';
    js-comment">//前面的加号是为了将字符串转换为数字
    resultOutput.innerHTML = +formerInput.value + +laterInput.value;
}
js-comment">// 减
js-function">js-keyword">function js-title">subtractHandlerjs-params">() {
    sign.innerHTML = js-string">'-';
    js-comment">//减法不用将字符串转换为数字，直接运算
    resultOutput.innerHTML = formerInput.value - laterInput.value;
}
js-comment">// 乘
js-function">js-keyword">function js-title">multiplyHandlerjs-params">() {
    sign.innerHTML = js-string">'×';
    resultOutput.innerHTML = formerInput.value * laterInput.value;
}
js-comment">// 除
js-function">js-keyword">function js-title">divideHandlerjs-params">() {
    sign.innerHTML = js-string">'÷';
    resultOutput.innerHTML = formerInput.value / laterInput.value;
}

0x2 结构和行为分离

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

js-comment">//JavaScript代码
js-comment">// 获取元素
js-keyword">var calculator = document.querySelector(js-string">'#calculator');
js-keyword">var formerInput = calculator.querySelector(js-string">'.formerInput');
js-keyword">var laterInput = calculator.querySelector(js-string">'.laterInput');
js-keyword">var sign = calculator.querySelector(js-string">'.sign');
js-keyword">var resultOutput = calculator.querySelector(js-string">'.resultOutput');

js-comment">//这里querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。
js-keyword">var btns = calculator.querySelectorAll(js-string">'.btn');

js-comment">// 绑定事件
js-comment">// +
btns[js-number">0].onclick = addHandler; js-comment">//绑定函数名，不要带括号表示执行。
js-comment">// -
btns[js-number">1].onclick = subtractHandler;
js-comment">// ×
btns[js-number">2].onclick = multiplyHandler;
js-comment">// ÷
btns[js-number">3].onclick = divideHandler;

js-comment">// 加
function addHandler() {
    sign.innerHTML = js-string">'+';
    resultOutput.innerHTML = +formerInput.js-keyword">value + +laterInput.js-keyword">value;
}
js-comment">// 减
function subtractHandler() {
    sign.innerHTML = js-string">'-';
    resultOutput.innerHTML = formerInput.js-keyword">value - laterInput.js-keyword">value;
}
js-comment">// 乘
function multiplyHandler() {
    sign.innerHTML = js-string">'×';
    resultOutput.innerHTML = formerInput.js-keyword">value * laterInput.js-keyword">value;
}
js-comment">// 除
function divideHandler() {
    sign.innerHTML = js-string">'÷';
    resultOutput.innerHTML = formerInput.js-keyword">value / laterInput.js-keyword">value;
}

0x3 循环结构

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

js scala">js-comment">//增加title更加语义化。
<input js-keyword">type=js-string">"button" value=js-string">"+" js-keyword">class=js-string">"btn" title=js-string">"add" />
<input js-keyword">type=js-string">"button" value=js-string">"-" js-keyword">class=js-string">"btn" title=js-string">"subtract" />
<input js-keyword">type=js-string">"button" value=js-string">"×" js-keyword">class=js-string">"btn" title=js-string">"multiply" />
<input js-keyword">type=js-string">"button" value=js-string">"÷" js-keyword">class=js-string">"btn" title=js-string">"divide" />

js-comment">//JavaScript代码，仅对绑定事件优化
js-comment">//绑定事件，通过循环结构绑定事件
js-keyword">for (js-keyword">var i = js-number">0; i < btns.length; i++) {
    btns[i].onclick = function () {
        switch (js-keyword">this.title) {
            js-keyword">case js-string">'add':
                addHandler();
                js-keyword">break;
            js-keyword">case js-string">'subtract':
                subtractHandler();
                js-keyword">break;
            js-keyword">case js-string">'multiply':
                multiplyHandler();
                js-keyword">break;
            js-keyword">case js-string">'divide':
                divideHandler();
                js-keyword">break;
        }
    };
}

0x4 函数提取

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

js php">js-comment">//JavaScript代码
js-comment">//获取元素部分不变
js-comment">//绑定事件
each(btns, js-function">js-keyword">function js-params">(index, elem) {
    elem.onclick = js-function">js-keyword">function js-params">() {
        js-keyword">switch (this.title) {
            js-keyword">case js-string">'add':
                addHandler();
                js-keyword">break;
            js-keyword">case js-string">'subtract':
                subtractHandler();
                js-keyword">break;
            js-keyword">case js-string">'multiply':
                multiplyHandler();
                js-keyword">break;
            js-keyword">case js-string">'divide':
                divideHandler();
                js-keyword">break;
        }
    };
});

js-comment">// 遍历
js-function">js-keyword">function js-title">eachjs-params">(array, fn) {
    js-keyword">for (js-keyword">var i = js-number">0; i < js-keyword">array.length; i++) {
        fn(i, js-keyword">array[i]);
    }
}

js-comment">// 更新符号
js-function">js-keyword">function js-title">updateSignjs-params">(symbol) {
    sign.innerHTML = symbol;
}

js-comment">// 加法
js-function">js-keyword">function js-title">addjs-params">(num1, num2) {
    js-keyword">return +num1 + +num2;
}
js-comment">// 减法
js-function">js-keyword">function js-title">subtractjs-params">(num1, num2) {
    js-keyword">return num1 - num2;
}
js-comment">// 乘法
js-function">js-keyword">function js-title">multiplyjs-params">(num1, num2) {
    js-keyword">return num1 * num2;
}
js-comment">// 除法
js-function">js-keyword">function js-title">dividejs-params">(num1, num2) {
    js-keyword">return num1 / num2;
}

js-comment">// 输出结果
js-function">js-keyword">function js-title">outputResultjs-params">(result) {
    resultOutput.innerHTML = result;
}

js-comment">// 加
js-function">js-keyword">function js-title">addHandlerjs-params">() {
    js-comment">// sign.innerHTML = '+';
    updateSign(js-string">'+');
    outputResult(add(formerInput.value, laterInput.value));
}
js-comment">// 减
js-function">js-keyword">function js-title">subtractHandlerjs-params">() {
    updateSign(js-string">'-');
    outputResult(subtract(formerInput.value, laterInput.value));
}
js-comment">// 乘
js-function">js-keyword">function js-title">multiplyHandlerjs-params">() {
    updateSign(js-string">'×');
    outputResult(multiply(formerInput.value, laterInput.value));
}
js-comment">// 除
js-function">js-keyword">function js-title">divideHandlerjs-params">() {
    updateSign(js-string">'÷');
    outputResult(divide(formerInput.value, laterInput.value));
}

0x5 管理代码

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

js actionscript">js-comment">// 获取元素
js-keyword">var wrapElem = document.querySelector(js-string">'#calculator');
js-keyword">var calculatorElem = {
    formerInput: wrapElem.querySelector(js-string">'.formerInput'),
    laterInput: wrapElem.querySelector(js-string">'.laterInput'),
    sign: wrapElem.querySelector(js-string">'.sign'),
    resultOutput: wrapElem.querySelector(js-string">'.resultOutput'),
    btns: wrapElem.querySelectorAll(js-string">'.btn')
};

js-comment">// 绑定事件
js-keyword">each(calculatorElem.btns, js-function">js-keyword">function js-params">(index, elem) {
    elem.onclick = js-function">js-keyword">function js-params">() {
        js-keyword">switch (js-keyword">this.title) {
            js-keyword">case js-string">'add':
                addHandler();
                js-keyword">break;
            js-keyword">case js-string">'subtract':
                subtractHandler();
                js-keyword">break;
            js-keyword">case js-string">'multiply':
                multiplyHandler();
                js-keyword">break;
            js-keyword">case js-string">'divide':
                divideHandler();
                js-keyword">break;
        }
    };
});
js-comment">//下面做相应改变

0x6 封闭原则

js javascript">获取元素
js-keyword">var wrapElem = document.querySelector(js-string">'#calculator');
js-keyword">var calculatorElem = {
    formerInput: wrapElem.querySelector(js-string">'.formerInput'),
    laterInput: wrapElem.querySelector(js-string">'.laterInput'),
    sign: wrapElem.querySelector(js-string">'.sign'),
    resultOutput: wrapElem.querySelector(js-string">'.resultOutput'),
    btns: wrapElem.querySelectorAll(js-string">'.btn')
};

js-comment">// 绑定事件
each(calculatorElem.btns, js-function">js-keyword">function js-params">(index, elem) {
    elem.onclick = js-function">js-keyword">function js-params">() {
        updateSign(js-keyword">this.value);
        outputResult(operate(js-keyword">this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.value));
    };
});



js-comment">// 遍历
js-function">js-keyword">function js-title">eachjs-params">(array, fn) {
    js-keyword">for (js-keyword">var i = js-number">0; i < array.length; i++) {
        fn(i, array[i]);
    }
}

js-comment">// 更新符号
js-function">js-keyword">function js-title">updateSignjs-params">(symbol) {
    calculatorElem.sign.innerHTML = symbol;
}

js-comment">// 运算
js-function">js-keyword">function js-title">operatejs-params">(name, num1, num2) {
    js-keyword">if (!operation[name]) js-keyword">throw js-keyword">new js-built_in">Error(js-string">'不存在名为' + name + js-string">'的运算方法！');
    js-keyword">return operation[name](num1, num2);
}

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

operation.addOperation(js-string">'mod', js-function">js-keyword">function js-params">(num1, num2) {
    js-keyword">return num1 % num2;
}).addOperation(js-string">'power', js-function">js-keyword">function js-params">(base, power) {
    js-keyword">return js-built_in">Math.pow(base, power);
});

js-comment">// 输出结果
js-function">js-keyword">function js-title">outputResultjs-params">(result) {
    calculatorElem.resultOutput.innerHTML = result;
}

http://www.niftyadmin.cn/n/814143.html

相关文章

【计算机基础】堆和栈的区别(非数据结构中的堆和栈)

【计算机基础】堆和栈的区别(非数据结构中的堆和栈)

一、预备知识—程序的内存分配 一个由C/C编译的程序占用的内存分为以下几个部分 1、栈区&#xff08;stack&#xff09;— 由编译器自动分配释放 &#xff0c;存放函数的参数值&#xff0c;局部变量的值等。其 操作方式类似于数据结构中的栈。 2、堆区&#xff08;heap…
阅读更多...
timerWithTimeInterval 方法详用

timerWithTimeInterval 方法详用

1、初始化 (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(id)userInfo repeats:(BOOL)yesOrNo; (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector …
阅读更多...
Bootstrap进阶

Bootstrap进阶

一、栅格布局 0x1 栅格系统 1、规则 <div class”container”> 调试内外边距 对齐方式…row 默认12列具体内容放在列元素之内&#xff0c;列元素能成为row元素的直接子元素** 2、布局基础 col-md-x 占据几列offset-x 偏移x个列 相当于 margin-left嵌套 row元素只能嵌…
阅读更多...
Docker学习笔记--中篇

Docker学习笔记--中篇

二、Docker 基础用法 2.1 Search images [AppleScript] 纯文本查看 复制代码 ? 1 $ sudo docker search ubuntu 2.2 Pull images [AppleScript] 纯文本查看 复制代码 ? 1 $ sudo docker pull ubuntu # 获取 ubuntu 官方镜像 $ sudo docker images # 查看当前镜像列表…
阅读更多...
当程序崩溃的时候怎么办

当程序崩溃的时候怎么办

原文地址&#xff1a;http://www.raywenderlich.com/10209/my-app-crashed-now-what-part-2 欢迎回到当程序崩溃的时候怎么办 教程&#xff01; 在这个教程的第一部分&#xff0c;我们介绍了SIGABRT和EXC_BAD_ACCESS错误&#xff0c;并且举例说明了一些使用xcode调试器&#xf…
阅读更多...
Docker学习笔记--下篇

Docker学习笔记--下篇

3.3 docker pull && docker push [AppleScript] 纯文本查看 复制代码 ? 1 $ sudo docker pull ubuntu # 下载官方 ubuntu docker 镜像&#xff0c;默认下载所有 ubuntu 官方库镜像 [AppleScript] 纯文本查看 复制代码 ? 1 $ sudo docker pull ubuntu:14.04 …
阅读更多...
移动响应式布局（二）

移动响应式布局（二）

三、Flex弹性布局 0x1 Flex概念 1、弹性盒模型 它能够更加高效方便控制元素对齐、排列&#xff0c;更重要的是能够自动计算布局内元素的尺寸&#xff0c;无论这个元素的尺寸是固定的还是动态的。 2、变成弹性盒模型的步骤 Display: flex; 注&#xff1a;Display: inlin…
阅读更多...
学员故事丨一次转行，一次蜕变

学员故事丨一次转行，一次蜕变

时光总是飞逝,转眼间,离开传智播客黑马程序员西安中心已经过去一个多月了;回想起自己在8个月前从外地辞职回来西安,找工作各种不如意,然而经过短短的几个月,就步入了自己从来没有想过要去从事的IT行业,不禁唏嘘. 选择西安黑马程序员作为进入IT行业的敲门砖,实属偶然,因为已经放…
阅读更多...
最新文章

Copyright @ 2022~2023