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

目录

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


一、介绍

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

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

二、准备

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

├── 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;
    }

})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

element-plus布局排版问题总结(更新ing)

文章目录 el-container空隙修改app组件 el-header容器空隙检查前端修改el-headerel-container el-container空隙 源码-更改了容器的显示&#xff0c;占满屏幕 <template><div class"common-layout"><el-container><el-header><el-row cl…

SpeechGen:用提示解锁语音语言模型(Speech LM)的生成能力

论文链接&#xff1a; https://arxiv.org/pdf/2306.02207.pdf Demo: https://ga642381.github.io/SpeechPrompt/speechgen.html Code: https://github.com/ga642381/SpeechGen 引言与动机 大型语言模型 &#xff08;LLMs&#xff09;在人工智能生成内容&#xff08;AIGC…

微服务技术简介

微服务技术简介 服务架构的演变微服务架构的常见概念微服务常见的解决方案Spring CloudSpring Cloud Alibaba微服务技术对比常用的微服务组件 微服务架构图 服务架构的演变 单体架构&#xff1a;当一个系统业务量很小的时候&#xff0c;将业务的所有功能集中在一个项目中开发&…

STM32速成笔记—串口通信

文章目录 一、什么是串口通讯二、串口通讯有什么用三、STM32的串口通信四、串口通信相关概念4.1 波特率4.2 全双工和半双工4.3 同步通信和异步通信 五、硬件连接六、串口通讯程序配置6.1 使能串口时钟和GPIO时钟6.2 初始化GPIO6.3 初始化串口参数6.4 使能串口6.5 串口接收中断6…

用python写网络爬虫

第二章 数据抓取 首先 &#xff0c; 我们会介绍一个叫 做Firebug Lite 的浏览器扩展&#xff0c; 用 于检查网页 内容 &#xff0c; 如 果你有一些网络开发背景的话&#xff0c; 可能 己经对该扩展十分熟悉 了 。 然后 &#xff0c;我们会介绍三 种抽取网 页数据的 方法 &…

java【抽象类与接口】

抽象类与接口 1 抽象类1.1 定义与使用1.2 抽象类和抽象方法使用原则 2 接口2.1 定义2.2 使用规则 3. JDK中内置接口3.1 Comparable接口3.2 Cloneable接口 抽象类与接口的对比 前言&#xff1a;如果强制要求子类必须覆写一些方法&#xff0c;则就会用到抽象类和抽象方法 1 抽象类…

使用 MATLAB 进行气象激光雷达图像分析(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

STM32——01-开发软件Keil5及STM32CubeMX的安装

1.1开发环境的安装 编程语言&#xff1a;C语言 需要安装的软件有两个&#xff1a;Keil5和STM32CubeMX 安装 安装包&#xff08;不需要太新&#xff0c;以 MDK324 为例&#xff0c;最新的 MDK327 有问题&#xff09; 安装过程一路下一步即可&#xff08;建议不要安装在 C …

2023-06-09:什么是Redis事务?原理是什么?

2023-06-09&#xff1a;什么是Redis事务&#xff1f;原理是什么&#xff1f; 答案2023-06-09&#xff1a; Redis中的事务是以一组命令的形式出现的&#xff0c;这些命令被认为是最小的执行单位。事务可以保证在一个单独独立的隔离操作中执行所有命令&#xff0c;而且所有命令…

深度研究微软的资产负债表和财务状况以及未来投资价值

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 微软股票的关键指标 猛兽财经认为&#xff0c;微软公布的2023财年第三季度财务业绩&#xff0c;有三个关键指标值得投资者关注。 第一个关键指标是利息收入。微软的利息收入目前已经同比增长了44%&#xff0c;从2022财年第…

从搭建hadoop开始学习大数据中分而治之的MapReduce(伪集群模式)

环境准备 首先需要将如下四个必要的文件下载到计算机&#xff08;已经附上了下载地址&#xff0c;点击即可下载&#xff09;。 Vmware Workstation 17.x 【官方的下载地址】 CentOS-7-x86_64-Minimal-2009【阿里云镜像站下载地址】 openjdk-8u41-b04-linux-x64-14_jan_2020【开…

踏上极速向未来之旅!——2023年量化科技嘉年华·专场回顾

2023年6月2日—3日&#xff0c;“2023量化科技嘉年华”在上海世博中心召开&#xff0c;这场为期两天的量化科技盛会&#xff0c;多方位呈现了量化科技创新成果&#xff0c;吸引了众多关注。 在嘉年华的第二天&#xff0c;多场主题论坛同步进行。 由华锐技术主办的“极速向未来…

ChatGPT 4 的 6 个最佳使用场景

作者&#xff1a;SYDNEY BUTLER 译者&#xff1a;明明如月 无论是在 ChatGPT 中还是通过 API&#xff0c;对 OpenAI 的 GPT-4 模型的访问比 GPT-3.5 限制更多。这意味着你需要慎重考虑在何种情况下使用 GPT-4&#xff0c;并选择性地将最适合的任务交给它&#xff0c;以便让其发…

短视频seo源代码部署步骤

一、 部署短视频SEO矩阵系统源代码&#xff0c;您需要遵循以下步骤&#xff1a; 准备服务器环境 首先&#xff0c;您需要准备一个服务器环境来托管源代码。您可以选择云服务器&#xff08;例如AWS&#xff0c;阿里云等&#xff09;或自己的私人服务器。 安装所需软件 在服务器…

Hbase

Hbase 思考环节&#xff1a; 1.什么是hbase 1.1简介 HBase 是一个面向列式存储的分布式数据库&#xff0c;其设计思想来源于 Google 的 BigTable 论文。 HBase 底层存储基于 HDFS 实现&#xff0c;集群的管理基于 ZooKeeper 实现。 HBase 良好的分布式架构设计为海量数据的…

图神经网络 GNN 入门

参考链接 A Gentle Introduction to Graph Neural Networks (distill.pub) 零基础多图详解图神经网络&#xff08;GNN/GCN&#xff09;【论文精读】_哔哩哔哩_bilibili 目录 图的基本构成 图的表示方法 图的示例 图网络的基本任务 图网络的处理 影响图网络效果的超参数 …

快速创建Django项目

环境搭建 安装Django之前需要先安装python环境和pycharm。 目前 Django 1.6.x 以上版本已经完全兼容 Python 3.x。 python安装教程&#xff1a;https://blog.csdn.net/David_house/article/details/100110542 项目创建 打开pycharm&#xff0c;选择文件–>新建项目 创建D…

HUAWEI悦盒ec6108v9c 如何刷成海纳思系统(家用低功耗服务器,使用Home Assistant服务)

环境&#xff1a; 1.HW悦盒ec6108v9c一套 2.16G U盘 3.格式化软件USB_format.exe 4.固件 mv100-mdmo1g-usb-flash.zip&#xff08;底层是Ubuntu 20.04系统&#xff09; 5.十字螺丝刀 6.翘片/薄铲子 7.有线网络环境 8.镊子/回形针 问题描述&#xff1a; 最近玩智能家居…

【Linux】基本指令,拥抱Linux的第一步

[Linux]常见指令 Linux基本指令指令的本质ls指令pwd指令cd指令touch指令mkdir指令(重要)rmdir&&rm指令(重要)man指令&#xff08;重要&#xff09;cp指令&#xff08;重要&#xff09;mv指令&#xff08;重要&#xff09;重定向cat指令more指令less指令&#xff08;重要…

Android Retrofit 给你的接口加上缓存

转载请注明出处&#xff1a;https://blog.csdn.net/kong_gu_you_lan/article/details/131200501?spm1001.2014.3001.5501 本文出自 容华谢后的博客 往期回顾&#xff1a; Android Retrofit RxJava使用详解 Android 探讨一下Retrofit封装的最佳姿势 Android 谈谈我所理解的…