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

前言

本文主要讲解如何用纯前端制作计算器，并且可以利用鼠标点击、键盘监听、键盘连续键监听实现加减乘除、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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/188200.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android Studio - 显示配置

Android Studio - 显示配置

1.修改 Code / Split / Design&#xff08;代码视图 & 效果视图&#xff09; 路径&#xff1a;Settings→Editor→Design Tools。 2.增加打开文件的数量及展示方式 路径&#xff1a;Settings→Editor→General→Editor Tabs。
阅读更多...
跨境电商平台的社会责任：可持续经营的路径

跨境电商平台的社会责任：可持续经营的路径

随着全球化的不断推进&#xff0c;跨境电商平台在国际贸易中扮演着越来越重要的角色。然而&#xff0c;这一行业的蓬勃发展也伴随着一系列社会和环境问题&#xff0c;使得跨境电商平台不得不正视并履行社会责任。在追求商业成功的同时&#xff0c;平台如何走上一条可持续经营的…
阅读更多...
【网络安全】用永恒之蓝（Eternal blue）测试windows系统的安全性

【网络安全】用永恒之蓝（Eternal blue）测试windows系统的安全性

一、kali默认账户和密码都为kali 攻击机&#xff1a;Linux 的 kali 目标机&#xff1a;Windows7 x64 二、kali、metasploit、metasploit 攻击 windows操作系统、metasploit 攻击 永恒之蓝 全流程 ①kali&#xff1a;是黑客攻击机。开源免费的Linux操作系统&#xff0c;含有300…
阅读更多...
2023年亚太杯数学建模C题新能源汽车（思路模型代码）

2023年亚太杯数学建模C题新能源汽车（思路模型代码）

一、翻译 新能源汽车是指采用先进的技术原理、新技术和新结构&#xff0c;以非常规车用燃料&#xff08;非常规车用燃料是指汽油和柴油以外的燃料(非常规车用燃料是指汽油和柴油以外的燃料&#xff09;&#xff0c;并集成了汽车动力控制和驱动等先进技术的汽车。新能源汽车包括…
阅读更多...
理解 Python 的 for 循环

理解 Python 的 for 循环

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 在本篇博客中&#xff0c;我们将讨论 Python 中 for 循环的原理。 我们将从一组基本例子和它的语法开始&#xff0c;还将讨论与 for 循环关联的 else 代码块的用…
阅读更多...
【技术分享】远程透传网关-单网口快速实现西门子S7-200 串口PLC程序远程上下载

【技术分享】远程透传网关-单网口快速实现西门子S7-200 串口PLC程序远程上下载

准备工作 一台可联网操作的电脑一台单网口的远程透传网关及博达远程透传配置工具网线一条&#xff0c;用于实现网络连接一台西门子S7-200 PLC及其编程软件一个9针串口头及连接线&#xff0c;用于连接PLC一张4G卡或WIFI天线实现通讯(使用4G联网则插入4G SIM卡&#xff0c;WIFI联…
阅读更多...
使用Docker Compose搭建CIG监控平台

使用Docker Compose搭建CIG监控平台

CIG简介 CIG监控平台是基于CAdvisor、InfluxDB和Granfana构建的一个容器重量级监控系统&#xff0c;用于监控容器的各项性能指标。其中&#xff0c;CAdvisor是一个容器资源监控工具&#xff0c;用于监控容器的内存、CPU、网络IO和磁盘IO等。InfluxDB是一个开源的分布式时序、时…
阅读更多...
jmeter资料

jmeter资料

1.jmeter介绍 Apache JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试&#xff0c;它最初被设计用于Web应用测试&#xff0c;但后来扩展到其他测试领域。 它可以用于测试静态和动态资源&#xff0c;例如静态文件、Java 小服务程序、CGI 脚本、Java 对象…
阅读更多...
大数据技术之Kafka：一篇文章带你学会Kafka

大数据技术之Kafka：一篇文章带你学会Kafka

大数据技术之Kafka&#xff1a;一篇文章带你学会Kafka 第1章Kafka概述 1.1 消息队列 &#xff08;1&#xff09;点对点模式&#xff08;一对一&#xff0c;消费者主动拉取数据&#xff0c;消息收到后消息清除&#xff09;点对点模型通常是一个基于拉取或者轮询的消息传送模型…
阅读更多...
视频怎么去水印？如何下载保存无水印视频？

视频怎么去水印？如何下载保存无水印视频？

你是否曾经在观看鬼畜素材视频时&#xff0c;被烦人的水印挡住了视线&#xff0c;让你感到十分郁闷&#xff1f;不要担心&#xff0c;今天我将为你介绍几种经典的方法&#xff0c;让你轻松下载无水印视频&#xff0c;让观看体验更加清爽不留痕迹。让我们一起来试试吧&#xff0…
阅读更多...
【Linux】TCP套接字编程

【Linux】TCP套接字编程

目录 前言 UDP服务器的完善 线程的封装 结构定义 接口实现 环形队列 结构定义 接口实现 加锁 信号量的申请与释放 入队与出队 整体组装 初始化与析构 信息接收线程 消息发送线程 TCP套接字 创建套接字 listen accept 收发操作 客户端的编写 进一步完善 …
阅读更多...
每日一题：LeetCode-1089. 复写零

每日一题：LeetCode-1089. 复写零

每日一题系列&#xff08;day 09&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…
阅读更多...
浅学指针（4）函数指针数组和qsort的使用

浅学指针（4）函数指针数组和qsort的使用

系列文章目录 文章目录 系列文章目录前言1.函数指针数组的⽤途作用&#xff1a;可以让代码更简洁&#xff0c;逻辑更清晰 2. 回调函数回调函数就是⼀个通过函数指针调⽤的函数 3 . qsort函数qsort函数可以排序所有数据类型解释如图&#xff1a;![在这里插入图片描述](https://i…
阅读更多...
Google Chrome 下载 (离线版)

Google Chrome 下载 (离线版)

1 访问网址 Google Chrome 网络浏览器 2 点击 下载Chrome 3 直接运行 ChromeStandaloneSetup64.exe 其他&#xff1a; ####################### 谷歌浏览器 (Google Chrome) 最新版离线安装包下载 https://www.iplaysoft.com/tools/chrome/#google_vignette Google Chrome …
阅读更多...
socks5代理如何工作？socks5代理可以用来做什么？

socks5代理如何工作？socks5代理可以用来做什么？

socks5代理是一种网络代理服务器&#xff0c;它通常用于改变网络请求的传输方式和地址&#xff0c;从而使得网络请求能够通过代理服务器进行访问。本文将介绍socks5代理的工作原理、优势、使用场景以及如何选择合适的socks5代理。 一、socks5代理的工作原理 socks5代理是一种协…
阅读更多...
一文读懂设备巡检的主要内容

一文读懂设备巡检的主要内容

在现代企业和组织中&#xff0c;设备的正常运行是业务持续发展的关键&#xff0c;尤其是制造业&#xff0c;由于其发展趋势不断机械化、自动化、大型化、高速化和复杂化&#xff0c;对设备巡检的要求越来越高。然而&#xff0c;在信息化时代&#xff0c;很多企业目前仍采用纸笔…
阅读更多...
GPT实战系列-大模型训练和预测，如何加速、降低显存

GPT实战系列-大模型训练和预测，如何加速、降低显存

GPT实战系列-大模型训练和预测&#xff0c;如何加速、降低显存 不做特别处理&#xff0c;深度学习默认参数精度为浮点32位精度&#xff08;FP32&#xff09;。大模型参数庞大&#xff0c;10-1000B级别&#xff0c;如果不注意优化&#xff0c;既耗费大量的显卡资源&#xff0c;…
阅读更多...
Python应用：利用matplotlib画学生成绩分布饼图

Python应用：利用matplotlib画学生成绩分布饼图

1. 题目 给定一组学生成绩&#xff1a;[85, 92, 78, 65, 95, 88, 72, 60, 98, 45, 100, 46, 23, 88, 67, 89, 67, 88, 99]&#xff0c;现在评分等级为优&#xff08;90-100&#xff09;、良&#xff08;70-89&#xff09;、及格&#xff08;60-69&#xff09;、不及格&#xff…
阅读更多...
玩转大数据4：大数据的崛起与应用领域探索

玩转大数据4：大数据的崛起与应用领域探索

图片来源网络 引言 在当今数字化时代&#xff0c;大数据正以前所未有的速度和规模崛起。大数据的出现不仅改变了企业和组织的经营模式&#xff0c;也对我们的社会生活带来了深刻的影响。Java作为一种广泛使用的编程语言&#xff0c;在大数据领域发挥着重要的作用。本文将重点…
阅读更多...
工程师每日刷题 -4

工程师每日刷题 -4

文章目录 1、深度学习2、算法与数据结构2.1、暴力解法2.2、滑动窗口法 3、编程基础 1、深度学习 问题&#xff1a;CNN的本质和优势&#xff1f; CNN 本质上是一个多层感知机 (MLP)&#xff0c;其成功的原因关键在于它所采用的【稀疏连接】&#xff08;局部感受&#xff09;和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023