原生JS实现计算器（内含源码）

news2024/11/19 0:52:26

前言

本文讲解了JavaScript如何在一小时内实现一个简易计算器，这里最大的亮点就在于，我在JS中只用了一个事件，就实现了计算器的效果和功能，那么好文本正式开始。
在这里插入图片描述

布局和样式流程

首先是HTML+CSS结构：这里主要用到的是position定位和Flex布局。

首先我们准备一个大的div，用于装最大的容器，它的id为all
然后我们准备三个小的div，给这些div加上Flex-box弹性盒子布局
这三个小div下面准备了四个小div，四个小div主要用到的是flex：1，均匀的进行平分上述div的空间
那么同时我们在最上面的0展示阶段设置了两个div
第一个div用到的是position：absolute，绝对定位，top：40px；right:0px
第二个div就是为了占据第一个div的空间，因为绝对定位不占用页面空间，但是我们还想要留出这部分空间，所以使用另一个普通的div来实现这块空间的占据。

JS实现流程

我们使用事件委托来实现一个事件绑定所有计算器中能看到的按钮和最终值的id。想了解事件委托的小伙伴可以点击我的另一篇文章：点击这里
简单来说，事件委托就是在父元素的监听事件下去绑定所有符合要求的子元素，那么就实现一个事件多次复用和简化代码的操作了。
首先我们定义两个变量，分别存储id为all的DOM父元素，和最终结果展示区域也就是ansDOM子元素
给all添加一个点击监听事件
如果这个事件对象下点击的目标对象下的className伪类名是flex_1,那么我就进入这个循环，这里flex_1是所有按钮都绑定的一个伪类，那么就可以用于判断。
用innerHTML判断获取到的点击元素的内容，比如点击=内容为=，点击+为+等等，然后去做对应的逻辑处理。最后用parseInt进行字符串转换数字操作，然后赋值给result变量，最终给ans变量的innerHTML赋值。实现计算器效果。

全部源码

<!DOCTYPE html>
<html>
	<head>
		<style>
			*{
				padding:0;
				margin:0;
			}
			.container {
				width: 400px;
				background-color: #ccc;
				border:1px solid lightgray;
				position: relative;
			}

			.contain {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.flex_1 {
				text-align: center;
				border: 1px solid lightgray;
				background-color: #011aff;
				color: white;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div class="container" id="all">
			<div style="height:50px;position:absolute;top:30px;right:0;" id="ans">0</div>
			<div style="height:50px;"></div>
			<div class="contain">
				<div class="flex_1">1</div>
				<div class="flex_1">2</div>
				<div class="flex_1">3</div>
				<div class="flex_1">+</div>
			</div>
			<div class="contain">
				<div class="flex_1">4</div>
				<div class="flex_1">5</div>
				<div class="flex_1">6</div>
				<div class="flex_1">7</div>
			</div>
			<div class="contain">
				<div class="flex_1">8</div>
				<div class="flex_1">9</div>
				<div class="flex_1">重置</div>
				<div class="flex_1">=</div>
			</div>
		</div>
		<script>
			let all = document.getElementById('all')
			let ans = document.getElementById('ans')
			let result = 0;
			all.addEventListener('click', function(e) {
				if (e.target.className == 'flex_1') {
					if (ans.innerHTML == 0) {
						switch (e.target.innerHTML) {
							case '重置':
								break;
							case '=':
								break;
							case '+':
								break;
							default:
								ans.innerHTML = e.target.innerHTML
						}
					} else if (e.target.innerHTML == '重置') {
						ans.innerHTML = 0
					} else if (e.target.innerHTML == '=') {
						let temp = '';
						let result = 0;
						for (let i = 0; i < ans.innerHTML.length; i++) {
							if (ans.innerHTML[i] == '+') {
								result += parseInt(temp)
								temp = '';
							} else {
								temp += ans.innerHTML[i]
								if (ans.innerHTML.length - 1 == i) {
									result += parseInt(temp)
								}
							}
						}
						ans.innerHTML = result;
					} else {
						ans.innerHTML += e.target.innerHTML
					}
				}
			})
		</script>
	</body>
</html>