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

运行结果

image.png

image.png

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

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

相关文章

AAA实验配置

一、实验目的 掌握AAA本地认证的配置方法 掌握AAA本地授权的配置方法 掌握AAA维护的方法 1.搭建实验拓扑图 2.完成基础配置&#xff1a; 3.使用ping命令测试两台设备的连通性&#xff1a; 二、配置AAA 1.打开R1&#xff1a;配置AAA方案 这两个方框内的可以改名&#xff0c…

百度页面奔跑的白熊html、css

一、相关知识-动画 1.基本使用&#xff1a;先定义再调用 2. 调用动画 用keyframes定义动画&#xff08;类似定义类选择器&#xff09; keyframes动画名称{ 0%{ width:100px&#xff1b; } 100%{ width:200px; } } 使用动画 div { width:200px; height:200px; background-…

前端面试题日常练-day28 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末。 1. 在Vue中&#xff0c;以下哪个选项用于监听组件生命周期钩子函数&#xff1f; a) watch b) computed c) lifecycle d) created 2. 在Vue中&#xff0c;以下哪个选项用于在列表渲染时为每个元素…

Pytorch线性模型(Linear Model)

基本步骤 ①首先准备好数据集&#xff08;DataSet&#xff09; ②模型的选择或者设计&#xff08;Model&#xff09; ③进行训练&#xff08;Train&#xff09;大部分模型都需要训练&#xff0c;有些不需要。这一步后我们会确定不同特征的权重 ④推理&#xff08;inferring…

开封旅游三天两夜旅游攻略

开封是一座历史悠久的城市&#xff0c;有着丰富的文化遗产和美食。以下是一个三天两夜的开封旅游攻略&#xff0c;供你参考&#xff1a; 一、行程安排 第一天&#xff1a; 上午&#xff1a;抵达开封&#xff0c;前往酒店办理入住手续。随后参观开封博物馆&#xff0c;了解开封…

【Python安全攻防】【网络安全】一、常见被动信息搜集手段

一、IP查询 原理&#xff1a;通过目标URL查询目标的IP地址。 所需库&#xff1a;socket Python代码示例&#xff1a; import socketip socket.gethostbyname(www.163.com) print(ip)上述代码中&#xff0c;使用gethostbyname函数。该函数位于Python内置的socket库中&#xf…

广场舞团|基于SprinBoot+vue的广场舞团系统(源码+数据库+文档)

广场舞团系统 目录 基于SprinBootvue的广场舞团系统 一、前言 二、系统设计 三、系统功能设计 1 系统功能模块 2 后台登录模块 5.2.1管理员功能模块 5.2.2社团功能模块 5.2.3用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推…

Pytorch-06 使用GPU加速计算

要在PyTorch中使用GPU加速计算&#xff0c;需要将模型和数据移动到GPU上进行处理。以下是上一节演示修改后的示例代码&#xff0c;展示了如何在训练过程中利用GPU加速计算&#xff1a; import torch import torch.nn as nn import torch.optim as optim import time# 检查GPU是…

2024-05-28 问AI: 在深度学习中,什么是反向随机失活?

文心一言 在深度学习中&#xff0c;反向随机失活&#xff08;Inverse Randomized Elimination&#xff0c;通常称为Dropout&#xff09;是一种在训练深度神经网络时常用的正则化技术&#xff0c;用于防止过拟合。该技术通过随机将神经网络中的一部分神经元“失活”或“丢弃”来…

深度剖析:为什么 Spring 和 IDEA 都不推荐使用 @Autowired 注解

目录 依赖注入简介 Autowired 注解的优缺点 Spring 和 IDEA 不推荐使用 Autowired 的原因 构造器注入的优势 Autowired 注解的局限性 可读性和可测试性的问题 推荐的替代方案 构造器注入 Setter 注入 Java Config Bean 注解 项目示例&#xff1a;Autowired vs 构造器…

Android 项目Gradle文件讲解(Groovy和Kotlin)

Android 项目Gradle文件讲解&#xff08;Groovy和Kotlin&#xff09; 前言正文一、Gradle的作用二、Gradle的种类① 工程build.gradle② 项目build.gradle③ settings.gradle④ gradle.properties⑤ gradle-wrapper.properties⑥ local.properties 三、Groovy和Kotlin的语言对比…

装饰模式:鸡腿堡

文章目录 UML类图目录结构Humburger.javaChickenBurger.javaCondiment.javaChuilli.javaLettuce.javaTest.java深度理解test怎么写 UML类图 目录结构 我们从指向最多的开始写 Humburger.java package zsms;public abstract class Humburger {protected String name;public S…

【接口自动化_05课_Pytest接口自动化简单封装与Logging应用】

一、关键字驱动--设计框架的常用的思路 封装的作用&#xff1a;在编程中&#xff0c;封装一个方法&#xff08;函数&#xff09;主要有以下几个作用&#xff1a;1. **代码重用**&#xff1a;通过封装重复使用的代码到一个方法中&#xff0c;你可以在多个地方调用这个方法而不是…

C++贪心算法(3)

整数区间 #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;int a[110][10]{0};for(int i0;i<n;i){cin>>a[i][1]>>a[i][2];}int cnt[110]{0};int mi99999;int mii-1;bool f[110]{false,false,false,false,false,false,false,…

debian让dotnet 程序以守护进程方式运行,如果意外退出主动开启

创建服务文件: 打开一个新的.service文件在/etc/systemd/system/目录下&#xff0c;例如myapp.service sudo nano /etc/systemd/system/myapp.service编辑服务文件: 添加以下内容到myapp.service文件&#xff0c;确保修改ExecStart以指向你的.NET Core应用程序的可执行文件&am…

JVM-调优之-高内存占用问题排查

排查思路 1&#xff09;检查jvm内存的分配情况 2&#xff09;检查jvm的gc情况 3&#xff09; 找出占用量比较大的对象 第一步&#xff1a;jmap -heap PID 查看jvm内存使用情况 jmap -heap 2525 可以看到老年代年轻代等其他内存区域内存使用率百分比 第二步&#xff1a;jsta…

Golang:使用roylee0704/gron实现定时任务

可以使用roylee0704/gron实现定时任务 文档 https://github.com/roylee0704/gronhttps://pkg.go.dev/github.com/roylee0704/gron 安装 go get github.com/roylee0704/gron代码示例 package mainimport ("fmt""time""github.com/roylee0704/gron…

如何用分立器件设计一个过流保护电路

过流保护电路是指当后级负载电流过大或者发生短路时&#xff0c;自动切断电源与后级负载&#xff0c;从而防止大电流损害电源电路&#xff0c;过流保护又叫OCP。 常见的过流保护电路有保险丝过流保护&#xff0c;集成的过流保护芯片&#xff0c;还有这种分立器件搭建的过流保护…

Browserify:将 Node.js 模块转换为浏览器可用的 JavaScript

什么是 Browserify&#xff1f; Browserify 是一个 JavaScript 工具&#xff0c;用于将 Node.js 模块转换为在浏览器环境中可用的单个 JavaScript 文件。通过 Browserify&#xff0c;您可以使用 require() 函数引入其他模块&#xff0c;就像在 Node.js 中一样&#xff0c;而不…

详解 Scala 的隐式转换

当编译器第一次编译失败的时候&#xff0c;会在当前的环境中查找能让代码编译通过的方法&#xff0c;用于将某个类型进行转换&#xff0c;实现二次编译通过 一、隐式函数 隐式函数可以在不修改任何代码的情况下&#xff0c;扩展某个类的功能 /**声明语法&#xff1a;implicit d…