计算器原生js
目录
1.HTML
2.CSS
2.JS
4.资源
5.运行截图
6.下载连接
7.注意事项
1.HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算器</title><link rel="stylesheet" href="../css/calculator.css"><style>.calculator{width: 250px;height: 430px;margin: 100px auto;border: 1px #ccc solid;}h3{width: 100%;height: 50px;border-bottom: 1px #ccc solid;}h4{width: 100%;height: 30px;border-bottom: 1px #ccc solid;}.list{width: 100%;height: 350px;display: flex;flex-wrap: wrap;justify-content: space-around;align-content: space-around;}.list li{width: 50px;height: 50px;line-height: 50px;text-align: center;border: 1px #ccc solid;}</style>
</head>
<body><div class="calculator"><h3></h3><h4></h4><ul class="list"><!-- <li>AC</li><li>%</li><li>←</li><li>÷</li><li>7</li><li>8</li><li>9</li><li>×</li><li>4</li><li>5</li><li>6</li><li>-</li><li>1</li><li>2</li><li>3</li><li>+</li><li>00</li><li>0</li><li>.</li><li>=</li> --></ul></div>
</body>
</html>
<script src="../js/calculator.js"></script>
<script>let list = document.querySelector('.list');let h3 = document.querySelector('h3');let h4 = document.querySelector('h4');let listData = ['AC','%','←','÷',7,8,9,'×',4,5,6,'-',1,2,3,'+','00',0,'.',"="];listData.forEach(item => {let li = `<li>${item}</li>`;list.innerHTML+=li;});let li = list.querySelectorAll('li');list.addEventListener('click',(e)=>{let target = e.target;// 检查点击的目标是否是 li 元素if (target.tagName.toLowerCase() === 'li') {h3.innerHTML+=target.innerHTML;console.log(h3.innerHTML.slice(-2),'qqq');if(h3.innerHTML.slice(-2).match(/^[\+\-\×\÷\%]+$/)){console.log(h3.innerHTML);h3.innerHTML=h3.innerHTML.substring(0, h3.innerHTML.length - 2) + target.innerHTML;};if(target.innerHTML=='←'){let txt = h3.innerHTML;console.log(txt.length);h3.innerHTML=txt.substring(0, txt.length - 2);console.log(target,h3.innerHTML);}if(target.innerHTML=='AC'){h3.innerHTML='';h4.innerHTML='';}if(target.innerHTML=='='){let txt = h3.innerHTML.replace(/\u00F7/g, "/").replace(/\u00D7/g, "*");h3.innerHTML=h3.innerHTML.substring(0, txt.length - 1);let data = {txt:txt.substring(0, txt.length - 1)};fetch("http://localhost:8080/api/calculator", {method: "POST",headers: {'Content-Type': 'application/json', // 设置请求头的 Content-Type},body: JSON.stringify(data),}).then(response => response.json()).then(res => {h4.innerHTML=res.answer;console.log("res:", res);}).catch(err => {console.log("err:", err);});}// 阻止事件冒泡e.stopPropagation(); }});</script>2.CSS
*{margin: 0;padding: 0;}
ul,li,ol{list-style-type: none;}
button{cursor: pointer;border: none;background: rgba(255, 255, 255, 1);}2.JS
let list = document.querySelector('.list');
let h3 = document.querySelector('h3');
let h4 = document.querySelector('h4');
let listData = ['AC','%','←','÷',7,8,9,'×',4,5,6,'-',1,2,3,'+','00',0,'.',"="];
listData.forEach(item => {let li = `<li>${item}</li>`;list.innerHTML+=li;
});
let li = list.querySelectorAll('li');
list.addEventListener('click',(e)=>{let target = e.target;// 检查点击的目标是否是 li 元素if (target.tagName.toLowerCase() === 'li') {h3.innerHTML+=target.innerHTML;console.log(h3.innerHTML.slice(-2),'qqq');if(h3.innerHTML.slice(-2).match(/^[\+\-\×\÷\%]+$/)){console.log(h3.innerHTML);h3.innerHTML=h3.innerHTML.substring(0, h3.innerHTML.length - 2) + target.innerHTML;};if(target.innerHTML=='←'){let txt = h3.innerHTML;console.log(txt.length);h3.innerHTML=txt.substring(0, txt.length - 2);console.log(target,h3.innerHTML);}if(target.innerHTML=='AC'){h3.innerHTML='';h4.innerHTML='';}if(target.innerHTML=='='){let txt = h3.innerHTML.replace(/\u00F7/g, "/").replace(/\u00D7/g, "*");h3.innerHTML=h3.innerHTML.substring(0, txt.length - 1);let data = {txt:txt.substring(0, txt.length - 1)};fetch("http://localhost:8080/api/calculator", {method: "POST",headers: {'Content-Type': 'application/json', // 设置请求头的 Content-Type},body: JSON.stringify(data),}).then(response => response.json()).then(res => {h4.innerHTML=res.answer;console.log("res:", res);}).catch(err => {console.log("err:", err);});}// 阻止事件冒泡e.stopPropagation(); }
});4.资源
无
5.运行截图
6.下载连接
在此处下载压缩包
【免费】原生js配合Node.js的计算器资源-CSDN文库
7.注意事项
此压缩包 包含前后端简单交互，后端需要用到Node.js，运行口令 nodemon app.js
或者在serve文件夹直接运行run.bat文件，运行成功后打开html即可。注意：run.bat运行成功后不要退出cmd。
相关文章：
计算器原生js
目录 1.HTML 2.CSS 2.JS 4.资源 5.运行截图 6.下载连接 7.注意事项 1.HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-s…...
怎样将aac转换mp3格式？推荐四个aac转MP3的方法
怎样将aac转换mp3格式？当需要将aac格式音频转换为MP3格式时，有几种方法可以轻松实现这一目标。MP3是一种广泛支持的音频格式，几乎所有设备和平台都能播放MP3文件，包括各种音乐播放器、手机、平板电脑和汽车音响系统。而且它也提供…...
MongoDB - 查询操作符：比较查询、逻辑查询、元素查询、数组查询
文章目录 1. 构造数据2. MongoDB 比较查询操作符1. $eq 等于1.1 等于指定值1.2 嵌入式文档中的字段等于某个值1.3 数组元素等于某个值1.4 数组元素等于数组值 2. $ne 不等于3. $gt 大于3.1 匹配文档字段3.2 根据嵌入式文档字段执行更新 4. $gte 大于等于5. $lt 小于6. $lte 小于…...
html5——CSS高级选择器
目录 属性选择器 E[att^"value"] E[att$"http"] E[att*"http"] 关系选择器 子代： 相邻兄弟： 普通兄弟： 结构伪类选择器 链接伪类选择器 伪元素选择器 CSS的继承与层叠 CSS的继承性 CSS的层叠性 …...
Python-数据爬取（爬虫）
~~~理性爬取~~~ 杜绝从入门到入狱 1.简要描述一下Python爬虫的工作原理，并介绍几个常用的Python爬虫库。 Python爬虫的工作原理 发送请求：爬虫向目标网站发送HTTP请求，通常使用GET请求来获取网页内容。解析响应：接收并解析HTTP响…...
虚幻引擎ue5如何调节物体锚点
当发现锚点不在物体上时，如何调节瞄点在物体上。 步骤1：按住鼠标中键拖动锚点，在透视图中多次调节锚点位置。 步骤2:在物体上点击鼠标右键点击-》锚定--》“设置为枢轴偏移”即可。...
Xcode持续集成之道：自动化构建与部署的精粹
标题：Xcode持续集成之道：自动化构建与部署的精粹 在快节奏的软件开发中，持续集成（Continuous Integration, CI）是提升开发效率和软件质量的关键实践。Xcode作为苹果生态中的核心开发工具，提供了与多种持续…...
Java高频面试基础知识点整理13
干货分享，感谢您的阅读！背景高频面试题基本总结回顾（含笔试高频算法整理） 最全文章见：Java高频面试基础知识点整理 （一）Java基础高频知识考点 针对人员： 1.全部人员都…...
css画半圆画圆弧
利用border-radius和border完成： <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>test</title> <style> .semicircle {width: 100px;height: 50px;border-radius: 0 0 50px 50px;background:…...
LeetCode HOT100（四）字串
和为 K 的子数组（mid） 给你一个整数数组 nums 和一个整数 k ，请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 输入：nums [1,1,1], k 2 输出：2 解法1：前缀和Map 这…...
 #按需引入)
uniapp引入 uview( HBuilder 和 npm 两种安装方式) #按需引入
方式一、HBuilder 安装 uview 1.1. HBuider安装-链接-》》 1.2. 在uni.scss 中引入 import "uni_modules/uview-ui/theme.scss";1.3. main.js 引入（import Vue from ‘vue’ 下面） import uView from "uni_modules/uview-ui"; V…...
使用uni-app和Golang开发影音类小程序
在数字化时代，影音内容已成为人们日常生活中不可或缺的一部分。个人开发者如何快速构建一个功能丰富、性能优越的影音类小程序？本文将介绍如何使用uni-app前端框架和Golang后端语言来实现这一目标。 项目概述 本项目旨在开发一个个人影音类小程序&#…...
基于Go1.19的站点模板爬虫详细介绍
构建一个基于Go1.19的站点模板爬虫是一项有趣且具有挑战性的任务。这个爬虫将能够从网站上提取数据，并按照指定的模板进行格式化。以下是详细的介绍和实现步骤。 1. 准备工作 工具和库： Go 1.19colly：一个强大的Go爬虫库goquery࿱…...
永恒之蓝：一场网络风暴的启示
引言 在网络安全的漫长历史中，“永恒之蓝”（EternalBlue）是一个不可忽视的里程碑事件。它不仅揭示了网络世界的脆弱性，还促使全球范围内对网络安全的重视达到了前所未有的高度。本文将深入探讨“永恒之蓝”漏洞的起源、影响及其对…...
AI绘画：艺术与科技的交融，创新浪潮与无限可能
在科技日新月异的当下，AI 绘画作为人工智能领域的一颗璀璨新星，正以惊人的速度在国内崭露头角，引发了艺术与技术交融的全新变革。随着人工智能技术的飞速发展，AI绘画已成为艺术与科技交融的新宠。2024年，AI绘画行业在国…...
医疗健康信息的安全挑战与隐私保护最佳实践
医疗健康信息的安全挑战 医疗健康信息的安全挑战主要包括数据规模庞大、管理困难、数据类型多样导致的安全风险高、以及法律法规与伦理约束带来的挑战。随着医疗信息化的发展，医疗健康数据呈现出爆炸式的增长，医院信息系统、电子病历、健康管理等产生了海…...
《C++并发编程实战》笔记（一、二）
一、简介 抽象损失：对于实现某个功能时，可以使用高级工具，也可以直接使用底层工具。这两种方式运行的开销差异称为抽象损失。 二、线程管控 2.1 线程的基本控制 1. 创建线程 线程相关的管理函数和类在头文件： #include <…...
【日常bug记录】el-checkbox 绑定对象数组
版本说明 "vue": "2.6.10", "element-ui": "2.13.2", 这个写法很怪异哦，但确实管用。el-checkbox 绑定的 label 是双向绑定的值，也就是选中之后传到表单数据里面的值，一般设置为 id，然后…...
单元测试Mockito笔记
文章目录 单元测试Mockito1. 入门1.1 什么是Mockito1.2 优势1.3 原理 2. 使用2.0 环境准备2.1 Mock1) Mock对象创建2) 配置Mock对象的行为(打桩)3) 验证方法调用4) 参数匹配5) 静态方法 2.2 常用注解1) Mock2) BeforeEach 与 BeforeAfter3) InjectMocks4) Spy5) Captor6) RunWi…...
基于SpringBoot+VueJS+微信小程序技术的图书森林共享小程序设计与实现:7000字论文+源代码参考
博主介绍：硕士研究生，专注于信息化技术领域开发与管理，会使用java、标准c/c等开发语言，以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年，拥有近12年的管理工作经验，拥有较丰富的技术架…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍：✌全网粉丝23W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识：什么是 B-Tree 和 BTree？ B-Tree（平衡多路查找树） BTree（B-Tree 的变种） 二、结构对比：一张图看懂 三、为什么 MySQL InnoDB 选择 BTree？ 1. 范围查询更快 2…...
elementUI点击浏览table所选行数据查看文档
项目场景： table按照要求特定的数据变成按钮可以点击 解决方案： <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...