分享一个计算器

先看效果:
在这里插入图片描述
再看代码(查看更多):

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算器</title><style>* {box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;font-size: 10px;background: #232323;}@media (max-width: 576px) {body {height: 100h;}}.calc {width: 50em;aspect-ratio: 1/1.5;margin: 2em;background: #232323;background: #CED4CA;background: #EBECE9;padding: 4em;border-radius: 1em;display: flex;flex-direction: column;gap: 2em;box-shadow: rgba(0, 0, 0, 0.15) 0.3em 0.3em 0.8em 0px inset, rgba(0, 0, 0, 0.15) -0.3em 0em 0.8em 0em inset, rgba(0, 0, 0, 0.25) 0.3em 0.3em 0.8em 0px;}@media (max-width: 576px) {.calc {padding: 2.5em;}}.calc .result {height: 12em;background: pink;width: 100%;background: linear-gradient(-30deg, rgba(34, 33, 38, 0.1), rgba(34, 33, 38, 0), rgba(34, 33, 38, 0.1)) 100% 0%/100% 100%, #DBE7E5;box-shadow: rgba(0, 0, 0, 0.2) 0.3em 0.3em 0.6em 0px inset, rgba(0, 0, 0, 0.25) -3px -3px 0.6em 0.1em inset, rgba(0, 0, 0, 0.25) 0px 0em 1.2em 0px inset, rgba(0, 0, 0, 0.25) 0px 0.3em 0.2em 0px inset, rgba(255, 255, 255, 0.85) 0px 0.3em 0.2em 0px;background-repeat: no-repeat;padding: 2em;}@media (max-width: 576px) {.calc .result {height: 10em;}}.calc .result .result__inner {text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.25);display: flex;justify-content: flex-end;align-items: flex-end;color: #2A3027;height: 100%;font-family: "PT Mono", monospace;display: flex;flex-direction: column;justify-content: space-evenly;}.calc .result .result__inner .prev-operand {font-size: 2em;}.calc .result .result__inner .current-operand {font-size: 4em;font-size: clamp(1.25rem, 0.5368rem + 3.17vw, 2.5rem );font-size: clamp(1.375rem, 0.7338rem + 2.85vw, 2.5rem );font-size: clamp(1.5625rem, 1.027rem + 2.38vw, 2.5rem );}.calc .keys {width: 100%;flex-grow: 2;}.calc .keys__inner {height: 100%;gap: 1.5em;}.calc .key {color: rgba(0, 0, 0, 0.7);border: unset;box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.15) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.55) 0em 0em 0.5em 10px inset;font-family: "Rubik", sans-serif;font-size: 4em;font-size: clamp(1rem, 0.3228rem + 3.01vw, 2.1875rem );background: #fff;background: #EBECE9;background-repeat: no-repeat;display: flex;justify-content: center;align-items: center;border-radius: 0.1em;transition: all 0.25s ease;}.calc .key__row {height: 100%;display: grid;width: 100%;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(5, 1fr);gap: 1.5em;}@media (max-width: 576px) {.calc .key__row {gap: 0.8em;}}@media (max-width: 576px) {.calc .key {box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.15) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.25) 0em 0em 0.5em 10px inset;}}.calc .key:hover {box-shadow: rgba(0, 0, 0, 0.05) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.05) 0.01em 0.01em 0.1em 0px, rgba(255, 255, 255, 0.55) 0em 0em 0.5em 10px inset;}.calc .key[data-number] {font-size: clamp(1.5625rem, 1.027rem + 2.38vw, 2.5rem );}.calc .key:nth-of-type(1) {background-color: #C34F61;box-shadow: unset;box-shadow: rgba(0, 0, 0, 0.45) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.25) 0.01em 0.01em 0.1em 0px, rgba(225, 167, 176, 0.25) 0em 0em 0.5em 10px inset, rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px inset;color: #fff;}.calc .key:nth-of-type(1):hover {box-shadow: rgba(0, 0, 0, 0.15) 0.03em 0.03em 0.1em 0px, rgba(0, 0, 0, 0.05) 0.01em 0.01em 0.1em 0px, rgba(225, 167, 176, 0.25) 0em 0em 0.5em 10px inset;}.calc .key:nth-of-type(16) {grid-row: 4/6;grid-column: 4/4;}</style>
</head>
<body>
<div class="calc"><div class="result"><div class="result__inner"><div data-prev-operand class="prev-operand"></div><div data-current-operand class="current-operand"></div></div></div><div class="keys"><div class="keys__inner"><div class="key__row"><button data-clear class="key">AC</button><button data-operator="**" class="key">x<sup>2</sup></button><button data-operator="/" class="key">&#247;</button><button data-operator="*" class="key">X</button><button data-number class="key">7</button><button data-number class="key">8</button><button data-number class="key">9</button><button data-operator="-" class="key">-</button><button data-number class="key">4</button><button data-number class="key">5</button><button data-number class="key">6</button><button data-operator="+" class="key">+</button><button data-number class="key">1</button><button data-number class="key">2</button><button data-number class="key">3</button><button data-equals class="key">=</button><button data-number class="key">0</button><button data-number class="key">.</button><button data-delete class="key">DEL</button></div></div></div>
</div>
</body>
<script>class Calculator{constructor(prevOperandText, currentOperandText){this.prevOperandText = prevOperandText;this.currentOperandText = currentOperandText;this.clear();}clear(){this.prevOperand = ''this.currentOperand = ''this.operation = undefined;}delete(){this.currentOperand = this.currentOperand.toString().slice(0,-1);}appendNumber(num){if(num === '.' && this.currentOperand.includes('.')) return;this.currentOperand = this.currentOperand.toString() + num.toString();}selectOperation(operation){if(this.currentOperand === '') returnif(this.prevOperand !== ''){this.calculate();}this.operation = operationthis.prevOperand = this.currentOperand;this.currentOperand = ''}calculate(){let calculation ;const prev = parseFloat(this.prevOperand)const current = parseFloat(this.currentOperand)if(isNaN(prev) || isNaN(current)) return;switch(this.operation){case '+':calculation = prev + current;break;case '-':calculation = prev - current;break;case '*':calculation = prev * current;break;case '÷':calculation = prev / current;break;case '/':calculation = prev / current;break;case '**':calculation = prev ** current;break;case '^':calculation = prev ** current;break;default:return;}if(calculation.toString().length > 12 && calculation.toString().includes('.')){this.currentOperand = calculation.toFixed(5);} else {this.currentOperand = calculation;}this.operation = undefined;this.prevOperand = '';}updateDisplayNumber(num){//从字符串转换为数字const stringNum = num.toString();const integerDigits = parseFloat(stringNum.split('.')[0]);const decimalDigits = stringNum.split('.')[1];let integerDisplay;if(isNaN(integerDigits)){integerDisplay = '';}else{integerDisplay = integerDigits.toLocaleString('en', {maximumFractionDigits: 0});}if(decimalDigits != null){return `${integerDisplay}.${decimalDigits}`;} else{return integerDisplay;}}updateDisplay(){this.currentOperandText.innerText = this.updateDisplayNumber(this.currentOperand);let operation;if(this.operation === "**"){operation = "^";} else {operation = this.operation;}if(this.operation != null){this.prevOperandText.innerText =`${this.updateDisplayNumber(this.prevOperand)} ${operation}`;} else {this.prevOperandText.innerText = '';}}}const operatorKeys = document.querySelectorAll('.key[data-operator]');const numberKeys = document.querySelectorAll('.key[data-number]');const equalButton = document.querySelector('.key[data-equals]')const prevOperandText = document.querySelector('[data-prev-operand]')const currentOperandText = document.querySelector('[data-current-operand]')const clear = document.querySelector('.key[data-clear')const deleteKey = document.querySelector('.key[data-delete')const calculator = new Calculator(prevOperandText,currentOperandText);clear.addEventListener('click', ()=>{calculator.clear();calculator.updateDisplay();})deleteKey.addEventListener('click', ()=>{calculator.delete();calculator.updateDisplay();})numberKeys.forEach(key => {key.addEventListener('click', ()=>{calculator.appendNumber(key.innerText)calculator.updateDisplay()})})operatorKeys.forEach(key => {key.addEventListener('click', ()=>{calculator.selectOperation(key.dataset.operator)calculator.updateDisplay()})})equalButton.addEventListener('click', ()=>{calculator.calculate();calculator.updateDisplay();})document.addEventListener("keydown", (e) => {let numKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."];let operatorKeys = ["+", "-", "*", "/", "^"];if(numKeys.includes(e.key)){calculator.appendNumber(e.key)calculator.updateDisplay()}if(e.key == "Enter"){calculator.calculate();calculator.updateDisplay();}if(e.key == "Backspace" || e.key == "Delete")  {calculator.delete();calculator.updateDisplay();}if(e.key == "Escape"){calculator.clear();calculator.updateDisplay();}if(operatorKeys.includes(e.key)){calculator.selectOperation(e.key)calculator.updateDisplay()}});
</script>
</html>

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

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

相关文章

k8s学习day03

第五章 Pod详解 本章节将详细介绍Pod资源的各种配置&#xff08;yaml&#xff09;和原理。 Pod介绍 Pod结构 每个Pod中都可以包含一个或者多个容器&#xff0c;这些容器可以分为两类&#xff1a; 用户程序所在的容器&#xff0c;数量可多可少 Pause容器&#xff0c;这是每个…

ChatGPT 作为 Python 编程助手

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 简单的数据处理脚本 我认为一个好的起点是某种数据处理脚本。由于我打算让 ChatGPT 之后使用各种 Python 库编写一些机器学习脚本&#xff0c;这似乎是一个合理的起点。 目标 首先&#xff0c;我想尝试…

常用开源的弱口令检查审计工具

常用开源的弱口令检查审计工具 1、SNETCracker 1.1、超级弱口令检查工具 SNETCracker超级弱口令检查工具是一款开源的Windows平台的弱口令安全审计工具&#xff0c;支持批量多线程检查&#xff0c;可快速发现弱密码、弱口令账号&#xff0c;密码支持和用户名结合进行检查&am…

第九次作业

1. SSL工作过程是什么&#xff1f; 当客户端向一个 https 网站发起请求时&#xff0c;服务器会将 SSL 证书发送给客户端进行校验&#xff0c;SSL 证书中包含一个公钥。校验成功后&#xff0c;客户端会生成一个随机串&#xff0c;并使用受访网站的 SSL 证书公钥进行加密&#xf…

Effective Java笔记(28)列表优于数组

数组与泛型相比&#xff0c;有两个重要的不同点 。 首先&#xff0c;数组是协变的&#xff08; covariant &#xff09; 。 这个词听起来有点吓人&#xff0c;其实只是表示如果 Sub 为 Super 的子类型&#xff0c;那么数组类型 Sub[ ]就是Super[ ]的子类型。 相反&#xff0c;泛…

linux 安装go 1.18版本

首先去官网找到对应的版本 直接下载下来&#xff08;如果服务器可以直接访问到go 官网也可以wget直接下载到服务器&#xff09; 然后把该包上传到linux 的/usr/local 目录下 然后直接解压安装该包&#xff1a; sudo tar -C /usr/local -zxvf go1.18.10.linux-amd64.tar.gz 然…

Vscode-工具使用

Vscode &#xff0c;这玩意儿是开源的&#xff0c;以前用收费的破解版&#xff0c;过段时间就高版本不匹配&#xff0c;这次搞个不要钱的玩玩&#xff0c;记录使用心得 下载 下载地址&#xff1a;官网 点击下载&#xff0c;但是这里有个问题下载比较慢&#xff0c;解决办法&a…

Dockerfile部署golang,docker-compose

使用go镜像打包&#xff0c;运行在容器内 redis和mysql用外部的 项目目录结构 w1go项目&#xff1a; Dockerfile # 这种方式是docker项目加上 本地的mysql和redis环境 # go打包的容器 FROM golang:alpine AS builder# 为我们镜像设置一些必要的环境变量 ENV GO111MODULEon …

Vue3 第五节 一些组合式API和其他改变

1.provide和inject 2.响应式数据判断 3.Composition API的优势 4.新的组件 5.其他改变 一.provide和inject 作用&#xff1a;实现祖与后代组件间通信 套路&#xff1a;父组件有一个provide选项来提供数据&#xff0c;后代组件有一个inject选项来开始使用这些数据 &…

uniapp 微信小程序 上下滚动的公告通知(只取前3条)

效果图&#xff1a; <template><view class"notice" click"policyInformation"><view class"notice-icon"><image mode"aspectFit" class"img" src"/static/img/megaphone.png"></i…

具有吸引子的非线性系统(MatlabSimulink实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

BIO,NIO,AIO总结

文章目录 1. BIO (Blocking I/O)1.1 传统 BIO1.2 伪异步 IO1.3 代码示例 1.4 总结2. NIO (New I/O)2.1 NIO 简介2.2 NIO的特性/NIO与IO区别1)Non-blocking IO&#xff08;非阻塞IO&#xff09;2)Buffer(缓冲区)3)Channel (通道)4)Selector (选择器) 2.3 NIO 读数据和写数据方式…

刚刚更新win11,记事本消失怎么处理?你需要注意些什么?

记录window11的bug hello&#xff0c;我是小索奇 昨天索奇从window10更新到了window11&#xff0c;由于版本不兼容卸载了虚拟机&#xff0c;这是第一个令脑壳大的&#xff0c;算了&#xff0c;还是更新吧&#xff0c;了解了解win11的生态&#xff0c;后期重新装虚拟机 第一个可…

TCP三次握手四次断开

一、了解TCP &#x1f345;TCP &#xff1a;传输控制协议&#xff0c;是一种面向连接的可靠的传输协议。 什么是可靠的传输协议&#xff1f;如何保障可靠传输&#xff1f; 保证可靠性&#xff1a; 1.确认机制 2.重传输机制什么是面向连接&#xff1f;如何保障面…

教雅川学缠论07-中枢实战众泰汽车000980

本文实战众泰汽车 下面是2023年11月14-2023年8月8众泰汽车日K图 先画日K 接下来处理包含&#xff0c;就变成下面这个样子 下面在套上缠论的理论&#xff0c;未来股价的走势应该是红色椭圆形虚线里面的样子 好了&#xff0c;文章就到这里&#xff0c;如果众泰最终不是这个走势…

人工智能与物理学(软体机器人能量角度)的结合思考

前言 好久没有更新我的CSDN博客了&#xff0c;细细数下来已经有了16个月。在本科时期我主要研究嵌入式&#xff0c;研究生阶段对人工智能感兴趣&#xff0c;看了一些这方面的论文和视频&#xff0c;因此用博客记录了一下&#xff0c;后来因为要搞自己的研究方向&#xff0c;就…

Maven入职学习

一、什么是Maven&#xff1f; 概念&#xff1a; Maven是一种框架。它可以用作依赖管理工具、构建工具。 它可以管理jar包的规模、jar包的来源、jar包之间的依赖关系。 它的用途就是管理规模庞大的jar包&#xff0c;脱离IDE环境执行构建操作。 具体使用&#xff1a; 工作机…

【MATLAB第67期】# 源码分享 | 基于MATLAB的morris全局敏感性分析

【MATLAB第67期】# 源码分享 | 基于MATLAB的morris全局敏感性分析 一、代码展示 clear all npoint100;%在分位数超空间中要采样的点数(计算次数iternpoint*(nfac1) nfac20;%研究函数的不确定因素数量 [mu, order] morris_sa1((x)test_function(x), nfac, npoint)for t1:size…

IELTS图表类作文基础知识

表格可以用table或chart来表示。 其实&#xff0c;数据类图表除了可以用chart表示&#xff0c;也可以用其他单词。 表格又可以称为table。而带有几何图形的图表可以用graph来表示。 像饼状图、折线图、柱状图这样用几何图形&#xff0c;或者直接用表格来呈现数据的形式&#x…

【Linux升级之路】5_基础IO

&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f; &#x1f36d;&#x1f36d;系列专栏&#xff1a;【Linux升级之路】 ✒️✒️本篇内容&#xff1a;文件操作&#xff0c;文件管理&#xff0c;重定向&#xff0c;简易shell添加重定向功能&#xff0c;文件属…