网页计算器的实现

简介

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

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

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

相关文章

Bean类的设计规范:Bean规范

Bean规范 类要求必须含有无参&#xff0c;公共的构造方法属性必须私有化&#xff0c;然后提供公共的 set 和 get 方法

anaconda命令大全

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

Android 性能优化之启动优化

文章目录 Android 性能优化之启动优化启动状态冷启动温启动热启动 耗时检测检测手段TraceView使用方式缺点 Systrace环境配置使用方式TraceView和Systrace比较 AOP统计耗时环境配置使用 优化白屏优化异步加载优化环境配置使用 延迟加载优化AppStartup 源码下载 Android 性能优化…

Reid系列论文学习——无人机场景下基于 Transformer 的轻量化行人重识别

今天介绍的一篇论文是针对无人机场景下的行人重识别&#xff0c;论文题目为&#xff1a;"无人机场景下基于 Transformer 的轻量化行人重识别"。该论文针对无人机场景下行人呈现多角度多尺度的特点、以及传统CNN网络在行人重识别任务中受限于感受野和下采样导致的无法…

力扣1895.最大的幻方

力扣1895.最大的幻方 求前缀和暴力枚举幻方边长 求行列前缀和 class Solution {public:int largestMagicSquare(vector<vector<int>>& grid) {int n grid.size() , m grid[0].size();vector<vector<int>> rowsum(n,vector<int>(m));for…

关于汽车软件测试的几点想法

如果你有过汽车行业的从业经验&#xff0c;你就应该知道&#xff0c;过去汽车行业只做测试&#xff0c;而不做开发。汽车制造商的主要任务&#xff08;从工程角度看&#xff09;是将来自数百家供应商的数千个零部件组装在一起。考虑到现代软件的复杂性和客户的“挑剔”&#xf…

Rufus 制作启动盘 | 便携的工作空间

唠唠闲话 最近服务器硬盘故障多&#xff0c;在修复过程中&#xff0c;学习了一些操作&#xff0c;这里做个记录。本期主要介绍 U盘启动盘的制作&#xff0c;以及持久化存储。 U 盘启动盘 镜像选择 Ubuntu 的版本命名遵循 “Adjective Animal” 的模式&#xff0c;即 “形容…

【trition-server】python-backend 源码阅读

c++ 的stub 代码import 了 python的类 sys 和 triton_python_backend_utils.pystub本身是一个进程,与主进程做IPC通信docker 运行一个trition-server (base) zhangbin@ubuntu-server:~$ docker run --shm-size=1g --ulimit memlock=-1 -p 8000:8000 -p 8001:8001 -p 8002:8002…

windwos环境和pyspark环境问题解决-记录

一&#xff1a; 打不开cmd/cmd闪退问题解决 1.winR打开 regedit 2.在注册表找到 HKEY_CURRENT_USER\Software\Microsoft\Command Processor路径 3.在该路径下找到AutoRun&#xff0c;将数值改为空 可能原因&#xff1a;找到AutoRun 发现值是&#xff1a; if exist & if…

新港海岸NCS8822 低功耗DP转VGA 分辨率支持1920*1200*60HZ

NCS8822描述&#xff1a; NCS8822是一个低功耗显示端口到vga转换器。NCS8822集成了一个与DP1.2兼容的接收器和一个高速三通道视频DAC。对于DP1.2输入&#xff0c;NCS8822支持1车道/2车道&#xff0c;也支持车道交换功能。对于VGA输出NCS8822&#xff0c;在60Hz帧率下对WUXGA&a…

C++ 栈-队列-优先级队列

目录 1 栈 2 队列 3 deque 介绍 4 优先级队列 5 反向迭代器 栈也是我们在C语言就模拟实现过的一种数据结构&#xff0c;在C中&#xff0c;栈其实和我们前面模拟实现过的string、vector等容器有一点区别&#xff0c;站起是不是容器&#xff0c;而是一种容器适配器&#xff0c;我…

java必知必会-j2ee规范(上)

文章目录 一、WEB三大规范二、j2ee相关接口(上)1.javax.servlet.Servlet2.javax.servlet.http.HttpServlet3.javax.servlet.ServletRequest4.javax.servlet.http.HttpServletRequest5.javax.servlet.ServletResponse6.javax.servlet.http.HttpServletResponse7. javax.servlet.…

k8s record 20240705

k8s 安全管理 request 是1g&#xff0c;你得不到要求&#xff0c;我就不创建了&#xff0c;这就是准入控制二次校验 SA就是serviceAccount。 内部是SA和 token, 外部用户进来就是 .kube/config文件 namespace下的是role&#xff0c;整个集群是 ClusterRole. 动作就是Binding li…

pytest-rerunfailures:优化测试稳定性的失败重试工具

笔者在执行自动化测试用例时&#xff0c;会发现有时候用例失败并非代码问题&#xff0c;而是由于服务正在发版&#xff0c;导致请求失败&#xff0c;从而降低了自动化用例的稳定性&#xff0c;最后还要花时间定位到底是自身case的原因还是业务逻辑问题&#xff0c;还是其他原因…

大数据面试题之Presto[Trino](3)

目录 Presto如何处理数据的聚合操作&#xff1f; Presto支持哪些类型的JOIN操作&#xff1f; 如何在Presto中使用子查询&#xff1f; 解释Presto中的窗口函数。 Presto中的Page和Block是什么&#xff1f; 描述Presto如何处理列式存储数据。 ORC和Parquet格式在Presto中的…

适合家居建材企业的CRM系统盘点(2024版)

当前&#xff0c;CRM市场上&#xff0c;国际巨头的市场优势正在逐渐减弱&#xff0c;国内CRM企业奋起追赶&#xff0c;呈现出强劲的崛起势头。因此&#xff0c;对于家居建材企业来讲&#xff0c;在进行CRM选型时&#xff0c;如何选择一款合适的系统是关乎企业高效发展的重要课题…

探索C嘎嘎的奇妙世界:第十九关---STL(list的模拟实现)

1. 基本框架 首先&#xff0c;我们先从节点的准备工作入手&#xff0c;请看示例&#xff1a; #pragma once #include<iostream> #include<assert.h> using namespace std; //节点 template<class T> struct ListNode {ListNode<T>* _next;Li…

矩阵键盘与密码锁

目录 1.矩阵键盘介绍​编辑 2.扫描的概念 3.代码演示&#xff08;读取矩阵键盘键码&#xff09; 4.矩阵键盘密码锁 1.矩阵键盘介绍 为了减少I/O口的占用&#xff0c;通常将按键排列成矩阵形式&#xff0c;采用逐行或逐列的 “扫描”&#xff0c;就可以读出任何位置按键的状态…

免杀笔记 ----> ShellCode Loader !!!

学了那么久的前置知识&#xff0c;终于到了能上线的地方了&#xff01;&#xff01;&#xff01; 不过这里还没到免杀的部分&#xff0c;距离bypass一众的杀毒软件还有很长的路要走&#xff01;&#xff01; 目录 1.ShellCode 2.ShellCode Loader的概念 3.可读可写可…

字符串函数5-9题(30 天 Pandas 挑战)

字符串函数 1. 相关知识点1.5 字符串的长度条件判断1.6 apply映射操作1.7 python大小写转换1.8 正则表达式匹配2.9 包含字符串查询 2. 题目2.5 无效的推文2.6 计算特殊奖金2.7 修复表中的名字2.8 查找拥有有效邮箱的用户2.9 患某种疾病的患者 1. 相关知识点 1.5 字符串的长度条…