当前位置： 首页 > news >正文

网页计算器的实现

news 2025/12/16 22:35:19

简介

该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 HTML、CSS 和 JavaScript ，用于检验web前端基础水平。

  • 开发环境：Visual Studio Code
  • 开发工具：HTML5、CSS3、JavaScript
  • 实现效果
    在这里插入图片描述

功能设计和模块划分

  1. 显示模块：负责展示输入的数字和计算结果。
  2. 输入模块：处理用户点击数字和运算符按钮的操作。
  3. 计算模块：执行具体的数学运算，并处理异常情况。

具体实现

  1. 项目结构
    在这里插入图片描述
  2. 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="./css/index.css"><script src="./js/index.js"></script>
</head><body><div id="outer"><!-- 显示 --><div class="screen"><div class="showNum">0</div></div><!-- 按钮 --><div class="buttons"><input type="button" value="AC" class="btn1"><input type="button" value="<-" class="btn1"><input type="button" value="+/-" class="btn1"><input type="button" value="/" class="btn2"><input type="button" value="1"><input type="button" value="2"><input type="button" value="3"><input type="button" value="*" class="btn2"><input type="button" value="4"><input type="button" value="5"><input type="button" value="6"><input type="button" value="-" class="btn2"><input type="button" value="7"><input type="button" value="8"><input type="button" value="9"><input type="button" value="+" class="btn2"><input type="button" value="0"><input type="button" value="."><input type="button" value="m"><input type="button" value="=" class="btn2"></div></div></body></html>
  1. index.css
/* 去除默认样式 */
* {padding: 0;margin: 0;
}input {border: 0;
}/* 外部轮廓的样式 */
#outer {width: 380px;height: 640px;background-color: black;/* 居中 */margin: 0 auto;/* 设置圆角效果 */border-radius: 30px;}/* 显示样式 */
.screen {width: 380px;height: 180px;/* 开启相对定位 */position: relative;
}.showNum {color: white;font-size: 60px;/* 开启绝对定位 */position: absolute;right: 30px;bottom: 10px;
}/* 按钮样式 */
.buttons {height: 440px;/* 设置内边距 */padding: 10px;/* 开启弹性盒子 */display: flex;/* 自动换行 */flex-wrap: wrap;/* 水平方向设置两端对齐 */justify-content: space-between;/* 垂直方向两端对齐 */align-content: space-between;
}.buttons>input {width: 80px;height: 80px;background-color: rgb(51, 51, 51);/* 设置圆形 */border-radius: 50%;/* 设置字体颜色 */color: white;/* 设置字体大小 */font-size: 28px;
}.buttons>.btn1 {color: black;background-color: rgb(165, 164, 164);
}.buttons>.btn2 {background-color: rgb(213, 158, 90);
}/* 设置点击高亮效果 */
.buttons>input:active {filter: brightness(140%);
}
  1. index.js
window.addEventListener("load", function () {let showNum = document.querySelector(".showNum");// 利用事件委托，给按钮共同的祖先元素绑定事件，利用事件冒泡完成对应的事件回调let buttons = document.querySelector(".buttons");//定义一个标志符let flag = false;buttons.addEventListener("click", function (e) {let buttonValue = e.target.value;let showNumValue = showNum.innerHTML;// 1.判断如果点击的是数字，则显示if (!isNaN(buttonValue)) {// 2.屏幕显示数字是否是0if (showNumValue == 0) {showNum.innerHTML = buttonValue;} else {showNum.innerHTML = showNumValue + buttonValue;}} else {//点击功能按钮switch (buttonValue) {case "AC": //清零showNum.innerHTML = 0;break;case "<-":showNum.innerHTML = delOneFun(showNumValue);break;case "+/-":showNum.innerHTML = showNumValue * -1;break;case ".":showNum.innerHTML = pointFun(showNumValue);break;case "m":location.href = "https://www.baidu.com";break;default:switch (buttonValue) {case "/":case "*":case "-":case "+":flag = true;showNum.innerHTML = showNumValue + buttonValue;break;case "=":showNum.innerHTML = evalFun(showNumValue);break;}break;}}});//退格函数function delOneFun(value) {let newValue = value.substring(0, value.length - 1);if (newValue.length == 0) {newValue = 0;}return newValue;}//小数点function pointFun(value) {let newValue = "";if (value.indexOf(".") == -1) {newValue = value + ".";} else if (flag) {newValue = value + ".";flag = false;} else {return value;}return newValue;}//运算函数function evalFun(value) {let newValue = "";// eval()可以接收一个字符串作为js的代码执行newValue = eval(value);// Number.isInteger() 判断一个数字是否是整数，如果是则返回trueif (Number.isInteger(newValue)) {return newValue;} else {// toFixed()保留指定位数的小数newValue = newValue.toFixed(2);return newValue;}}
});

相关文章：

网页计算器的实现

简介 该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 HTML、CSS 和 JavaScript &#xff0c;用于检验web前端基础水平。 开发环境&#xff1a;Visual Studio Code开发工具&#xff1a;HTML5、CSS3、JavaScript实现效果 功能设计和模块划分 显示模块&#…...

编程日记 2024/7/5 20:38:41

JAVA设计模式-监听者模式

什么是监听者模式 监听器模式是一种观察者模式的扩展&#xff0c;也被称为发布-订阅模式。在监听器模式中&#xff0c;存在两类角色&#xff1a;事件源&#xff08;Event Source&#xff09;和监听器&#xff08;Listener&#xff09;。事件源负责产生事件&#xff0c;而监听器…...

编程日记 2024/7/5 20:37:40

anaconda命令大全

目录 查看所有虚拟环境查看某虚拟环境安装的包创建虚拟环境激活创建好的虚拟环境回到之前的环境删除创建的虚拟环境查看conda所在的位置、虚拟环境位置等信息conda修改虚拟环境所在的位置 查看所有虚拟环境 conda env list查看某虚拟环境安装的包 激活要查看的虚拟环境之后&a…...

编程日记 2024/7/5 20:36:39

“论单元测试方法及应用”写作框架，软考高级论文，系统架构设计师论文

论文真题 1、概要叙述你参与管理和开发的软件项目,以吸你所担的主要工作。 2、结给你参与管理和开发的软件项目&#xff0c;简要叙述单元测试中静态测试和动态测试方法的基本内容。 3、结给你惨与管理和研发的软件项目,体阐述在玩测试过程中,如何确定白盒测试的覆盖标准,及如…...

编程日记 2024/7/5 20:35:38

基于布雷格曼偏差校正技术的全变分一维时间序列信号降噪方法（MATLAB R2018A）

信号降噪是信号处理的重要步骤之一&#xff0c;目的是提高所获得信号数据的质量&#xff0c;以达到更高的定性和定量分析精度。信号降噪能提升信号处理其他环节的性能和人们对信息识别的准确率&#xff0c;给信号处理工作提供更可靠的保证。信号降噪的难点是降低噪声的同时也会…...

编程日记 2024/7/5 20:34:37

【CentOS 7.6】Linux版本 portainer本地镜像导入docker安装配置教程，不需要魔法拉取！（找不着镜像的来看我）

吐槽 我本来根本不想写这篇博客&#xff0c;但我很不解也有点生气&#xff0c;CSDN这么大没有人把现在需要魔法才能拉取的镜像放上来。 你们都不放&#xff0c;根本不方便。我来上传资源。 portainer-ce-latest.tar Linux/amd64 镜像下载地址&#xff1a; 链接&#xff1a;h…...

编程日记 2024/7/5 20:33:35

【windows|012】光猫、路由器、交换机详解

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 ​ &#x1f3c5;阿里云ACE认证高级工程师 ​ &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社…...

编程日记 2024/7/5 20:32:34

Node之Web服务

前言 本文将讲解node的web服务 通过讲解http请求&#xff0c;node创建web服务等知识点让你更加深入的理解web服务和node创建的web服务 HTTP请求是什么&#xff1f; HTTP请求是客户端&#xff08;通常是浏览器或其他应用程序&#xff09;与服务器之间进行通信的一种方式。 …...

编程日记 2024/7/5 20:30:32

[Day 24] 區塊鏈與人工智能的聯動應用：理論、技術與實踐

AI在自動駕駛中的應用 1. 簡介 自動駕駛技術是現代交通領域的一個革命性進展。通過結合人工智能&#xff08;AI&#xff09;、機器學習&#xff08;ML&#xff09;、深度學習&#xff08;DL&#xff09;和傳感器技術&#xff0c;自動駕駛汽車可以在無人干預的情況下安全駕駛。…...

编程日记 2024/7/5 20:28:30

计算机图形学入门25：BRDF的测量

1.前言 BRDF(双向反射分布函数)可以用各种各样的材质去描述&#xff0c;但是这只是一种基于物理的描述或者近似&#xff0c;那什么是真正的BRDF&#xff1f;只有测出来的才是真正的。 为什么要测出BRDF&#xff1f;因为之前所描述的BRDF并不准确。如下图所示&#xff0c;以菲涅…...

编程日记 2024/7/5 20:27:30

空调计费系统是什么，你知道吗

空调计费系统是一种通过对使用空调的时间和能源消耗进行监测和计量来进行费用计算的系统。它广泛应用于各种场所&#xff0c;如家庭、办公室、商场等&#xff0c;为用户提供了方便、准确的能源使用管理和费用控制。 可实现功能 智能计费&#xff1a;中央空调分户计费系统通过智…...

编程日记 2024/7/5 20:24:26

震惊！张宇25版高数18讲发布，656页惹争议！

这个张宇老师在微博已经解释过了&#xff01; 我觉得张宇老师本意是好的&#xff0c;在考研数学教学创新这方面&#xff0c;他真的有自己的思考。 他为什么要这么做&#xff1f; 其实作为一个考研高数老师&#xff0c;他完全可以像其他老师一样&#xff0c;什么都不做&#x…...

编程日记 2024/7/5 20:23:25

React+TS前台项目实战（二十三）-- 基于属性自定义数值显示组件Decimal封装

文章目录 前言Decimal组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言 今天要封装的Decimal 组件&#xff0c;是通过传入的属性进行定制化显示数值&#xff0c;在渲染时&#xff0c;会根据不同的情况显示整数部分、小数部分和单位&#xff0c;支持自定义样式…...

编程日记 2024/7/5 20:21:23

pip install包出现哈希错误解决

如图&#xff0c;当遇到此类错误时&#xff0c;多半是连接不稳定导致的校验失败。我们可以在PC端&#xff0c;或Ubuntu通过浏览器下载.whl安装文件&#xff1a;直接复制报错信息中的网址到浏览器即可弹出下载窗口。...

编程日记 2024/7/5 20:20:21

多线程压测方法模板

主要步骤 创建一个线程池 ExecutorService service Executors.newFixedThreadPool(20);创建任务 Runnable task () -> {// 具体实现 };提交多个任务到线程池 for (int i 0; i < 100000; i) {service.submit(task); }关闭线程池 service.shutdown();等待所有任务完成 s…...

编程日记 2024/7/5 20:18:19

Uniapp软件库全新带勋章功能(包含前后端源码)

源码介绍&#xff1a; Uniapp开发的软件库全新带勋章功能&#xff0c;搭建好后台 在前端找到 util 这个文件 把两个js文件上面的填上自己的域名&#xff0c;电脑需要下载&#xff1a;HBuilderX 登录账号 没有账号就注册账号&#xff0c; 然后上传文件&#xff0c;打包选择 “…...

编程日记 2024/7/5 20:17:18

秋招突击——7/5——设计模式知识点补充——适配器模式、代理模式和装饰器模式

文章目录 引言正文适配器模式学习篮球翻译适配器 面试题 代理模式学习面试题 装饰器模式学习装饰模式总结 面试题 总结 引言 为了一雪前耻&#xff0c;之前腾讯面试的极其差&#xff0c;设计模式一点都不会&#xff0c;这里找了一点设计模式的面试题&#xff0c;就针对几个常考…...

编程日记 2024/7/5 20:16:15

bmob Harmony鸿蒙快速开发搜索功能

搜索功能是很多应用都需要的功能。在很多平台上&#xff0c;要开发一个兼容性较好的搜索功能都还是需要添加比较多的视图代码的。 为了解决这个问题&#xff0c;鸿蒙ArkUI提供了一个快速添加搜索功能的视图组件给我们&#xff0c;结合Bmob Harmony鸿蒙SDK的搜索能力&#xff0…...

编程日记 2024/7/5 20:15:14

软通动力子公司鸿湖万联最新成果SwanLink AI亮相世界人工智能大会

7月4日&#xff0c;2024世界人工智能大会暨人工智能全球治理高级别会议&#xff08;WAIC 2024&#xff09;在上海拉开帷幕&#xff0c;软通动力董事长兼首席执行官刘天文受邀出席开幕式。其间&#xff0c;软通动力携子公司鸿湖万联深度参与到大会各项活动中&#xff0c;并全面展…...

编程日记 2024/7/5 20:14:13

查看Linux系统中日志文件

Linux 系统中 Ubuntu&#xff0c;Debian&#xff0c;CentOS&#xff0c;RedHat 作为常用的服务器软件系统&#xff0c;很多人都已经熟知。不论是服务器出现问题&#xff0c;还是日常维护或各种环境搭建&#xff0c;我们经常需要登录上服务器查看日志。 如果熟知 Linux 下的 ta…...

编程日记 2024/7/5 20:13:12

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/12/7 16:06:34

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/12/15 7:23:02

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/12/13 5:10:30

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/12/12 16:29:02

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/12/10 21:51:45

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/12/14 20:43:55

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/12/8 22:05:50

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/12/13 23:56:32