当前位置：首页 > news >正文

计算器原生js

news 文章来源：https://blog.csdn.net/jxl20010909/article/details/140383733 2025/2/11 9:43:06

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…...

编程日记 2024/7/13 6:25:19

怎样将aac转换mp3格式？推荐四个aac转MP3的方法

怎样将aac转换mp3格式？当需要将aac格式音频转换为MP3格式时，有几种方法可以轻松实现这一目标。MP3是一种广泛支持的音频格式，几乎所有设备和平台都能播放MP3文件，包括各种音乐播放器、手机、平板电脑和汽车音响系统。而且它也提供…...

编程日记 2024/7/13 6:24:16

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 小于…...

编程日记 2024/7/13 6:23:15

html5——CSS高级选择器

目录属性选择器 E[att^"value"] E[att$"http"] E[att*"http"] 关系选择器子代： 相邻兄弟： 普通兄弟： 结构伪类选择器链接伪类选择器伪元素选择器 CSS的继承与层叠 CSS的继承性 CSS的层叠性 …...

编程日记 2024/7/13 6:21:09

Python-数据爬取（爬虫）

~~~理性爬取~~~ 杜绝从入门到入狱 1.简要描述一下Python爬虫的工作原理，并介绍几个常用的Python爬虫库。 Python爬虫的工作原理发送请求：爬虫向目标网站发送HTTP请求，通常使用GET请求来获取网页内容。解析响应：接收并解析HTTP响…...

编程日记 2024/7/13 6:20:08

虚幻引擎ue5如何调节物体锚点

当发现锚点不在物体上时，如何调节瞄点在物体上。步骤1：按住鼠标中键拖动锚点，在透视图中多次调节锚点位置。步骤2:在物体上点击鼠标右键点击-》锚定--》“设置为枢轴偏移”即可。...

编程日记 2024/7/13 6:19:07

Xcode持续集成之道：自动化构建与部署的精粹

标题：Xcode持续集成之道：自动化构建与部署的精粹在快节奏的软件开发中，持续集成（Continuous Integration, CI）是提升开发效率和软件质量的关键实践。Xcode作为苹果生态中的核心开发工具，提供了与多种持续…...

编程日记 2024/7/13 6:18:07

Java高频面试基础知识点整理13

干货分享，感谢您的阅读！背景高频面试题基本总结回顾（含笔试高频算法整理） 最全文章见：Java高频面试基础知识点整理 （一）Java基础高频知识考点针对人员： 1.全部人员都…...

编程日记 2024/7/13 6:17:06

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:…...

编程日记 2024/7/13 6:16:03

LeetCode HOT100（四）字串

和为 K 的子数组（mid） 给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。输入：nums [1,1,1], k 2 输出：2 解法1：前缀和Map 这…...

编程日记 2024/7/13 6:14:01

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…...

编程日记 2024/7/13 6:13:00

使用uni-app和Golang开发影音类小程序

在数字化时代，影音内容已成为人们日常生活中不可或缺的一部分。个人开发者如何快速构建一个功能丰富、性能优越的影音类小程序？本文将介绍如何使用uni-app前端框架和Golang后端语言来实现这一目标。项目概述本项目旨在开发一个个人影音类小程序&#…...

编程日记 2024/7/13 6:10:58

基于Go1.19的站点模板爬虫详细介绍

构建一个基于Go1.19的站点模板爬虫是一项有趣且具有挑战性的任务。这个爬虫将能够从网站上提取数据，并按照指定的模板进行格式化。以下是详细的介绍和实现步骤。 1. 准备工作工具和库： Go 1.19colly：一个强大的Go爬虫库goquery&#xff1…...

编程日记 2024/7/13 6:09:57

永恒之蓝：一场网络风暴的启示

引言在网络安全的漫长历史中，“永恒之蓝”（EternalBlue）是一个不可忽视的里程碑事件。它不仅揭示了网络世界的脆弱性，还促使全球范围内对网络安全的重视达到了前所未有的高度。本文将深入探讨“永恒之蓝”漏洞的起源、影响及其对…...

编程日记 2024/7/13 6:08:56

AI绘画：艺术与科技的交融，创新浪潮与无限可能

在科技日新月异的当下，AI 绘画作为人工智能领域的一颗璀璨新星，正以惊人的速度在国内崭露头角，引发了艺术与技术交融的全新变革。随着人工智能技术的飞速发展，AI绘画已成为艺术与科技交融的新宠。2024年，AI绘画行业在国…...

编程日记 2024/7/13 6:06:54

医疗健康信息的安全挑战与隐私保护最佳实践

医疗健康信息的安全挑战医疗健康信息的安全挑战主要包括数据规模庞大、管理困难、数据类型多样导致的安全风险高、以及法律法规与伦理约束带来的挑战。随着医疗信息化的发展，医疗健康数据呈现出爆炸式的增长，医院信息系统、电子病历、健康管理等产生了海…...

编程日记 2024/7/13 6:04:52

《C++并发编程实战》笔记（一、二）

一、简介抽象损失：对于实现某个功能时，可以使用高级工具，也可以直接使用底层工具。这两种方式运行的开销差异称为抽象损失。二、线程管控 2.1 线程的基本控制 1. 创建线程线程相关的管理函数和类在头文件： #include <…...

编程日记 2024/7/13 6:03:51

【日常bug记录】el-checkbox 绑定对象数组

版本说明 "vue": "2.6.10", "element-ui": "2.13.2", 这个写法很怪异哦，但确实管用。el-checkbox 绑定的 label 是双向绑定的值，也就是选中之后传到表单数据里面的值，一般设置为 id，然后…...

编程日记 2024/7/13 6:02:50

文章目录单元测试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…...

编程日记 2024/7/13 6:01:49

基于SpringBoot+VueJS+微信小程序技术的图书森林共享小程序设计与实现:7000字论文+源代码参考

博主介绍：硕士研究生，专注于信息化技术领域开发与管理，会使用java、标准c/c等开发语言，以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年，拥有近12年的管理工作经验，拥有较丰富的技术架…...

编程日记 2024/7/13 6:00:48

GitHub连接超时问题 Recv failure: Connection was reset

用手机热点WIF拉取git项目的时候，遇到Recv failure: Connection was reset问题。解决办法一、手动开启本地代理二、在终端（cmd）输入命令 git config --global http.proxy http://127.0.0.1:7890 git config --global https.proxy https:…...

编程日记 2024/7/13 5:59:45

浅谈PostCSS

1. 背景 css的预处理器语言（比如 sass， less， stylus）的扩展性不好，你可以使用它们已有的功能，但如果想做扩展就没那么容易。 sass是很常用的css预处理器语言，在webpack中要使用它，…...

编程日记 2024/7/13 5:58:44

GCN、GIN

# 使用TuDataset 中的PROTEINS数据集。 # 里边有1113个蛋白质图，区分是否为酶，即二分类问题。# 导包 from torch_geometric.datasets import TUDataset from torch_geometric.data import DataLoader import torch import torch.nn as nn import torch.…...

编程日记 2024/7/13 5:57:43

Web控件进阶交互

Web控件进阶交互测试时常需要模拟键盘或鼠标操作，可以用Python的ActionChains来模拟。ActionChains是Selenium提供的一个子类，用于生成和执行复杂的用户交互操作，允许将一系列操作链接在一起，然后一次性执行。 from selenium im…...

编程日记 2024/7/13 5:56:42

基于SpringBoot的校园疫情防控系统

你好，我是专注于计算机科学与技术的研究者。如果你对我的工作感兴趣或有任何问题，欢迎随时联系我。开发语言：Java 数据库：MySQL 技术：SpringBoot框架，B/S架构工具：Eclipse，Mav…...

编程日记 2024/7/13 5:55:41

elasticsearch 查询超10000的解决方案

前言默认情况下，Elasticsearch集群中每个分片的搜索结果数量限制为10000。这是为了避免潜在的性能问题。但是我们在实际工作过程中时常会遇到需要深度分页，以及查询批量数据更新的情况问题：当请求form size >10000 时&#xff0c…...

编程日记 2024/7/13 5:54:40

SpringCloud集成kafka集群

目录 1.引入kafka依赖 2.在yml文件配置配置kafka连接 3.注入KafkaTemplate模版 4.创建kafka消息监听和消费端 5.搭建kafka集群 5.1 下载 kafka Apache KafkaApache Kafka: A Distributed Streaming Platform.https://kafka.apache.org/downloads.html 5.2 在config目录下做…...

编程日记 2024/7/13 5:52:39

Macos 远程登录 Ubuntu22.04 桌面

这里使用的桌面程序为 xfce, 而 gnome 桌面则测试失败。 1,安装在ubuntu上，安装 vnc server与桌面程序xfce sudo apt install xfce4 xfce4-goodies tightvncserver 2，第一次启动和配置 $ tightvncserver :1 设置密码。然后修改配置&#xff1a…...

编程日记 2024/7/13 5:49:36

第十届MathorCup高校数学建模挑战赛-A题：无车承运人平台线路定价问题

目录摘要 1 问题重述 1.1 研究背景 1.2 研究问题 2 符号说明与模型假设 2.1 符号说明 2.2 模型假设 3 问题一：模型建立与求解 3.1 问题分析与思路 3.2 模型建立 3.2.1 多因素回归模型 3.3 模型求解 3.3.1 数据预处理 3.3.2 重要度计算 4 问题二：模型建立与求…...

编程日记 2024/7/13 5:48:35

在分布式环境中，怎样保证 PostgreSQL 数据的一致性和完整性？

文章目录在分布式环境中保证 PostgreSQL 数据的一致性和完整性一、数据一致性和完整性的重要性二、分布式环境对数据一致性和完整性的挑战（一）网络延迟和故障（二）并发操作（三）数据分区和复制三、保证 Pos…...

编程日记 2024/7/13 5:46:33

专业的美容网站建设/百度旧版本下载

慕仰8121524Go语言操作数据库非常的简单，他也有一个类似JDBC的东西"database/sql"实现类是"github.com/go-sql-driver/mysql"使用过JDBC的人应该一看就懂对日期的处理比较晦涩,没有JAVA流畅:复制代码代码如下:package mainimport ( "da…...

编程日记 2025/2/11 7:55:31

用废旧盒子做家用物品网站/域名停靠网页app推广大全

老李分享：jvm内存原型剖析一、java虚拟机内存原型寄存器：我们在程序中无法控制栈：存放基本类型的数据和对象的引用，但对象本身不存放在栈中，而是存放在堆中堆：存放用new产生的数据静态域：存放在…...

编程日记 2025/2/11 6:31:50

有什么做网站的国企/临沂百度公司地址

谈到区块链，必然离不开“智能合约”这个词。我们在本系列的第一篇文章中提到“智能合约”（smart contract）是由多产的跨领域法律学者 Nick Szabo 在1995年提出来的，他的定义为：“一个智能合约是一套以数字形式定义的承…...

编程日记 2025/2/11 4:24:40

做化工哪个网站好/3步打造seo推广方案

阅读目录配置 Supervisor启动 Supervisor配置 Supervisor Supervisor 的配置文件通常位于 /etc/supervisor/conf.d 目录下。在该目录中，可以创建任意数量的配置文件，用来配置 supervisor 如何监控进程。例如，创建一个 laravel-worker.co…...

编程日记 2025/2/11 2:23:10

赚钱网站在线进入/nba最新排行榜

下面的示例向您展示了如何自定义JButton摇摆组件的图标。package org.nhooo.example.swing;import javax.swing.*;import java.awt.*;public class JButtonCustomIcon extends JFrame {public JButtonCustomIcon() throws HeadlessException {initialize();}private void initi…...

编程日记 2025/2/11 1:36:41

寿光网站建设优化/论坛seo网站

准备 drupal 、wampServer 卸载掉已安装的mysql 、将已启用的IIS暂停，占用了80端口。下面引出正文 PHP服务器架设软件，就是wampserver，这款软件在安装的过程中就已经把Apache、MySQL、PHP继承好了，而且也做好了相应的配置&#…...

编程日记 2025/2/10 21:39:58

1.HTML

2.CSS

2.JS

4.资源

5.运行截图

6.下载连接

7.注意事项

相关文章：