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

已于 2023-11-30 14:21:16 修改
阅读量620 收藏 7
点赞数 10
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
于 2023-11-25 21:37:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lplovewjm/article/details/134620499
版权

前言

本文主要讲解如何用纯前端制作计算器，并且可以利用鼠标点击、键盘监听、键盘连续键监听实现加减乘除、delete、计算结果、清除全部数字等功能。那么好文本正式开始。
在这里插入图片描述

布局和样式流程

首先是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实现流程

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

全部源码

<!DOCTYPE html>
<html>
	<head>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.container {
				width: 320px;
				background-color: #fafafa;
				border: 1px solid lightgray;
				position: relative;
				box-shadow: 1px 1px 15px lightgray;
				margin: 0 auto 0 auto;
				margin-top: 150px;
			}

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

			.flex_1 {
				text-align: center;
				border: 1px solid lightgray;
				background-color: white;
				color: black;
				flex: 1;
				font-size: 24px;
				line-height: 50px;
			}

			#ans {
				height: 50px;
				position: absolute;
				top: 30px;
				right: 0;
				font-size: 24px;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="container" id="all">
			<div style="position:absolute;top:10px;left:10px;font-size:12px">计算器</div>
			<div style="position:absolute;top:160px;right:5px;" id="ans">0</div>
			<div style="height:200px;"></div>
			<div class="contain">
				<div class="flex_1">0</div>
				<div class="flex_1">1</div>
				<div class="flex_1">2</div>
				<div class="flex_1">-</div>
			</div>
			<div class="contain">
				<div class="flex_1">3</div>
				<div class="flex_1">4</div>
				<div class="flex_1">5</div>
				<div class="flex_1">+</div>
			</div>
			<div class="contain">
				<div class="flex_1">6</div>
				<div class="flex_1">7</div>
				<div class="flex_1">8</div>
				<div class="flex_1">*</div>
			</div>
			<div class="contain">
				<div class="flex_1">9</div>
				<div class="flex_1">÷</div>
				<div class="flex_1">AC</div>
				<div class="flex_1">=</div>
			</div>
		</div>
		<script>
			let ans = document.getElementById('ans')
			let lastKeyCode = null;
			document.getElementById('all').addEventListener('click', function(e) {
				if (e.target.className == 'flex_1') {
					if (ans.innerHTML == 0) {
						switch (e.target.innerHTML) {
							case 'AC':
								break;
							case '=':
								break;
							case '+':
								break;
							case '-':
								break;
							case '*':
								break;
							case '÷':
								break;
							default:
								ans.innerHTML = e.target.innerHTML
						}
					} else if (e.target.innerHTML == 'AC') {
						ans.innerHTML = 0
					} else if (e.target.innerHTML == '=') {
						computeResult()
					} else if (ans.innerHTML.length < 22) {
						ans.innerHTML += e.target.innerHTML
					}
				}
			})

			document.onkeydown = function(e) {
				if (lastKeyCode != 16) {
					if ((e.keyCode <= 57 && e.keyCode >= 47) ||
						(e.keyCode <= 105 && e.keyCode >= 96)) {
						if (ans.innerHTML.length < 22) {
							let temp = e.keyCode <= 57 ? e.keyCode - 48 : e.keyCode - 96;
							if (ans.innerHTML == 0) {
								ans.innerHTML = temp
							} else {
								ans.innerHTML += temp;
							}
						}
					} else if (ans.innerHTML.length < 22 || e.keyCode == 8 || e.keyCode == 187 ||
						e.keyCode == 13) {
						ans.innerHTML = keyMany()
						switch (e.keyCode) {
							case 189:
								if (ans.innerHTML.length < 22)
									ans.innerHTML += '-';
								break;
							case 191:
								if (ans.innerHTML.length < 22)
									ans.innerHTML += '÷';
								break;
							case 8:
								ans.innerHTML = ans.innerHTML.length >= 1 ? ans.innerHTML.slice(0, ans.innerHTML.length -
									1) : '';
								break;
							case 13:
								computeResult();
								break;
							case 187:
								computeResult();
								break;
						}
					}
				} else if (ans.innerHTML.length < 22) {
					if (e.keyCode == 187) {
						ans.innerHTML = keyMany()
						ans.innerHTML += '+'
					} else if (e.keyCode == 56) {
						ans.innerHTML = keyMany()
						ans.innerHTML += '*'
					}
				}
				if (lastKeyCode == null) {
					lastKeyCode = e.keyCode
				}
			}

			document.onkeyup = function(e) {
				lastKeyCode = null
			}

			function keyMany() {
				let temp = ans.innerHTML[ans.innerHTML.length - 1]
				if (temp == '+' || temp == '-' || temp == '÷' || temp == '*') {
					ans.innerHTML = ans.innerHTML.slice(0, ans.innerHTML.length - 1)
					console.log(ans.innerHTML);
				}
				return ans.innerHTML;
			}

			function computeResult() {
				let arr = Array.from(ans.innerHTML)
				let startData = '',
					sym = '',
					endData = ''
				arr.forEach((item, index) => {
					if (index == 0 && item == '-') {
						startData = '0'
						sym = '-'
					}
					else if (isSym(item)) {
						if (sym != '') {
							switch (sym) {
								case '+':
									startData = Number(startData) + Number(endData);
									break;
								case '-':
									startData = Number(startData) - Number(endData);
									break;
								case '*':
									startData = Number(startData) * Number(endData);
									break;
								case '÷':
									startData = Number(startData) / Number(endData);
									break;
							}
							endData = '';
						}
						sym = item;
					} else {
						if (startData == '' || sym == '') {
							startData += item
						} else {
							if (index == arr.length - 1) {
								if (!isSym(arr[index])) {
									endData += item;
								}
								switch (sym) {
									case '+':
										startData = Number(startData) + Number(endData);
										break;
									case '-':
										startData = Number(startData) - Number(endData);
										break;
									case '*':
										startData = Number(startData) * Number(endData);
										break;
									case '÷':
										startData = Number(startData) / Number(endData);
										break;
								}
								endData = '';
							} else {
								endData += item;
							}
						}
					}
				})
				ans.innerHTML = startData
			}

			function isSym(data) {
				if (data == '+' || data == '-' || data == '*' || data == '÷') {
					return true;
				} else {
					return false;
				}
			}
		</script>
	</body>
</html>
爱吃巧克li
关注
专栏目录
原生JS实现计算器
空寻的博客
07-19 350
只能简单的实现加减乘除运算 ###纯手工制作不容易，求一键三连，效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-widt
用原生js做了一个计算器
qq_43656995的博客
10-01 384
用原生js做了一个计算器 做一个计算器，在前端上你需要一个css3美观布局，而我的布局还是比较简单，希望看了此文章读者，他在css3布局美观点。` <script type="text/javascript"> var contexts=document.getElementsByClassName('context'); var ins=document.getElementsByC...
原生js写计算器
wys997的博客
08-01 368
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <m
原生JS实现简单的计算器
weixin_45881749的博客
06-11 255
原生JS实现简单的计算器 <style> * { margin: 0; padding: 0; list-style: none; } .counter { width: 270px; height: 400px; border: solid rgb(11, 187, 218) 1px;
js原生计算器demo
kakashs
05-03 294
HTML： <section id="model"> <div class="result"></div> <div class="box"> <button class="button big">C</button> <button class="button">1</button&gt...
原生JavaScript制作计算器
10-21
原生JavaScript制作计算器知识点解析： JavaScript是一种高级的、解释执行的编程语言，被广泛用于网页开发中，提供用户与网页内容之间的动态交互。使用原生JavaScript，开发者可以实现无需依赖任何外部库或框架即可...
结合 HTML、CSS，基于原生 JavaScript 实现计算器
01-06
结合 HTML、CSS，基于原生 JavaScript 实现计算器 要求界面、按键设计合理、 美观，除基本计算功能外，需实现进制转换、结果存储、取存计算的功能。实现长度转换。实现时间计算
原生js实现日期计算器功能
10-20
本示例将详细介绍如何使用原生JavaScript实现一个简单的日期计算器。 首先，我们需要理解JavaScript中的Date对象。Date对象是JavaScript内建的一个对象，用于处理日期和时间。创建一个新的Date对象可以表示当前的...
【JavaScript源代码】原生js实现简易计算器.docx
12-30
本项目的目标是使用原生JavaScript实现一个简单的在线计算器。 #### 二、技术选型与实现原理 **1. 技术选型：** - **HTML:** 用于构建页面结构。 - **CSS:** 用于美化页面样式。 - **JavaScript:** 用于实现...
利用原生JS写简单计算器
哪有那么可爱的小蝈蝈的博客
10-05 2258
利用原生JS写简单计算器 利用原生JS来写一个简单的计算器，其中主要是对利用JS新建标签和鼠标事件的应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document
原生js简单的加减乘除计算器样式
11-07
原生js简单的加减乘除计算器样式
纯JavaScript实现计算器
11-15
用JavaScript实现一个运算式的计算 a. 支持加，减，乘，除（+, -, *, /) b. 支持输入合法的数字，包括小数，不考虑非法输入和数字越界（0-9, .） sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 附加题：在运算式计算中支持括号: ”(“, ”)”.
原生js在线科学计算器代码.zip
10-15
非常实用好看的特效代码，完美运行，可以二次修改！
使用原生js实现的简易计算器
big_beer的博客
08-03 309
使用原生js实现的简易计算器 代码： <!doctype html> <html> <head> <meta charset='UTF-8' /> <title>简易计算器</title> </head> <style type="text/css"> body, ul, li,select { margin: 0; padding: 0; b
JS原生——计算器（非eval，附源码）
最新发布
前端小白一枚
01-23 1579
带括号的加减乘除运算、清空、清空末位、历史记录、字体切换、主题切换。主要利用弹栈的思想实现：定义calculateExpression函数，接受一个表达式作为参数。如果表达式中包含了括号，则使用递归的方式处理括号内的子表达式。具体来说，首先找到左括号的位置left和右括号的位置right，然后将括号内的子表达式提取出来，并调用自身并传入子表达式作为参数，得到子表达式的计算结果subResult。
原生js实现计算器
luo15256533579的博客
09-29 8308
逻辑 1、获取被点击的按钮的值。 2、判断这个是数字、运算符号、小数点。 3、运算符号进行运算，小数点和数字push进数组，然后转换为数字。 Document *{ margin: 0; padding: 0; } .wrap{ width: 250px; height: 250px; margin: 100px auto; backgroun
使用原生js实现简易计算器
B2689429488的博客
12-14 168
思路:得到文本框的值,进行加减乘除 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <label>第一个数:</label> <input type="text" id="num1"/><br/> <label&gt
【小工具】原生JS的计算器
zuncle的博客
02-10 921
【小工具】原生JS的计算器<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>写给新手：js表单操作（四） 简单计算器（二）</title> <style type="text/css"> body {
原生JS实现简易计算器
angnai5032的博客
01-12 175
<!doctype html> <html> <head> <meta charset="utf-8"> <title>简易计算器</title> <style> #div{ width: 300px; height: 500px; ...
原生JavaScript实现简易计算器示例及注释
文档详细介绍了如何利用原生JavaScript编写一个基本的计算器，适用于初学者和开发者参考。以下是主要内容： 1. **HTML结构**: 文档开始定义了一个简单的HTML结构，包括`<html>`、`<head>`和`<body>`部分。`<meta>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃巧克li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值