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" 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;
}
// 减
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" 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');
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" 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');
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" 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 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" 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'),
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" 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>
// 获取元素
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" 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> (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>
JS实现简易计算器的7种方法的更多相关文章
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- js function定义函数的4种方法
js function定义函数的4种方法 1.最基本的作为一个本本分分的函数声明使用. 复制代码代码如下: 复制代码代码如下: function func(){} 或 var func=functio ...
- js中数组去重的几种方法
js中数组去重的几种方法 1.遍历数组,一一比较,比较到相同的就删除后面的 function unique(arr){ ...
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- JS实现随机颜色的3种方法与颜色格式的转化
JS实现随机颜色的3种方法与颜色格式的转化 随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...
- js刷新页面有哪几种方法
js刷新页面有哪几种方法 一.总结 一句话总结:location属性的reload方法即可:document.location.reload() 1.页面刷新有哪常见的8种方法? 1,history. ...
- js字符串转换为数字的三种方法。（转换函数）（强制类型转换）（利用js变量弱类型转换）
js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...
- [java代码库]-简易计算器（第二种）
[java代码库]-简易计算器(第二种) 第二种方案:在程序中不使用if/switch……case等语句,完成计算器功能. <html> <head> <title> ...
随机推荐
- CCF_201503-1_图像旋转
水. #include<iostream> #include<cstdio> using namespace std; ][]; int main() { int n,m; c ...
- ZOJ 4067 Books (2018icpc青岛J) (贪心)
题意 给你一个长度为n的数组,代表每一个物品的价格.你有一个初始钱数\(x\),采用以下方法贪心: 从\(1\)到\(n\)扫一遍,如果\(x\)不比\(a[i]\)小,就买下它,买不起就跳过. 给你 ...
- Go语言实现：【剑指offer】字符串的排列
该题目来源于牛客网<剑指offer>专题. 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,b ...
- Hapi+MySql项目实战配置插件-加载文件渲染母版（三）
加载插件 一般在其它node框架下,我们安装好插件直接require('插件')就能正常使用了,但是在Hapi下我们必须要Server.register()方法,才能正常使用插件.举个例子: serv ...
- springboot 日志 logback输出
1.首先在 application,yaml中添加 logging: config: classpath:logback-spring.xml 2.之后在resources中添加 logback-sp ...
- Linux Firewalld用法及案例
Firewalld概述 动态防火墙管理工具 定义区域与接口安全等级 运行时和永久配置项分离 两层结构 核心层 处理配置和后端,如iptables.ip6tables.ebtables.ipset和模块 ...
- KVM性能优化之CPU优化
前言 任何平台根据场景的不同,都有相应的优化.不一样的硬件环境.网络环境,同样的一个平台,它跑出的效果也肯定不一样.就好比一辆法拉利,在高速公路里跑跟乡村街道跑,速度和激情肯定不同... 所以,我们做 ...
- MySQL数据库的备份、还原、迁移
一.单库备份与还原 1.远程连接MySQL数据库 D:\mysql-5.7.14-winx64\bin>mysql -h192.168.2.201 -uroot -pcnbi2018 参数说明: ...
- 浮动和包含框的关系，伪元素after解决高度塌陷
浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> &l ...
- ES6学习笔记（一）：轻松搞懂面向对象编程、类和对象
目录 面向过程编程P OP(Process oriented programming) 面向对象编程OOP(Object Oriented Programming) 总结 @ 面向过程编程P OP(P ...