HTML+CSS+JS简易计算器
HTML+CSS+JS简易计算器
index.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="index.css"><script src="index.js" defer></script>
</head><body><div class="toggle"></div><div class="calculator"><div class="button"><h2 id="result"></h2><span id="clear">Clear</span><span>/</span><span>*</span><span>7</span><span>8</span><span>9</span><span>-</span><span>4</span><span>5</span><span>6</span><span id="plus">+</span><span>1</span><span>2</span><span>3</span><span>0</span><span>00</span><span>.</span><span id="equal">=</span></div></div></body></html>
index.css
* {margin: 0;padding: 0;box-sizing: border-box;font-family: consolas;
}body {display: flex;justify-content: center;align-items: center;background-color: #edf1f4;
}.calculator {position: relative;margin-top: 50px ;width: 340px;padding: 20px;border-radius: 20px;box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fffb;
}.calculator .button {position: relative;display: grid;
}.calculator .button #result {padding: 0 20px;position: relative;left: 8px;grid-column: span 4;height: 100px;line-height: 100px;border-radius: 10px;text-align: end;font-size: 2em;color: rgb(11, 155, 107);overflow: hidden;font-weight: 500;width: calc(100% - 16px);user-select: none;box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1),inset -5px -5px 20px #fff;
}.calculator .button span {position: relative;display: flex;justify-content: center;align-items: center;padding: 10px;border-radius: 10px;margin: 10px;min-width: 40px;font-size: 1.2em;border: 2px solid #e2ecf3;box-shadow: 5px 5px 10px #a7cbe5, -5px -5px 10px #e9ecef;cursor: pointer;user-select: none;
}.calculator .button span:active {color: #739fea;box-shadow: inset 5px 5px 10px #a7cbe5, inset -5px -5px 10px #e9ecef;
}.calculator .button span#clear {grid-column: span 2;background-color: #f44336;border: 2px solid #cfe4f4;color: #fff;
}.calculator .button span#plus {grid-row: span 2;background-color: #31a935;border: 2px solid #cfe4f4;color: #fff;
}.calculator .button span#equal {background: #2196f3;border: 2px solid #cfe4f4;color: #fff;
}.calculator .buttons span#clear:active,
.calculator .buttons span#plus:active,
.calculator .buttons span#equal:active {box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),-5px -5px 10px #fff,inset 5px 5px 10px rgba(0, 0, 0, 0.1);
}.toggle {position: fixed;top: 20px;right: 20px;background-color: #4b494c;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;border: 2px solid #edf1f4;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),-5px -5px 10px #fff;
}.dark .toggle {background: #edf1f4;border: 2px solid #333;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),-5px -5px 10px rgba(255, 255, 255, 0.25);
}
.dark
{background: #282c2f;
}
.dark .calculator
{background: #33393e;box-shadow: 15px 15px 20px rgba(0,0,0,0.25),-15px -15px 20px rgba(255,255,255,0.1);
}
.dark .calculator #value
{color: #eee;box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5),inset -5px -5px 20px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span
{color: #eee;border: 2px solid #333;box-shadow: 5px 5px 10px rgba(0,0,0,0.25),-5px -5px 10px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span:active
{box-shadow: inset 5px 5px 10px rgba(0,0,0,0.25),inset -5px -5px 10px rgba(255,255,255,0.1);
}
.dark .calculator .buttons span#clear,
.dark .calculator .buttons span#plus,
.dark .calculator .buttons span#equal
{border: 2px solid #333;;
}
.dark .calculator .buttons span#clear:active,
.dark .calculator .buttons span#plus:active,
.dark .calculator .buttons span#equal:active
{box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1);
} idnex.js
const button = document.querySelector('.button');
const btn = button.querySelectorAll('span');
const result = document.getElementById('result');
const toggle = document.querySelector('.toggle');
const body = document.querySelector('body');for (let i = 0; i < btn.length; i++) {btn[i].addEventListener("click", function () {if (this.innerHTML == "=") {result.innerHTML = eval(result.innerHTML);} else {if (this.innerHTML == 'Clear') {result.innerHTML = " ";}else{result.innerHTML += this.innerHTML}}})
}
toggle.onclick = function(){body.classList.toggle('dark')
}运行结果
相关文章：
HTML+CSS+JS简易计算器
HTMLCSSJS简易计算器 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>简易计算器</t…...
STM32使用ST-LINK下载程序中需要注意的几点
使用keil5的ST-link下载界面 前提是ST-LINK已经连接好，（下图中是没有连接ST-link设备），只是为了展示如何查看STlink设备是否连接的方式 下载前一定设置下载完成后自启动 这个虽然不是必须，但对立即看到新程序的现象…...
我和jetson-Nano的故事（12）——安装pytorch 以及 torchvision
在jetson nano中安装Anaconda、pytorch 以及 torchvision 1.Pytorch下载安装2.Torchvision安装 1.Pytorch下载安装 首先登录英伟达官网下载Pytorch安装包，这里以PyTorch v1.10.0为例 安装依赖库 sudo apt-get install libjpeg-dev zlib1g-dev libpython3-dev liba…...
「异步魔法：Python数据库交互的革命」(一)
Hi，我是阿佑，今天将和大家一块打开异步魔法的大门，进入Python异步编程的神秘领域，学习如何同时施展多个咒语而不需等待。了解asyncio的魔力，掌握Async SQLAlchemy和Tortoise-ORM的秘密，让你的数据库操作快如…...
探秘GPT-4o：从版本对比到技术能力的全面评价
随着人工智能技术的不断发展，自然语言处理领域的突破性技术——GPT（Generative Pre-trained Transformer）系列模型也在不断演进。最新一代的GPT-4o横空出世，引起了广泛的关注和讨论。在本文中，我们将对GPT-4o进行全面评…...
四川汇烁面试总结
自我介绍项目介绍、 目录 1.jdk和jre的区别？ 2.一段代码的执行流程？ 3.接口与抽象类的区别？ 4.ArrayList与LinkList的区别？ 5.对HashMap的理解? 6.常见的异常？ 7.throw 和 throws 有什么区别？ 8.…...
【小程序 按钮 表单 】
按钮 代码演示 xxx.wxml <view class"boss" hover-class"box"hover-start-time"2000"hover-stay-time"5000">测试文本<view hover-stop-propagation"true">子集</view><view>子集2</view>…...
高铁Wifi是如何接入的？
使用PC端的朋友，请将页面缩小到最小比例，阅读最佳！ 在飞驰的高铁上，除了窗外一闪而过的风景，你是否好奇过，高铁Wifi信号如何连接的呢？ 远动的火车可不能连接光纤吧，难道是连接的卫星…...
gitlab之docker-compose汉化离线安装
目录 概述离线资源docker-compose结束 概述 gitlab可以去 hub 上拉取最新版本，在此我选择汉化 gitlab ，版本 11.x 离线资源 想自制离线安装镜像，请稳步参考 docker镜像的导入导出 ，无兴趣的直接使用在此提供离线资源 百度网盘(链…...
【算法】dd爱转转
✨题目链接： dd爱旋转 ✨题目描述 读入一个n∗n的矩阵，对于一个矩阵有以下两种操作 1:顺时针旋180 2:关于行镜像 如 变成 给出q个操作，输出操作完的矩阵 ✨输入描述: 第一行一个数n(1≤n≤1000)，表示矩阵大小 接下来n行ÿ…...
Python3 笔记：IDLE的几个基本设置
1、设置字体： Options > Configure IDLE > Fonts 2、设置文字颜色（设置高亮）： Options > Configure IDLE > Highlights 3、设置背景颜色： Options > Configure IDLE > Highlights 4、设置窗口&a…...
Mysql:存储过程练习
create table stu( id int(3) primary key auto_increment, name varchar(20) not null, grade float, gender char(2)); insert into stu(name,grade,gender) values(tom,60,男),(jack,70,男),(rose,90,女),(lucy,100,…...
详解Java ThreadLocal
个人博客 详解Java ThreadLocal | iwts’s blog Java ThreadLocal ThreadLocal提供了线程内存储变量的能力，这些变量不同之处在于每一个线程读取的变量是对应的互相独立的。通过get和set方法就可以得到当前线程对应的值。 TreadLocal存储模型 ThreadLocal的静态…...
Unable to parse response body for Response{requestLine=PUT
1 异常信息： Caused by: java.lang.RuntimeException: Unable to parse response body for Response{requestLinePUT /an_path_statistic_log/_doc/11?timeout1m HTTP/1.1, hosthttp://192.168.3.60:9200, responseHTTP/1.1 200 OK}at org.springframework.data.e…...
GitHub的原理及应用详解（六）
本系列文章简介： GitHub是一个基于Git版本控制系统的代码托管平台，为开发者提供了一个方便的协作和版本管理的工具。它广泛应用于软件开发项目中，包括但不限于代码托管、协作开发、版本控制、错误追踪、持续集成等方面。 GitHub的原理可以简单…...
基于PHP+MySQL组合开发的微信小程序分销商城源码系统 分销商城+积分商城+多商户 功能强大 带完整的安装代码包以及搭建教程
系统概述 在当今数字化商业时代，拥有一个强大而多功能的分销商城系统对于企业的发展至关重要。本文将重点介绍基于 PHPMySQL 组合开发的微信小程序分销商城源码系统，它融合了分销商城、积分商城和多商户等功能，不仅功能强大，还提…...
kafka-消费者组偏移量重置
文章目录 1、消费者组偏移量重置1.1、列出所有的消费者组1.2、查看 my_group1 组的详细信息1.3、获取 kafka-consumer-groups.sh 的帮助信息1.4、 偏移量重置1.5、再次查看 my_group1 组的详细信息 1、消费者组偏移量重置 1.1、列出所有的消费者组 [rootlocalhost ~]# kafka-…...
一书读懂Python全栈安全，剑指网络空间安全
写在前面 通过阅读《Python全栈安全/网络空间安全丛书》，您将能够全面而深入地理解Python全栈安全的广阔领域，从基础概念到高级应用无一遗漏。本书不仅详细解析了Python在网络安全、后端开发、数据分析及自动化等全栈领域的安全实践，还紧密贴…...
原生js实现拖拽改变元素顺序
代码展示如下： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…...
以果决其行，只为文化的传承
从他们每一个人的身上，我们看到传神的东西，就是他们都能用结果，去指引自己前进的方向，这正是我要解读倪海厦老师的原因，看倪海厦2012年已经去世，到现在已经十几年时间了，但是我们看现在自学中医…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能：服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
CSS | transition 和 transform的用处和区别
省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合
作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...