javaScript蓝桥杯---用什么来做计算

news2024/11/6 17:24:53

目录

  • 一、介绍
  • 二、准备
  • 三、目标
  • 四、代码
  • 五、完成


一、介绍

古以算盘作为计算工具。算盘常为木制矩框,内嵌珠子数串,定位拨珠,可做加减乘除等运算。站在前人的肩膀上,后人研究出计算器,便利了大家的生活,我们不用带着笨重的计算工具出门,打开手机上的计算器就可以了。

本题需要实现一个可以进行加减乘除等运算的计算器。

二、准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

├── css
│   └── style.css
├── js
│   └── index.js
├── effect.gif
└── index.html

其中:

  • css/style.css 是样式文件。
  • js/index.js 是实现计算功能的 js 文件。
  • effect.gif 是最终实现的效果动图。
  • index.html 是主页面。

在浏览器中预览 index.html 页面,点击计算器上的按钮,不能进行计算(图上的红色文字只是对计算器的功能区域进行说明,无需实现),效果如下:

在这里插入图片描述

三、目标

请完善 js/index.js 文件,当鼠标点击计算器上的按钮时,能够正常进行计算。

完成后的效果见文件夹下面的 gif 图,图片名称为 effect.gif(提示:可以通过 VS Code 或者浏览器预览 gif 图片)。

具体说明如下:

  • 点击按钮会在计算式子区域显示当前输入的计算式子,当点击等号(=) 后,在结果显示区域应该显示出正确的结果。
  • 计算器需要具有加(+)、减(-)、乘(x)、除(÷)、开二次方(√)、重置(AC)、小数点(.)、括号运算这八个功能。
  • 计算器的计算遵循四则混合运算的法则,括号的优先级最高,其次是乘除,加减的优先级最低。

效果说明如下:

能够正确进行加、减、乘、除的混合运算,样例如下所示:

在这里插入图片描述

  • 能够正确进行开二次方,输入一个可以平方的数,点击开方(√)按钮即可在结果显示区域显示结果。如果输入的值是不能平方,结果显示 NaN,样例如下所示:

在这里插入图片描述
在这里插入图片描述

  • 点击重置按钮(AC),可以清空计算式子显示区域和结果显示区域的值。

  • 能够进行小数的加减乘除运算,样例如下所示:

  • 在这里插入图片描述

四、代码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用什么来做计算</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="calculator">
      <!--结果-->
      <div class="calc-row">
        <input type="text" name="formula" id="formula" readonly />
        <input type="text" name="result" id="result" readonly />
      </div>
      <!--第一行-->
      <div class="calc-row">
        <div class="calc-button" id="left-bracket">(</div>
        <div class="calc-button" id="right-bracket">)</div>
        <div class="calc-button" id="sqrt"></div>
        <div class="calc-button" id="reset">AC</div>
      </div>
      <!--第二行-->
      <div class="calc-row">
        <div class="calc-button" id="seven">7</div>
        <div class="calc-button" id="eight">8</div>
        <div class="calc-button" id="nine">9</div>
        <div class="calc-button" id="division">÷</div>
      </div>
      <!--第三行-->
      <div class="calc-row">
        <div class="calc-button" id="four">4</div>
        <div class="calc-button" id="five">5</div>
        <div class="calc-button" id="six">6</div>
        <div class="calc-button" id="multiply">x</div>
      </div>
      <!--第四行-->
      <div class="calc-row">
        <div class="calc-button" id="one">1</div>
        <div class="calc-button" id="two">2</div>
        <div class="calc-button" id="three">3</div>
        <div class="calc-button" id="reduce">-</div>
      </div>
      <!--第五行-->
      <div class="calc-row">
        <div class="calc-button" id="zero">0</div>
        <div class="calc-button" id="decimal">.</div>
        <div class="calc-button" id="equal">=</div>
        <div class="calc-button" id="add">+</div>
      </div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

css/style.css

/*整个计算器的外观*/
.calculator {
  position: relative;
  width: 300px;
  margin: 1px auto;
  padding: 10px 0;
  cursor: pointer;
  border-radius: 20px;
  background-color: #6fb2d2;
  box-shadow: 5px 5px 10px 3px #908e8e;
}

.calc-row {
  text-align: center;
}

/*结果显示屏*/
input {
  margin: 0 10px;
  width: 85%;
  color: #000;
  text-align: right;
  font-size: 30px;
  margin-left: 10px;
  padding-right: 0.5em;
  border: 1px solid #f0e4d7;
  background-color: #f2ece6;
}
.calc-row #result {
  height: 40px;
  border-radius: 0 0 10px 10px;
}
.calc-row #formula {
  height: 30px;
  border-radius: 10px 10px 0 0;
}

.calc-row div {
  display: inline-block;
  text-align: center;
  font-weight: bold;
  width: 50px;
  border: 1px solid #555;
  background-color: #eee;
  padding: 10px 0;
  margin: 7px 5px;
  border-radius: 15px;
  box-shadow: 2px 2px 1px 1px #222;
}

js/index.js

//TODO

五、完成

js/index.js

// TODO:请补充代码
const calculator = document.getElementsByClassName('calculator')[0]
const formula = document.getElementById('formula')
const result = document.getElementById('result')
let str = ''
calculator.addEventListener('click', function (e) {
    //记录当前按的是什么东西
    const indexValue = e.target.innerHTML
    //防止点击的不是计算机按钮
    if (indexValue.length > 2) {
        return
    }
    //如果按的是根号
    if (indexValue === '√') {
        result.value = Math.sqrt(formula.value);
    }
    //如果按的是AC 
    else if (indexValue === 'AC') {
        formula.value = '';
        result.value = '';
    }
    //如果按的是等号
    else if (indexValue === '=') {
        result.value = eval(formula.value.replaceAll(/[÷]/g, '/').replaceAll(/[x]/g, "*"));
    }
    //说明在输入表达式
    else {
        formula.value += indexValue;
    }

})

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

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

相关文章

从贝叶斯派的角度去看L1和L2

前沿 推导的两个角度 带约束条件的优化求解&#xff08;拉格朗日乘子法&#xff09;贝叶斯学派的&#xff1a;最大后验概率 理解的两个角度 贝叶斯学派的角度&#xff0c;L2参数符合高斯先验&#xff0c;L1参数符合laplace先验。从有约束问题角度&#xff0c;用拉格朗日转换…

一“幕”了然 ,平行云助力中车打造“掌上工厂”(文末活动报名)

“全球工业生产效率提高1%&#xff0c;成本降低300亿。” 所以工业界有这样一种说法&#xff0c;叫做“工业领域的1%革命”。 Gartner曾预言&#xff1a;到2021年&#xff0c;将有一半的大型工业公司使用数字孪生技术&#xff0c;而这可以使这些公司的生产有效性提高10%。如今…

rust学习 - 构建mini 命令行工具

rust 的运行速度、安全性、单二进制文件输出和跨平台支持使其成为构建命令行程序的最佳选择。 实现一个命令行搜索工具grep,可以在指定文件中搜索指定的字符串。想实现这个功能呢&#xff0c;可以按照以下逻辑流程处理&#xff1a; 获取输入文件路径、需要搜索的字符串读取文…

基于Alexnet网络实现猫狗数据集分类(Keras框架)

目录 1、作者介绍2、Alexnet网络2.1 网络介绍2.2 AlexNet网络的主要特点 3、基于Alexnet网络实现猫狗数据集分类3.1 猫狗大战数据集3.2 数据集处理3.3 准备工作3.4 训练过程3.4 对比实验3.4.1 HALCON平台下的Alexnet实验3.4.2 HALCON平台下的Resnet-50对比实验3.4.3 HALCON平台…

进程的通信——管道和共享内存

进程间的通信有很多种 管道 匿名管道pipe 命名管道 System V IPC System V 消息队列 System V 共享内存 System V 信号量 POSIX IPC 消息队列 共享内存 信号量 互斥量 条件变量 读写锁 这篇文章主要介绍管道和共享内存 管道 管道内核数据结构&#xff1a;在Linux2.6中 struct …

搭建自动化测试环境

目录 1、安装Python并配置环境变量。2、安装Pycharm开发工具。3、安装Selenium4、安装浏览器&#xff1a;Chrome和Firefox的其中之一。5、浏览器驱动&#xff1a;下载Chrome浏览器驱动或者是Firefox浏览器驱动。6、配置webdriver公众号粉丝福利 自动化测试环境&#xff1a; Pyt…

接口反应慢优化

遇到某个功能&#xff0c;页面转圈好久&#xff0c;需要优化 1.F12 查看接口时间 2.看参数 总共耗时9.6s Waiting for sercer response 时间是2秒 Content Download 7秒 慢在Content Download F12查看接口响应 显示Failed to load response data:Request content was e…

这些10款优秀的交互设计软件,你知道吗?

交互软件可以帮助设计师从“可用性”和“用户体验”的角度优化他们的作品。如果设计师想创建一个令人满意的交互设计作品&#xff0c;一个方便的交互设计软件是必不可少的。 根据设计师的个人喜好和方便&#xff0c;选择易于使用的交互设计软件来完成创建。本文盘点十款易于使…

【P55】JMeter 图形结果(Graph Results)

文章目录 一、图形结果&#xff08;Graph Results&#xff09;参数说明二、准备工作三、测试计划设计 一、图形结果&#xff08;Graph Results&#xff09;参数说明 可以以图形的方式查看和分析相关指标 使用场景&#xff1a;一般在调试测试计划期间用来查看相关指标&#xf…

微信小程序基础使用-请求数据并渲染

小程序基本使用-请求数据并渲染 小程序模板语法-数据绑定 在js中定义数据 Page({data: {isOpen: true,message: hello world!} })小程序的data是一个对象&#xff0c;不同于vue的data是一个函数 在模块中获取使用数据 小程序中使用 {{}} 实现数据与模板的绑定 内容绑定&a…

Qt Quick-QML地图引擎之v4版本(新增3D模型/抗锯齿任意多边形下载)

在上个版本Qt quick-QML地图引擎之v4版本(新增3D模型/高德/谷歌在线/离线预览/多线程离线裁剪下载/区域查询/位置搜索/路径规划)_qt 高德地图离线_诺谦的博客-CSDN博客更新了很多小功能。经过朋友们一致需求建议&#xff0c;所以V4继续优化。 B站视频&#xff1a; Qt Quick-QML…

【办公效率提升】Window10与ubuntu递归列出当前目录及其所有子目录中的文件和文件夹

在Windows操作系统中&#xff0c;没有内置的类似于Ubuntu的"tree"命令的功能。但是&#xff0c;你可以使用以下两种方法来实现相似的功能&#xff1a; 方法一&#xff1a;使用dir命令和递归 你可以使用Windows的内置命令"dir"以及递归参数"/s"来…

前后端交互二、form表单与模板引擎

零、文章目录 前后端交互二、form表单与模板引擎 1、form表单的基本使用 HTML相关知识请参考HTML入门 &#xff08;1&#xff09;表单是什么 表单在网页中主要负责数据采集功能。HTML中的<form>标签&#xff0c;就是用于采集用户输入的信息的&#xff0c;并通过<…

linux PerfCollect收集日志及perfview分析

Perfview&#xff1a;https://github.com/Microsoft/perfview/releases PerfCollect&#xff1a;https://github.com/dotnet/coreclr/blob/master/Documentation/project-docs/linux-performance-tracing.md Linux 环境中运行的 ASP.NET Core应用中收集跟踪 PerfCollect&#…

5.6.1 Ext JS之标签页的关闭和批零关闭

Tab Panel 是包含多个标签页的面板, 这是一种很常用的组件, 类似于浏览器的标签页。关于 Ext JS的Tab Panel的基本使用可以参考: [Ext JS3.9] 标签面板(TabPanel )介绍与开发, 本篇介绍如何关闭单个标签页和批量关闭标签页。 Tab 标签页的可关闭 默认状况下,标签页是无…

Bitmiracle Docotic.Pdf 9.015 Crack

Docotic.Pdf 库是正确的法语和强大的编程和界面&#xff0c;可以让用户和开发人员创建专业和高质量的 PDF 文件&#xff0c;甚至可以阅读和修改那些已经存在的。它具有干净而强大的编程接口&#xff0c;能够帮助用户创建质量非常好的 PDF 文档。在这个库的帮助下&#xff0c;用…

linux log

linux log 一:printk日志级别二:printk打印消息控制printkprintk消息等级查看与修改/etc/rsyslog.conf 一:printk日志级别 数字越小级别越高 二:printk打印消息控制 console_loglevel&#xff1a;只有当printk打印消息的log优先级高于console_loglevel时&#xff0c;才能输出…

C++编译一些常见的错误集锦

目录 1、段错误&#xff08;Segmentation Fault&#xff09; 2、强异常保证&#xff08;strong exception guarantee&#xff09; 3、有效但未定义的状态&#xff08;valid but unspecified state&#xff09; 1、段错误&#xff08;Segmentation Fault&#xff09; &#…

Material—— VAT(Houdini To UE)

目录 一&#xff0c;介绍 二&#xff0c;柔体 二&#xff0c;刚体 一&#xff0c;介绍 VAT是将动画数据存储在纹理中&#xff0c;通过GPU运算来实现动画的技术&#xff1b;VAT纹理包含每个顶点在不同帧的位置信息&#xff0c;而每个像素代表一个顶点在某个时间点的位置&…

Linux项目流程 + 用git将本地代码上传到gitee

目录 前言 一个"进度条"项目 git上传代码 首次上传代码 安装git 克隆仓库连接 将文件传入路径目录 文件上传三板斧 后续提交更新 git实用用法补充 前言 本文将介绍如何使用makefile编写项目并将其上传到git远程仓库。Makefile是一种用于自动化构建、编译…