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

作为程序员,没有合适的工具,就得手搓一个,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;
}
线上运行,可以直接打开:科学计算器
相关文章:
就是这个样的粗爆,手搓一个计算器:科学计算器
作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。 HTML: <div class"calculator"><div class"display-wrapper"><div class"display…...
wordpress使用popup弹窗插件的对比
您在寻找最好的 WordPress 弹出插件吗?大多数网站利用某种形状或形式的弹出窗口来将访问者指向他们希望他们去的地方。例如,这可能用于结帐、电子邮件订阅或用于生成潜在客户。 表现 弹出插件会减慢您的网站速度。当插件使用 WordPress 跟踪弹出窗口的…...
开源OpenStack
1.查询HCS基于OpenStack哪个版本开发 2.九大核心组件 OpenStack可以对接FC也可以对接KVM主机;(OpenStack 对接华为FusionCompute,一个集群对应 openstack 一台计算主机)-引申出nova compute 2.1nova nova两个核心组件nova contro…...
基于Spring Boot+vue技术的导游系统设计与实现
论文下载【免费】基于SpringBootvue技术的导游系统设计与实现资源-CSDN文库 摘 要 本研究背景主要聚焦于当前旅游业信息化、智能化的发展趋势。随着移动互联网的普及和人们出行方式的多样化,导游系统作为旅游服务的重要组成部分,亟需进行技术革新以提…...
软件测试 —— 灰度测试及测试流程!
软件测试中的灰度测试是一种结合了黑盒测试和白盒测试特点的测试方法,旨在通过逐步扩大测试范围来评估新系统或新功能在真实环境中的性能和稳定性。灰度测试是软件开发过程中的一个重要环节,它有助于在全面发布前发现并修复潜在问题,同时收集…...
中科星图GVE(案例)——AI实现光伏面板提取
目录 简介 函数 gve.Services.AI.solarExtraction(image) 代码 结果 知识星球 机器学习 简介 光伏面板提取是一种将光伏面板从图像或视频中准确地分割出来的任务,可以通过使用深度学习算法来实现。 以下是一种基于深度学习的光伏面板提取的实现步骤&#x…...
一种压缩QRCode矩阵以用于存储的方法
通常QRCode由服务器生成,以图片格式发送到客户端,由客户端直接展示,也可以由客户端使用javascript或其他内置的SDK直接生成。 0、需求 QRCode生成过程中往往是先生成矩阵,然后使用矩阵生成图片,矩阵就是由01组成的一…...
鸿蒙HarmonyOS开发:系统服务
拨打电话 call.makeCall 跳转到拨号界面,并显示待拨出的号码。使用callback异步回调。 makeCall(phoneNumber: string, callback: AsyncCallback<void>): voidimport { call } from kit.TelephonyKit;import { BusinessError } from kit.BasicServicesKit;c…...
【Go】GO语言知识总结浅析
Go语言是一种现代化的编程语言,由Google于2007年设计并于2009年发布。它旨在使编程变得简单、高效,并且可以在多核处理器上轻松构建高性能应用。Go语言的编程思想、发展历史、版本特点、运行原理、数据类型、应用场景,以及在web开发、网络编程…...
GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测(Maltab)
GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测(Maltab) 目录 GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测(Maltab)效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现灰狼算法OOA-Transf…...
上市公司企业供应链抵抗力数据集(2012-2023年)
一、测算方式:参考《财经研究》张树山(2024)老师的做法,供应链抵抗力(Resis)体现了供应链运行状态的稳定性,即在应对外部扰动时,供应链仍能维持循环畅通。本文从稳固供应链关系来筛选…...
javaWeb项目-ssm+jsp-XX牙科诊所管理系统功能介绍
本项目源码(点击下方链接下载):java-ssmjsp私人牙科诊所管理系统实现源码(项目源码-说明文档)资源-CSDN文库 项目关键技术 开发工具:IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架:ssm、Springboot 前端&…...
tcp_rmem中有三个值4896 131072 6291456是什么意思,有什么作用?
在 TCP 中,tcp_rmem参数的三个值分别具有以下含义和作用: 一、含义 “4896”: 通常代表 TCP 接收缓冲区的最小大小。这是接收端为接收数据预先分配的最小内存空间。当网络中数据量较小时,这个最小缓冲区可以确保有足够的空间来存储…...
转行AI产品经理:高薪诱惑,年薪90万不是梦!
近期有很多社招的小伙伴都在看转行的机会,同时马上要到了秋招的季节,校招生们都在积极选择第一份工作。所有人想要进入一个有前景、高薪高潜力的黄金赛道。 2024年如果大家看新机会,重点给大家推荐AI领域的岗位。先看一组数据: …...
javaWeb项目-ssm+jsp股票交易管理系统功能介绍
本项目源码(点击下方链接下载):java-ssmjsp股票交易管理系统实现源码(项目源码-说明文档)资源-CSDN文库 项目关键技术 开发工具:IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架:ssm、Springboot 前端ÿ…...
CentOS上安装SSL证书教程
在 CentOS 上,apt-get 是不可用的,因为 CentOS 使用的是 yum 或 dnf 包管理器。你可以通过 yum 或 dnf 安装 certbot 和 python3-certbot-nginx。以下是详细的步骤: 1. 启用 EPEL(Extra Packages for Enterprise Linux࿰…...
单目相机和双目相机定位
1、单目相机 1.1模型 单目相机成像模型为小孔成像,涉及的坐标系包括世界坐标系、相机坐标系、图像坐标系以及像素坐标系。坐标系之间的转换关系如下: 1.2参数求解 张正友相机标定方法、设定世界坐标系精确求解 2、双目相机 2.1、模型 一般双目立体视…...
【Cadence27】HDL拷贝工程➕Allegro导出DXF和3D文件STP
【转载】Cadence Design Entry HDL 使用教程 【Cadence01】Cadence PCB Edit相对延迟与绝对延迟的显示问题 【Cadence02】Allegro引脚焊盘Pin设置为透明 【Cadence03】cadence不小心删掉钢网层怎么办? 【Cadence04】一般情况下Allegro PCB设计时的约束规则设置&a…...
拓扑学与集合论的关系
目录 1. 关于拓扑学的概念 2. 集合论和拓扑学的关系 3. 拓扑空间 1. 关于拓扑学的概念 汉译的“拓扑学”对应的英文是“topology”,更贴近其本义的翻译有“地志学”、“位相学”、等等,其原本词义是表示“研究位置分布的学科”。“topo-”表示…...
设计模式——代理模式(6)
一、写在前面 结构型模式描述如何将类或对象按某种布局组成更大的结构。它分为类结构型模式和对象结构型模式,前者采用继承机制来组织接口和类,后者釆用组合或聚合来组合对象。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...
【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL
ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...
全面解析数据库:从基础概念到前沿应用
在数字化时代,数据已成为企业和社会发展的核心资产,而数据库作为存储、管理和处理数据的关键工具,在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理,到社交网络的用户数据存储,再到金融行业的交易记录处理&a…...
