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

就是这个样的粗爆,手搓一个计算器:科学计算器

       作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。

HTML:

<div class="calculator"><div class="display-wrapper"><div class="display" id="display">0</div></div><div class="buttons"><button onclick="clearDisplay()">C</button><button onclick="deleteLast()">←</button><button onclick="appendOperator('(')">(</button><button onclick="appendOperator(')')">)</button><button onclick="appendNumber('7')">7</button><button onclick="appendNumber('8')">8</button><button onclick="appendNumber('9')">9</button><button onclick="appendOperator('/')">/</button><button onclick="appendNumber('4')">4</button><button onclick="appendNumber('5')">5</button><button onclick="appendNumber('6')">6</button><button onclick="appendOperator('*')">*</button><button onclick="appendNumber('1')">1</button><button onclick="appendNumber('2')">2</button><button onclick="appendNumber('3')">3</button><button onclick="appendOperator('-')">-</button><button onclick="appendNumber('0')" class="zero">0</button><button onclick="appendDot()">.</button><button onclick="appendOperator('+')">+</button><button onclick="calculate()">=</button></div><div class="buttons scientific"><button onclick="calculateFunction('sin')">sin</button><button onclick="calculateFunction('cos')">cos</button><button onclick="calculateFunction('tan')">tan</button><button onclick="calculateFunction('log')">log</button><button onclick="calculateFunction('sqrt')">√</button><button onclick="calculateFunction('pow2')">x²</button><button onclick="calculateFunction('pow3')">x³</button><button onclick="calculateFunction('exp')">eˣ</button><button onclick="calculateFunction('ln')">ln</button><button onclick="calculateFunction('fact')">n!</button><button onclick="calculateFunction('reciprocal')">1/x</button><button onclick="calculateFunction('pi')">π</button></div>
</div>

JS:

let displayValue = '0';function updateDisplay() {document.getElementById('display').textContent = displayValue;
}function clearDisplay() {displayValue = '0';updateDisplay();
}function deleteLast() {if (displayValue.length > 1) {displayValue = displayValue.slice(0, -1);} else {displayValue = '0';}updateDisplay();
}function appendNumber(number) {if (displayValue === '0') {displayValue = number;} else {displayValue += number;}updateDisplay();
}function appendOperator(operator) {displayValue += operator;updateDisplay();
}function appendDot() {if (!displayValue.includes('.')) {displayValue += '.';}updateDisplay();
}function calculate() {try {displayValue = eval(displayValue).toString();} catch (error) {displayValue = 'Error';}updateDisplay();
}function calculateFunction(func) {try {let value = parseFloat(displayValue);switch (func) {case 'sin':displayValue = Math.sin(value).toString();break;case 'cos':displayValue = Math.cos(value).toString();break;case 'tan':displayValue = Math.tan(value).toString();break;case 'log':displayValue = Math.log10(value).toString();break;case 'sqrt':displayValue = Math.sqrt(value).toString();break;case 'pow2':displayValue = Math.pow(value, 2).toString();break;case 'pow3':displayValue = Math.pow(value, 3).toString();break;case 'exp':displayValue = Math.exp(value).toString();break;case 'ln':displayValue = Math.log(value).toString();break;case 'fact':displayValue = factorial(value).toString();break;case 'reciprocal':displayValue = (1 / value).toString();break;case 'pi':displayValue = Math.PI.toString();break;}} catch (error) {displayValue = 'Error';}updateDisplay();
}function factorial(n) {if (n === 0 || n === 1) return 1;return n * factorial(n - 1);
}

CSS:

body {font-family: Arial, sans-serif;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;margin: 0;background-color: #f4f4f9;
}.calculator {width: 350px;background-color: #333;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}.display-wrapper {background-color: #444;padding: 20px;border-radius: 10px 10px 0 0;overflow-x: auto;overflow-y: hidden;
}.display {color: white;font-size: 36px;text-align: right;white-space: nowrap;min-width: 100%;
}.buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1px;
}button {font-size: 18px;padding: 20px;background-color: #555;border: none;color: white;cursor: pointer;
}button:hover {background-color: #666;
}.zero {grid-column: span 1;
}.scientific {grid-template-columns: repeat(4, 1fr);margin-top: 5px;
}.guide {margin-top: 20px;max-width: 350px;color: #666;font-size: 14px;
}

 线上运行,可以直接打开:科学计算器

相关文章:

就是这个样的粗爆,手搓一个计算器:科学计算器

作为程序员&#xff0c;没有合适的工具&#xff0c;就得手搓一个&#xff0c;PC端&#xff0c;移动端均可适用。废话不多说&#xff0c;直接上代码。 HTML: <div class"calculator"><div class"display-wrapper"><div class"display…...

wordpress使用popup弹窗插件的对比

您在寻找最好的 WordPress 弹出插件吗&#xff1f;大多数网站利用某种形状或形式的弹出窗口来将访问者指向他们希望他们去的地方。例如&#xff0c;这可能用于结帐、电子邮件订阅或用于生成潜在客户。 表现 弹出插件会减慢您的网站速度。当插件使用 WordPress 跟踪弹出窗口的…...

开源OpenStack

1.查询HCS基于OpenStack哪个版本开发 2.九大核心组件 OpenStack可以对接FC也可以对接KVM主机&#xff1b;&#xff08;OpenStack 对接华为FusionCompute&#xff0c;一个集群对应 openstack 一台计算主机&#xff09;-引申出nova compute 2.1nova nova两个核心组件nova contro…...

基于Spring Boot+vue技术的导游系统设计与实现

论文下载【免费】基于SpringBootvue技术的导游系统设计与实现资源-CSDN文库 摘 要 本研究背景主要聚焦于当前旅游业信息化、智能化的发展趋势。随着移动互联网的普及和人们出行方式的多样化&#xff0c;导游系统作为旅游服务的重要组成部分&#xff0c;亟需进行技术革新以提…...

软件测试 —— 灰度测试及测试流程!

软件测试中的灰度测试是一种结合了黑盒测试和白盒测试特点的测试方法&#xff0c;旨在通过逐步扩大测试范围来评估新系统或新功能在真实环境中的性能和稳定性。灰度测试是软件开发过程中的一个重要环节&#xff0c;它有助于在全面发布前发现并修复潜在问题&#xff0c;同时收集…...

中科星图GVE(案例)——AI实现光伏面板提取

目录 简介 函数 gve.Services.AI.solarExtraction(image) 代码 结果 知识星球 机器学习 简介 光伏面板提取是一种将光伏面板从图像或视频中准确地分割出来的任务&#xff0c;可以通过使用深度学习算法来实现。 以下是一种基于深度学习的光伏面板提取的实现步骤&#x…...

一种压缩QRCode矩阵以用于存储的方法

通常QRCode由服务器生成&#xff0c;以图片格式发送到客户端&#xff0c;由客户端直接展示&#xff0c;也可以由客户端使用javascript或其他内置的SDK直接生成。 0、需求 QRCode生成过程中往往是先生成矩阵&#xff0c;然后使用矩阵生成图片&#xff0c;矩阵就是由01组成的一…...

鸿蒙HarmonyOS开发:系统服务

拨打电话 call.makeCall 跳转到拨号界面&#xff0c;并显示待拨出的号码。使用callback异步回调。 makeCall(phoneNumber: string, callback: AsyncCallback<void>): voidimport { call } from kit.TelephonyKit;import { BusinessError } from kit.BasicServicesKit;c…...

【Go】GO语言知识总结浅析

Go语言是一种现代化的编程语言&#xff0c;由Google于2007年设计并于2009年发布。它旨在使编程变得简单、高效&#xff0c;并且可以在多核处理器上轻松构建高性能应用。Go语言的编程思想、发展历史、版本特点、运行原理、数据类型、应用场景&#xff0c;以及在web开发、网络编程…...

GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测(Maltab)

GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测&#xff08;Maltab&#xff09; 目录 GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测&#xff08;Maltab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现灰狼算法OOA-Transf…...

上市公司企业供应链抵抗力数据集(2012-2023年)

一、测算方式&#xff1a;参考《财经研究》张树山&#xff08;2024&#xff09;老师的做法&#xff0c;供应链抵抗力&#xff08;Resis&#xff09;体现了供应链运行状态的稳定性&#xff0c;即在应对外部扰动时&#xff0c;供应链仍能维持循环畅通。本文从稳固供应链关系来筛选…...

javaWeb项目-ssm+jsp-XX牙科诊所管理系统功能介绍

本项目源码&#xff08;点击下方链接下载&#xff09;&#xff1a;java-ssmjsp私人牙科诊所管理系统实现源码(项目源码-说明文档)资源-CSDN文库 项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&…...

tcp_rmem中有三个值4896 131072 6291456是什么意思,有什么作用?

在 TCP 中&#xff0c;tcp_rmem参数的三个值分别具有以下含义和作用&#xff1a; 一、含义 “4896”&#xff1a; 通常代表 TCP 接收缓冲区的最小大小。这是接收端为接收数据预先分配的最小内存空间。当网络中数据量较小时&#xff0c;这个最小缓冲区可以确保有足够的空间来存储…...

转行AI产品经理:高薪诱惑,年薪90万不是梦!

近期有很多社招的小伙伴都在看转行的机会&#xff0c;同时马上要到了秋招的季节&#xff0c;校招生们都在积极选择第一份工作。所有人想要进入一个有前景、高薪高潜力的黄金赛道。 2024年如果大家看新机会&#xff0c;重点给大家推荐AI领域的岗位。先看一组数据&#xff1a; …...

javaWeb项目-ssm+jsp股票交易管理系统功能介绍

本项目源码&#xff08;点击下方链接下载&#xff09;&#xff1a;java-ssmjsp股票交易管理系统实现源码(项目源码-说明文档)资源-CSDN文库 项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff…...

CentOS上安装SSL证书教程

在 CentOS 上&#xff0c;apt-get 是不可用的&#xff0c;因为 CentOS 使用的是 yum 或 dnf 包管理器。你可以通过 yum 或 dnf 安装 certbot 和 python3-certbot-nginx。以下是详细的步骤&#xff1a; 1. 启用 EPEL&#xff08;Extra Packages for Enterprise Linux&#xff0…...

单目相机和双目相机定位

1、单目相机 1.1模型 单目相机成像模型为小孔成像&#xff0c;涉及的坐标系包括世界坐标系、相机坐标系、图像坐标系以及像素坐标系。坐标系之间的转换关系如下&#xff1a; 1.2参数求解 张正友相机标定方法、设定世界坐标系精确求解 2、双目相机 2.1、模型 一般双目立体视…...

【Cadence27】HDL拷贝工程➕Allegro导出DXF和3D文件STP

【转载】Cadence Design Entry HDL 使用教程 【Cadence01】Cadence PCB Edit相对延迟与绝对延迟的显示问题 【Cadence02】Allegro引脚焊盘Pin设置为透明 【Cadence03】cadence不小心删掉钢网层怎么办&#xff1f; 【Cadence04】一般情况下Allegro PCB设计时的约束规则设置&a…...

拓扑学与集合论的关系

目录 1. 关于拓扑学的概念 2. 集合论和拓扑学的关系 3. 拓扑空间 1. 关于拓扑学的概念 汉译的“拓扑学”对应的英文是“topology”&#xff0c;更贴近其本义的翻译有“地志学”、“位相学”、等等&#xff0c;其原本词义是表示“研究位置分布的学科”。“topo-”表示…...

设计模式——代理模式(6)

一、写在前面 结构型模式描述如何将类或对象按某种布局组成更大的结构。它分为类结构型模式和对象结构型模式&#xff0c;前者采用继承机制来组织接口和类&#xff0c;后者釆用组合或聚合来组合对象。由于组合关系或聚合关系比继承关系耦合度低&#xff0c;满足“合成复用原则…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...