HTML+CSS+JS简易计算器

news/2024/7/21 23:53:24/文章来源:https://blog.csdn.net/2201_75813676/article/details/139025110

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')
}

运行结果

image.png

image.png

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

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

相关文章

JRT性能演示

演示视频 君生我未生&#xff0c;我生君已老&#xff0c;这里是java信创频道JRT&#xff0c;真信创-不糊弄。 基础架构决定上层建筑&#xff0c;和给有些品种的植物种植一样&#xff0c;品种不对&#xff0c;施肥浇水再多&#xff0c;也是不可能长成参天大树的。JRT吸收了各方…

什么是React?

01 Why React? What is React? I think the one-line description of React on its home page (https://react.dev/) is concise and accurate: “A JavaScript library for building user interfaces.” 我认为React主页(https://react.dev/)上的一行描述既简洁又准确: …

服务器感染了. rmallox勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 近年来&#xff0c;随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。其中&#xff0c;勒索病毒作为一种严重的网络威胁&#xff0c;对个人和企业数据造成了巨大的威胁。本文将重点介绍.rmallox勒索病毒的特点、传播途径以及应对策略&#xff0c;旨…

云原生架构内涵_3.主要架构模式

云原生架构有非常多的架构模式&#xff0c;这里列举一些对应用收益更大的主要架构模式&#xff0c;如服务化架构模式、Mesh化架构模式、Serverless模式、存储计算分离模式、分布式事务模式、可观测架构、事件驱动架构等。 1.服务化架构模式 服务化架构是云时代构建云原生应用的…

什么是访问控制漏洞

什么是AC Bugs&#xff1f; 实验室 Vertical privilege escalation 仅通过隐藏目录/判断参数来权限控制是不安全的&#xff08;爆破url/爬虫/robots.txt/Fuzz/jsfinder&#xff09; Unprotected functionality 访问robots.txt 得到隐藏目录&#xff0c;访问目录 &#xff0c;…

markdown语法保存

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

【漏洞复现】大华智能物联综合管理平台 log4j远程代码执行漏洞

0x01 产品简介 大华ICC智能物联综合管理平台对技术组件进行模块化和松耦合&#xff0c;将解决方案分层分级&#xff0c;提高面向智慧物联的数据接入与生态合作能力。 0x02 漏洞概述 大华ICC智能物联综合管理平台/evo-apigw/evo-brm/1.2.0/user/is-exist 接口处存在 l0g4i远程…

大模型“1元购”?AI公司加速奔向应用端“大航海时代”

自字节跳动发布豆包大模型&#xff0c;互联网大厂纷纷就位&#xff0c;击穿“地板价”的打法从C端向B端拓展。这也成为今年“618”最亮眼的价格战。 5月15日&#xff0c;字节跳动率先宣布豆包大模型已通过火山引擎开放给企业客户&#xff0c;大模型定价降至0.0008元/千Tokens&…

手机端如何访问本地vue+vite项目,实现实时调试?

一、应用场景 h5&#xff08;vuevite&#xff09;嵌入app后&#xff0c;出现某种问题时&#xff0c;需要每次发布坏境后&#xff0c;才能才看效果&#xff0c;这种来回很耗时间&#xff0c;本文章在于解决手机端直接访问本地启动应用项目&#xff0c;无需重复发布坏境 二、实…

【本地运行chatgpt-web】启动前端项目和service服务端项目,也是使用nodejs进行开发的。两个都运行成功才可以使用!

1&#xff0c;启动web界面 https://github.com/Chanzhaoyu/chatgpt-web#node https://nodejs.org/en/download/package-manager # 使用nvm 安装最新的 20 版本。 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source /root/.bashrc n…

网络应用层之(1)DHCPv6协议

网络应用层之(1)DHCPv6协议 Author: Once Day Date: 2024年5月26日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 通信网络技术_Once-Day的博客-C…

做场外个股期权怎么询价

做场外个股期权怎么询价&#xff1f;没有具体的哪家做市商是询价是最低的&#xff0c;个人投资者需要通过机构通道方询价进行对比&#xff0c;各券商的报价由询价机构方提供给到投资者&#xff0c;可以参考不同券商的报价进行比对&#xff0c;再决定是否进行投资。本文来自&…

GPT-4o:重塑人机交互的未来

一个愿意伫立在巨人肩膀上的农民...... 一、推出 在人工智能&#xff08;AI&#xff09;领域&#xff0c;自然语言处理&#xff08;NLP&#xff09;技术一直被视为连接人类与机器的桥梁。近年来&#xff0c;随着深度学习技术的快速发展&#xff0c;NLP领域迎来了前所未有的变革…

vmware中Ubuntu虚拟机和本地电脑Win10互相ping通

初始状态 使用vmware17版本安装的Ubuntu的20版本&#xff0c;安装之后什么配置都要不懂&#xff0c;然后进行下述配置。 初始的时候是NAT&#xff0c;没动的. 设置 点击右键编辑“属性” 常规选择“启用”&#xff1a; 高级选择全部&#xff1a; 打开网络配置&#xff0c;右键属…

Django入门全攻略:从零搭建你的第一个Web项目

系列文章目录 努力ing Django入门全攻略&#xff1a;从零搭建你的第一个Web项目努力ing… 文章目录 系列文章目录前言一、Django1.1 Django安装1.2 Django项目创建1.3 目录介绍 二、子应用2.1 子应用创建2.2 目录结构2.3 子应用注册2.4 子应用视图逻辑2.4.1 编写视图2.4.2 编写…

SpringBoot——整合Thymeleaf模板

目录 模板引擎 新建一个SpringBoot项目 pom.xml application.properties Book BookController bookList.html ​编辑 项目总结 模板引擎 模板引擎是为了用户界面与业务数据分离而产生的&#xff0c;可以生成特定格式的页面在Java中&#xff0c;主要的模板引擎有JSP&…

LazyVim笔记

回到上次编辑的位置 gi非常的方便。 neo-tree KeyDescriptionMode<leader>beBuffer Explorern<leader>eExplorer NeoTree (Root Dir)n<leader>EExplorer NeoTree (cwd)n<leader>feExplorer NeoTree (Root Dir)n<leader>fEExplorer NeoTree (c…

Facebook的魅力:数字时代的社交热点

在当今数字化时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分&#xff0c;而Facebook作为其中的巨头&#xff0c;一直以其独特的魅力吸引着全球数十亿用户。本文将深入探讨Facebook的魅力所在&#xff0c;以及它在数字时代的社交热点。 1. 社交网络的霸主&…

系统架构设计师【第3章】: 信息系统基础知识 (核心总结)

文章目录 3.1 信息系统概述3.1.1 信息系统的定义3.1.2 信息系统的发展3.1.3 信息系统的分类3.1.4 信息系统的生命周期3.1.5 信息系统建设原则3.1.6 信息系统开发方法 3.2 业务处理系统&#xff08;TPS&#xff09;3.2.1 业务处理系统的概念3.2.2 业务处理系统的功能 …

Linux Tcpdump抓包入门

Linux Tcpdump抓包入门 一、Tcpdump简介 tcpdump 是一个在Linux系统上用于网络分析和抓包的强大工具。它能够捕获网络数据包并提供详细的分析信息&#xff0c;有助于网络管理员和开发人员诊断网络问题和监控网络流量。 安装部署 # 在Debian/Ubuntu上安装 sudo apt-get install…