js简易计算器

最新推荐文章于 2024-01-28 22:53:06 发布
最新推荐文章于 2024-01-28 22:53:06 发布
阅读量348 收藏 3
点赞数 1
分类专栏： 前端 文章标签： js简易计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36421955/article/details/103526451
版权 
<!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();" /> -->
		<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 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;
	    // }

    // // 第一次改进--结构和行为分离
	    // // 获取元素
	    // 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;
	    // }

    // // 第二次改进--循环
	    // // 获取元素
	    // 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;
	    // 		}
	    // 	};
	    // }
	    // // // +
	    // // 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;
	    // }

    // // 第三次改进--提取函数
	   //  // 获取元素
	   //  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));
	   //  }

	  // // 第四次改进--管理代码(找到组织)
		 //    // 获取元素
		 //    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));
		 //    }

	// // 第五次改进--OCP开放--封闭原则
		// 	    // 获取元素
		// 	    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;
		// 	    }

	// 第六次改进--模块化
		// (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, num1, num2) {
		// 	    // 		if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
		// 	    // 		return operation[name](num1, num2);
		// 	    // }
		// 	    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;
		// 	    // return function (name, num1, num2) {
		// 	    // 		if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
		// 	    // 		return operation[name](num1, num2);
		// 	    // };
			    
		//     })();

		    
		    
		//     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>

 

GastonPeng
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js简单计算器
梓晨博客
04-12 1535
输出 绑定 计算 字符串 number 数字类型 在js中5+5=55的话 需要在num属性中加一根‘number ’然后包裹 <html> <head> <title></title> <style type="text/css"> /*设置body居中元素*/ body{ text-align: c...
简易版html计算器
08-25
文本文档编写，改后缀直接运行，html前端开发实例，网页版简易计算器，内容附带注释，总之很方便就对了
用HTML实现简易版计算器
热门推荐
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
html实现计算器
zmk0820的博客
03-24 4556
html实现计算器
快速使用HTML、CSS、JavaScript编写一个简单计算器
最新发布
bjjgff的博客
01-28 2583
首先在根目录下创建一个名为 css的目录， 在css目录下创建 main.css样式文件。在index.html 文件的 head标签中，我们要引入css样式，编写以下标签。我们在项目目录当中创建一个 名为 index.html的文件，在文件中编写以下内容。首先创建一个名为 js的目录，在js目录下创建calculartor.js文件。因为HTML结构是比较单一化的，我们需要使用CSS样式对它进行美化。在index.html文件中的 body标签下，编写以下内容。三、编写JavaScript逻辑代码。
HTML程序大全(1)：简易计算器
joe_g12345的博客
12-05 2690
这是一个简单的计算器，使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面，CSS代码设置了计算器的样式，JavaScript代码实现了计算器的功能。这个计算器可以执行加、减、乘、除和取模运算。同时，它还支持小数点和多位数运算。
JavaScript简易计算器制作
10-15
JavaScript简易计算器制作是一个基础的前端开发实践项目，它涉及到HTML、CSS和JavaScript的结合使用，以实现简单的数学运算。在这个项目中，我们将学习如何利用JavaScript处理用户交互，并进行基本的算术运算。 ...
JS简易计算器实例讲解
10-15
主要为大家详细介绍了JS简易计算器实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html+js简易计算器
11-01
html+javaScript实现简易计算器。。。。。。。。。。。
html简易计算器源码
07-11
html实现的一个简易计算器,使用了js、css，可用作学习之用。
自己用Javascript和Html写的一个简单计算器
11-24
自己用Javascript和Html写的一个简单计算器，新手还望大家多多赐教。
HTML简易计算器
11-26
网页版的简易计算器
简易计算器.html
03-30
百度2020春季实习生笔试题的最后一题——利用原生JavaScript实现一个简易计算器。在一个大的框架下按照提示补全代码：获取DOM元素、索取元素属性内容、事件目标、实现加减乘除...
javascript实现简易计算器的代码
10-22
在本文中，我们将深入探讨如何使用JavaScript实现一个简易计算器。这个计算器可以进行基本的加、减、乘、除运算，并具备清零、退格和等于功能。以下是对代码的详细解释： 首先，我们需要一个HTML结构来展示计算器的...
HTML和JavaScript实现一个简单的计算器
qq_57142520的博客
08-14 1685
使用HTML和JavaScript实现一个简单的计算器。
【HTML】简易计算器
Sunny的博客
03-05 5336
设计一个简易计算器，在“操作数”标签右侧的两个文本框中输入操作数，当单击“+，-，*，/”按钮时，对两个操作数进行运算并将结果填入到“结果”标签右侧的文本框中。
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
JavaScript简易计算器
05-26
简易计算器 ()">+ ()">- ()">* ()">/ <p id="result"></p> function add() { var num1 = parseFloat(document.getElementById("input1").value); var num2 = parseFloat(document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值