用React做一个新拟态计算器

最新推荐文章于 2024-01-12 15:25:57 发布
最新推荐文章于 2024-01-12 15:25:57 发布
阅读量808 收藏 9
点赞数 4
分类专栏： web 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46590483/article/details/125323040
版权

React Calculator

首先，先看成果(codepen)：

react-calculator.png

项目中我使用到的技术：

  • HTML、CSS、JavaScript三件套
  • React
  • SCSS

本项目是freeCodeCamp上的其中一个前端开发库项目，推荐自学的同学去免费学习编程 - Python、JavaScript、Java、Git 等 (freecodecamp.org)

这个计算器项目需求很清晰，具体可看：前端开发库项目 - 构建一个 JavaScript 计算器 | 学习 | freeCodeCamp.org

这里列出我的大致需求：

  1. 计算器要有最基本的按钮，比如AC、=、0-9这10个数字按钮、+ - * / 按钮、小数点.；
  2. 其次，计算器要有展示数据计算过程的地方，一个实时输入区，一个暂存区。
  3. 按下数字可以在实时输入区输入数字
  4. AC可以初始化实时输入区和暂存区的内容，即0
  5. 加、减、乘、除操作的功能实现，需要和=一起实现
  6. 如果在按下 = 符号后继续按一个运算符，则应该在上一次计算结果的基础上进行新的计算。
  7. - 不仅是减号，也可以作为负数符号
  8. . 实现小数功能
  9. 最后需要注意的是，本计算器项目选用的是立即执行逻辑！

CodePen

我这里选择使用codepen，它可以非常方便的调试页面，还能够很方便的引入第三方框架，而且可以免费使用！

首先，需要创建账户，然后新建一个普通的pen。
接着需要进行设置和引入项目需要的第三方库：

  • 打开设置，将css编译器设置为SCSS。
  • 由于要使用react，所以要将js编译器设置为Bable。
  • 之后在 Add External Scripts/Pens里搜索并加入 react 和 react-dom 。

至此，项目的基本设置完成。

HTML架构

由于使用的是React，所以HTML只需要给个div标签挂载上去即可。

这里我将 id 设为

<div id="app"></div>

CSS样式

按钮宽度和长度都是有比例关系的，很适合使用grid布局，目前主流浏览器都支持grid布局。按钮是5*4的布局，每个按钮宽度为父元素的25%，高度设置为70px；

.btn-box {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(5, 70px);
}

其他样式可以自由发挥，这里就不细讲了；

新拟态风格代码可以参考：neumorphism.io，可以按照自己的喜好来。

这里贴上我的scss代码：

body {
  background-color: #2233dd;
}
#app {
  height: 95vh;
  display:flex;
  align-items: center;
  justify-content: center;
}
.app {
  user-select: none;
  background: #2233dd;
  box-shadow:  20px 20px 53px #1a27aa,
             -20px -20px 53px #2a3fff;
  width: 320px; 
  border-radius: 5px;
  border: 5px solid #23d;
  color: white;
  .btn-box {
    display: grid;
    margin-top: 5px;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(5, 70px);
    button {
      cursor: pointer;
      border: none;
      outline: none;
      border-radius: 0px;
      background: #e0e0e0;
      padding: 5px 10px;
      background-color: #23d;
      color: white;
      font-size: 24px;
      box-sizing: border-box;
      &:active {
        box-shadow: inset 5px 5px 16px #1e2cc0,inset -5px -5px 16px #263afa;
      }
      &:hover {
        border: 1px solid #55f;
        // border-radius: 5px;
        background: linear-gradient(145deg, #23d, #1f2ec7);
      }
      &#clear {
        grid-column-start: span 2;
      }
      &#zero {
         grid-column-start: span 2;
      }
      &#equals {
         grid-row-start: span 2;
      }
      &#subtract, &#add, &#equals {
        border-left: 1px solid rgba(100,100,240, 1);
      }
      &#clear, &#divide {
        border-bottom: 1px solid rgba(100,100,240, 1);
      }
    }
  }
  .show {
    text-align: right;
  }
  .stag-area {
    // padding: 5px 0;
    font-size: 14px;
    color: #aaa;
  }
  .input-area {
    font-size: 22px;
    padding: 5px 0;
    border-bottom: 1px solid #66f;
  }
}

具体代码也可以去我的codepen查看。

React架构

首先，创建Calculator组件类进行计算器的渲染，包括实时输入区、暂存区以及所有的按钮。
同时，设置state保存必要的数据:

  • input保存当前输入的数字或运算符，即实时输入区的内容。
  • stag保存暂存区的数据
  • operator保存当前所使用的运算符
  • isCalculated保存是否已经计算
  • isNegative保存-是负号还是运算符

全局变量operat保存所有的运算符和0（0比较特殊，由于要做的计算器是立即执行逻辑，按下运算符时要判断是否已经计算过。如果是计算过的结果显示在实时输入区，那么这时按下0就不是在数字后面加个0，而是将整个实时输入区变为0）。

这里没有把button当做一个子组件来写，因为封装成一个子组件

最后使用render函数将DOM渲染进页面：ReactDOM.render(<Calculator />,document.getElementById("app"));

/* globals React, ReactDOM */
const operat = ['+','-','/','x','0'];
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '0',
      stag: '0',
      operator: '',
      isCalculated: false,
      isNegative: false
    }
  }
  render() {
    return (
      <div className="app">
        <div className="stag-area show">{ this.state.stag }</div>
        <div className="input-area show" id="display">{ this.state.input }</div>
        <div className="btn-box">
          <button id="clear">AC</button>
          <button id="divide">/</button>
          <button id="multiply">x</button>
          
          <button id="seven">7</button>
          <button id="eight">8</button>
          <button id="nine">9</button>
          <button id="subtract">-</button>
          
          <button id="four">4</button>
          <button id="five">5</button>
          <button id="six">6</button>
          <button id="add">+</button>
          
          <button id="one">1</button>
          <button id="two">2</button>
          <button id="three">3</button>
          <button id="equals">=</button>
          
          <button id="zero">0</button>
          <button id="decimal">.</button>
        </div>
      </div>
    )
  }
}
// 渲染DOM
ReactDOM.render(<Calculator />,document.getElementById("app"));

按钮点击事件

接下来为每个按钮添加事件。

数字 1-9

首先，1-9这9个数字的逻辑是一样的，点击直接输入对应的数字；反映在实时输入区就是在数字后面添加对应的字符。 在Calculator类中添加函数getNumber(number) { } ：

getNumber(number) {
  this.setState({
    input: number,
  })
}

并且为这9个数字按钮添加对应的点击事件，如：onClick={ ()=> this.getNumber('9') } 。需要注意的是，需要绑定this的指向：this.getNumber = this.getNumber.bind(this);

加、减、乘、除按钮

因为四则运算都是二元运算符，所以它们的逻辑是相通的，即按下加/减/乘/除按钮后，将之前的数字保存到暂存区，然后等待第二个数字输入之后点击=之后进行计算。

细节：点击按钮后，暂存区的文字是第一个数字+运算符，输入区也变成该运算符，并且将对应的this.operator标记为该运算符，代码如下：

add() {
  this.setState(state => {
    return { 
      input: '+',
      stag: state.input + '+',
      operator: '+'
    }
  })
}
subtract() {
  this.setState(state => {
    return { 
      input: '-',
      stag: state.input + '-',
      operator: '-'
    }
  })
}
multiply() {
  this.setState(state => {
    return { 
      input: 'x',
      stag: state.input + 'x',
      operator: '*'
    }
  })
}
divide() {
  this.setState(state => {
    return { 
      input: '/',
      stag: state.input + '/',
      operator: '/'
    }
  })
}

最后，不要忘了为这4个按钮添加对应的点击事件和绑定this的指向！

实现四则运算

加、减、乘、除按钮点击事件写好后，就需要写=的点击事件，所有的运算都在该点击事件里。

根据this.operator的值判断运算类型，分类进行运算，按下=后进行运算，运算结果显示在实时输入区和暂存区，并标记为已运算isCalculated: true：

 calculator() {
    const num2 = parseFloat(this.state.input);
    const num1 = parseFloat(this.state.stag);
    switch(this.state.operator) {
      case '+': this.setState(state => {
        const ans = num1 + num2;
        return {
          input: ans,
          stag: state.stag + state.input + '=' + ans,
          isCalculated: true
        }
      });
        break;
      case '-': this.setState(state => {
        const ans = num1 - num2;
        return {
          input: ans,
          stag: state.stag + state.input + '=' + ans,
          isCalculated: true
        }
      });
        break;
      case '/': this.setState(state => {
        const ans = num1 / num2;
        return {
          input: ans,
          stag: state.stag + state.input + '=' + ans,
          isCalculated: true
        }
      });
        break;
      case '*': this.setState(state => {
        const ans = num1 * num2;
        return {
          input: ans,
          stag: state.stag + state.input + '=' + ans,
          isCalculated: true
        }
      });
        break;
      default: break;
  }
}

清除按钮

AC按钮会将一切重置为初始状态：

clearInput() {
  this.setState({
    input: '0',
    stag: '0',
    operator: '',
    isCalculated: false,
    isNegative: false
  })
}

按钮0

getZero(){
  if(this.state.isCalculated || this.state.input !== '0' ) {
    // 如果是运算过的或者是0，则按下0，实时输入区应直接变为0
    this.setState({
      input: '0',
      isCalculated: false
    })
  } else {
    // 正常情况下直接在后面加0
    this.setState(state => ({
      input: state.input + '0',
      isCalculated: false
    }))
  }
}

最后，为这个按钮添加对应的点击事件和绑定this的指向！

立即执行逻辑

现在我们的计算器应用已经可以进行简单的四则运算了！但是，计算器需要支持立即执行逻辑，即类似于9/3+4的运算，现在，我们的计算器并不能支持这种运算。

为了支持立即执行逻辑，就需要重写四则运算的按钮点击事件，判断一下是否要进行计算再进行后续操作，这里我的代码写的有点粗糙（能运行就行🤪）：

add() {
  if((this.state.stag.indexOf('+') > -1 || this.state.stag.indexOf('-') > -1 || this.state.stag.indexOf('/') > -1 || this.state.stag.indexOf('x') > -1) && this.state.stag.indexOf('=') === -1) {
    this.calculator();
    this.setState(state => {
      return { 
        input: '+',
        stag: state.input + '+',
        operator: '+'
      }
    })
  } else {
    this.setState(state => {
      return { 
        input: '+',
        stag: state.input + '+',
        operator: '+'
      }
    })
  }
}
// ... ...

- 不仅是减号，也可以作为负数符号

需要在按下-时进行判断,如果之前已经有按下过四则运算的按钮，那么这次按下-就代表是将数字变为负数而不需要后续操作(return)：

if(operat.includes(this.state.input)) {
  this.setState(state => ({
    isNegative: !state.isNegative
  }))
  return;
}

除了是-这个特殊情况外，在多次按下+ / *按钮只需要取最后一次按下的运算符作为最终的运算符即可！

例如在除法运算函数前加入判断，其它同理：

if(operat.includes(this.state.input)) {
  this.setState(state => ({
    input: '/',
    stag: state.stag.slice(0,-1) + '/',
    operator: '/',
    isNegative: false
  }))
  return;
}

实现小数功能

最后，考虑 . 小数功能；

首先写.按钮点击函数，当是已经计算过了，点击.就直接变成0.即可；然后，当输入框内是数字且没有.时，即可将.直接添加到末尾。

getDecimal() {
  if(this.state.isCalculated) {
    this.setState({
      input: '0.',
      isCalculated: false
    })
  } else if(Number.isInteger(+this.state.input) && this.state.input.indexOf('.') === -1) {
    this.setState(state => ({
      input: state.input + '.'
    }))
  }
}

接着，需要重写=的点击函数，用于兼容有小数的情况，加个if判断是否为整数即可：

calculator() {
  let num1,num2;
  if(this.state.stag.indexOf('.') > -1) {
    num2 = parseFloat(this.state.input);
    num1 = parseFloat(this.state.stag);
  } else {
    num2 = parseInt(this.state.input);
    num1 = parseInt(this.state.stag);
  }
  switch(this.state.operator) {
    case '+': this.setState(state => {
      return {
        input: num1 + num2,
        stag: state.stag + state.input + '=' + (num1 + num2),
        isCalculated: true
      }
    });
      break;
    case '-': this.setState(state => {
      return {
        input: num1 - num2,
        stag: state.stag + state.input + '=' + (num1 - num2),
        isCalculated: true
      }
    });
      break;
    case '/': this.setState(state => {
      const ans = num1 / num2;
      return {
        input: ans,
        stag: state.stag + state.input + '=' + ans,
        isCalculated: true
      }
    });
      break;
    case '*': this.setState(state => {
      const ans = num1 * num2;
      return {
        input: ans,
        stag: state.stag + state.input + '=' + ans,
        isCalculated: true
      }
    });
      break;
    default: break;
  }
}

到这里，基本的功能已经全都实现，测试案例全部通过！🎉
image.png

最后的最后，完整代码可以在CodePen找到。

kart jim
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
React小项目-在线计算器（下）
一只快乐的小蒟蒻~
09-13 312
React小项目-在线计算器（下）
使用CodePen编写react代码
进阶的博客
09-29 2613
开篇题外话： CodePen是一个在线编辑前端代码的网站，对于前端小白来说非常好用，除了可以同时编辑html、css、js之外，可以实时的看到编写网页的样子，真的很方便。 CodePen网站链接：https://codepen.io 这里有一篇博文，虽然没有仔细看，但觉得还不错，可以参考看一下：codepen学习 ————————————————————————分割线———————————————————————— 这是一篇记录型博文，主要还是为了方便自己日后再使用CodePen编写react代码
用React实现计算器
m0_73798989的博客
04-07 589
用React实现计算器
React小项目-在线计算器（上）
一只快乐的小蒟蒻~
09-11 573
React小项目-在线计算器（上）
React 项目：计算器
qq_35273097的博客
10-12 501
React 简单项目：计算器
react-calculator:用React创建一个简单的计算器
05-22
用React创建一个简单的计算器 目录 现场演示 安装 您可以获得存储库的本地副本，请在终端上运行以下命令： $ cd $ git clone https://github.com/Ceci007/react-calculator.git 运行npm install ，然后在终端中...
react-calculator:一个React实现的计算器
05-19
React计算器一个React实现的计算器安装 npm install --save react-calculator用法 import React from 'react' ;import Calculator from 'react-calculator' ;React . render ( < Calculator> , document . ...
React-Calculator：一个使用react和CSS的简单计算器
02-18
React-Calculator是一个基于React库和CSS构建的简易计算器项目，旨在帮助开发者理解如何在实际应用中结合React组件化思想和CSS样式设计。这个项目展示了如何使用JavaScript（特别是ES6语法）来实现React组件，以及...
react-一个使用react和redux实现的仿iphone6s计算器
08-14
在本文中，我们将深入探讨如何使用React和Redux构建一个仿iPhone 6s计算器的应用。React是一个流行的JavaScript库，用于构建用户界面，而Redux则是一种可预测的状态管理工具，常与React一起使用，以管理和同步应用...
React Native 计算器和计算器输入组件
06-08
React Native Calculator 简单的 React Native 计算器和计算器输入组件。 安装使用 npm: npm i -S react-native-calculator 或 yarn: yarn add react-native-calculator Demo Calculator Component Usage import ...
基于React制作计算器实例
07-24
基于React制作计算器实例是一款使用React框架制作简单的加减乘除计算器，支持输入公式计算结果效果代码。
react-calculator:用React构建的简单计算器
04-22
计算器 这是该项目的第一个里程碑 建于 React Java脚本 代码 现场演示 入门 这是一个示例，说明如何指导您在本地设置项目。 修改此文件以匹配您的项目，删除不适用的部分。 例如：如果当前项目不需要测试，则删除测试部分。 要启动并运行本地副本，请遵循以下简单的示例步骤。 先决条件 设置 安装 用法 运行测试 部署方式 作者 :bust_in_silhouette: 塔希（Tahiry RANDRIAMIARINTSOA） GitHub： 推特： 领英（ LinkedIn） :handshake: 贡献 欢迎提供文稿，问题和功能要求！ 表示支持 给一个 :star: 如果您喜欢这个项目！ fs :memo: 执照 该项目是麻省理工学院许可的。
Web学习（十）React实战-计算器
May the Force be with you
06-10 328
Web学习（十）React实战-计算器
react实现简单的计算器功能。
m0_47074226的博客
03-31 2395
用react生命周期实现计算器，加上Css美化页面。
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果！前端开发网页设计基础入门教程！超简单~
南北极之间
08-16 623
web前端特效源码】Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果！
react实现一个简单的计算器
F_super的博客
10-10 499
react实现一个计算器
React 实现一个计数器
且听风吟的博客
05-04 375
React 实现一个计数器
使用CodePen的10个ReactJS编程练习（包括练习和解决方案）
u011082575的博客
09-25 73
原始地址：https://dev.to/frontendengineer/10-reactjs-coding-exercises-with-codepen-exercise-and-solution–22k7。如果您需要熟悉您的ReactJS技能，您可以尝试回答下面的练习，或者单击下面的视频以进行交互式的逐步指导。（没有废话，快速、直接到点，因为我非常尊重/重视您的时间）我决定通过创建codepen练习📝和一个视频📺来完善这个系列，以便代码遵循技术面试问题。此外，还添加了下面列出的练习的潜在解决方案。
react从构建到实现小计算器到路由(基础篇)
最新发布
ZerZhang的博客
01-12 721
react从构建到实现小计算器到路由(基础篇)
使用react实现一个简易计算器用两个input
04-01
和四个按钮，实现加减乘除四则运算。 以下是一个使用React实现的简易计算器代码： ```jsx import React, { useState } from 'react'; function Calculator() { const [num1, setNum1] = useState(''); const [num2, setNum2] = useState(''); const [result, setResult] = useState(0); const handleNum1Change = (event) => { setNum1(event.target.value); }; const handleNum2Change = (event) => { setNum2(event.target.value); }; const handleAddClick = () => { setResult(Number(num1) + Number(num2)); }; const handleSubtractClick = () => { setResult(Number(num1) - Number(num2)); }; const handleMultiplyClick = () => { setResult(Number(num1) * Number(num2)); }; const handleDivideClick = () => { setResult(Number(num1) / Number(num2)); }; return ( <div> <input type="number" value={num1} onChange={handleNum1Change} /> <input type="number" value={num2} onChange={handleNum2Change} /> <br /> <button onClick={handleAddClick}>+</button> <button onClick={handleSubtractClick}>-</button> <button onClick={handleMultiplyClick}>*</button> <button onClick={handleDivideClick}>/</button> <br /> Result: {result} </div> ); } export default Calculator; ``` 该代码定义了一个名为`Calculator`的组件，其中使用了React的`useState`钩子来管理状态。组件渲染了两个`input`元素和四个按钮，分别对应加、减、乘、除四种运算。每个按钮都绑定了一个点击事件，当用户点击时，组件会根据输入的两个数字进行相应的计算，并将结果显示在页面上。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值