js原生计算器，面向对象原型链继承方式_js先乘除后加减的链式计算器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44703147/article/details/109428270

这个博客介绍了一个使用JavaScript实现的原生计算器，虽然UI设计简单，但具备基本计算功能。博主欢迎读者反馈可能存在的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ui不是很好看，但是基本功能都是有的，有什么bug可以给我反馈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style type="text/css">
			.cal {
				width: 224px;
				margin: 47px auto;
				padding: 6px;
				border: 4px solid #999999;
				box-shadow: 2px 2px 4px rgba(12, 122, 113, 0.5);
			}
			.cal-input {
				text-align: right;
				direction: ltr;
				width: 100%;
				box-sizing: border-box;
				border: 2px solid #2D2DFF;
				padding: 13px;
				font-size: 17px;
			}
			.cal-rules {
				margin-top: 8px;
			}
			.cal-rules .cal-clear,  .cal-rules .cal-num{
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.cal-rules span {
				width: 23%;
				box-sizing: border-box;
				padding: 11px;
				margin-top: 4px;
				border-radius: 6px;
				border: 2px solid #9D9D9D;
				text-align: center;
				background-color: #EFEFEF;
				font-size: 18px;
				font-weight: 600;
				color: #2D2DFF;
			}
			.cal-rules span:hover {
				background-color: rgba(13,132,131,0.5);
			}
			
		</style>
	</head>
	<body>
		<div class="cal">
			<input type="text" name="show-screen" class="cal-input" value="0"disabled />
			<div class="cal-rules">
				<div class="cal-clear">
					<span>c</span>
					<span>ce</span>
				</div>
				<div class="cal-num">
					<span>1</span>
					<span>2</span>
					<span>3</span>
					<span>+</span>
					<span>4</span>
					<span>5</span>
					<span>6</span>
					<span>-</span>
					<span>7</span>
					<span>8</span>
					<span>9</span>
					<span>*</span>
					<span>0</span>
					<span>.</span>
					<span>/</span>
					<span>=</span>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// Find查找dom元素
			function Find(obj){
				this.obj = obj;
			}
			Find.prototype = {
				prefix: '',
				findClass: function(className){
					return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
				}
			}
			
			function Item(obj){
				var find = new Find(obj);
				this.input = find.findClass('input');
				this.clear = find.findClass('clear');
				this.num = find.findClass('num');
			}
			Item.prototype = {
				inputValue: [],
				add: function (){
					var _this = this;
					// console.log(_this.num.childNodes)
					var clearNodes = _this.clear.childNodes;
					var childNodes = _this.num.childNodes;
					// console.log(childNodes[1])
					childNodes[1].onclick = function(){_this.operation('1');}
					childNodes[3].onclick = function(){_this.operation('2');}
					childNodes[5].onclick = function(){_this.operation('3');}
					childNodes[7].onclick = function(){_this.operation('+');}
					
					childNodes[9].onclick = function(){_this.operation('4');}
					childNodes[11].onclick = function(){_this.operation('5');}
					childNodes[13].onclick = function(){_this.operation('6');}
					childNodes[15].onclick = function(){_this.operation('-');}
					
					childNodes[17].onclick = function(){_this.operation('7');}
					childNodes[19].onclick = function(){_this.operation('8');}
					childNodes[21].onclick = function(){_this.operation('9');}
					childNodes[23].onclick = function(){_this.operation('*');}
					
					childNodes[25].onclick = function(){_this.operation('0');}
					childNodes[27].onclick = function(){_this.operation('.');}
					childNodes[29].onclick = function(){_this.operation('/');}
					
					childNodes[31].onclick = function(){_this.calResult();}
					
					clearNodes[1].onclick = function(){_this.operation('c');}
					clearNodes[3].onclick = function(){_this.operation('ce');}
				},
				operation: function(oper){
					// operation = function(oper){//惰性载入函数，但是没有实现，不知道是否是因为这里是原型?
					// console.log(parseInt(oper))
						if(oper != 'c' && oper != 'ce' && 
											(!isNaN(parseInt(oper)) || (!isNaN(parseInt(this.inputValue[0])) && this.inputValue != null))){
							var len = this.inputValue.length;
							if(len && isNaN(this.inputValue[len-1]) && isNaN(parseInt(oper))){
								this.inputValue.pop()
								this.inputValue.push(oper);
								this.input.value = this.inputValue.join('');
							}else {
								this.inputValue.push(oper);
								this.input.value = this.inputValue.join('');
							}
							// console.log(this.input.value)
						}else if(oper == 'c') {
							this.inputValue.pop();
							this.input.value = this.inputValue.join('') || 0;
						}else if(oper == 'ce') {
							this.inputValue = [];
							this.input.value = this.inputValue.join('') || 0;
						}
					// }
					// return operation();
				},
				calResult: function(){
					if(this.inputValue){
						this.input.value = eval(this.inputValue.join('')) || this.input.value;
					}
					this.inputValue = [];
					this.inputValue.push(this.input.value)
				}
			}
			var cal = function(prefix){
				Find.prototype.prefix = prefix;
				var item = new Item(document.getElementsByClassName(prefix)[0]);
				item.add();
			};
			// 调用主函数
			cal('cal')
		</script>
	</body>
</html>

在这里插入图片描述