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

网页计算器的实现

news 2025/7/6 3:49:23

简介

该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 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

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/5 2:41:27

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/7/4 9:18:34

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/7/5 2:46:47

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/7/5 5:31:34

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/7/4 22:58:38

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/6/21 1:28:46

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/6/26 16:09:26

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/7/4 13:41:53

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/7/4 23:22:40

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2025/7/4 17:45:03