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年已经去世，到现在已经十几年时间了，但是我们看现在自学中医…...
告别“AI只会聊天”：用OpenClaw+星链4SAPI打造你的办公自动化Agent
你有没有过这种时刻——邮箱右上角的红点像一道催命符，文件夹乱得像个数据坟场，日程表排得跟俄罗斯方块似的，领导一句“把本周情况汇总下”，你就得在聊天记录里搞考古发掘。打开AI，发现它除了陪你聊天，什么…...
IndexTTS2 V23应用案例：打造智能客服语音，让机器说话更有人情味
IndexTTS2 V23应用案例：打造智能客服语音，让机器说话更有人情味 1. 为什么智能客服需要情感语音？ 在当今的客户服务场景中，冰冷的机械语音正在被市场淘汰。研究表明，带有适当情感的语音交互能显著提升用户体验&#…...
中小企业AI落地：Qwen3-4B-Instruct-2507轻量部署实战
中小企业AI落地：Qwen3-4B-Instruct-2507轻量部署实战 中小企业想用上大模型，常被几个现实问题卡住：显存不够、部署太重、运维不会、成本太高。Qwen3-4B-Instruct-2507这个模型，就是为这类场景量身打磨的——它不追求参数堆砌&…...
无人水下航行器（UUV）与无人航空系统（UAS）时空会合关键技术研究附Matlab代码
✅作者简介：热爱科研的Matlab仿真开发者，擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室🍊个人信条：格物致知,完整Matlab代码及仿真咨询…...
Vim编辑器的.swp文件：安全隐患与防范措施全解析
Vim编辑器.swp文件安全风险深度剖析与实战防护指南 当你深夜加班修改服务器配置文件时，突然断电导致Vim异常退出。第二天发现.nginx.conf.swp文件被恶意用户下载，内含未保存的数据库密码——这种场景在运维工作中并不罕见。.swp文件作为Vim的自动备份机制…...
Qwen-Image-Edit-2511-Unblur-Upscale惊艳效果：模糊图片一键高清化
Qwen-Image-Edit-2511-Unblur-Upscale惊艳效果：模糊图片一键高清化 1. 效果展示：从模糊到高清的魔法 你是否遇到过这样的情况？手机里珍藏的老照片因为年代久远变得模糊不清，或是匆忙拍摄的珍贵瞬间因为手抖而糊成一片。现在&…...
【仅限高级Java架构师查阅】Java外部函数安全沙箱构建指南：禁用dlopen/dlsym、符号白名单校验、Rust FFI桥接实践（含SPI自定义ClassLoader隔离方案）
第一章：Java外部函数优化Java外部函数接口（Foreign Function & Memory API，即JEP 454/459/460/461/462）自JDK 22起正式成为标准特性，为Java与本地代码（如C/C库）的高效互操作提供了零拷贝、类…...
深入解析ReID核心评价指标：从Rank1到mINP的实战应用
1. ReID评价指标入门：为什么我们需要这么多指标？ 第一次接触ReID（行人重识别）的朋友可能会被各种评价指标搞得头晕——Rank1、mAP、ROC、mINP...这些字母组合到底在说什么？其实这些指标就像医生给病人做体检时的不同检…...
APRSPacketLib：嵌入式C库实现APRS协议编解码
1. APRSPacketLib 项目概述 APRSPacketLib 是一个专为业余无线电（Ham Radio）领域设计的轻量级嵌入式 C 语言库，核心目标是 在资源受限的微控制器平台上高效完成 APRS（Automatic Packet Reporting System）协议数据包的…...
2026年4月怎么搭建OpenClaw？腾讯云小白1分钟部署及百炼APIKey配置步骤
2026年4月怎么搭建OpenClaw？腾讯云小白1分钟部署及百炼APIKey配置步骤。OpenClaw（原Clawdbot）作为2026年主流的AI自动化助理平台，可通过阿里云轻量服务器实现724小时稳定运行，并快速接入钉钉，让AI在企业群聊…...