react实现一个数学计算器代码-html代码-BFW代码库

react实现一个数学计算器代码

代码语言：html

所属分类：其他

代码描述：react实现一个数学计算器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
:root {
 --black: #1e1a1d;
 --white: #ecebf3;
 --equal: #17b890;
 --keys: #d4d2d5;
}

html {
 box-sizing: border-box;
}

*,
*::before,
*::after {
 box-sizing: inherit;
}

body {
 align-items: center;
 background-color: var(--white);
 color: var(--black);
 display: flex;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 height: 100vh;
 margin: 0;
 justify-content: center;
}

button {
 border: 0;
 border-radius: 0;
 background-color: transparent;
 outline: none;
}

button:hover,
button:active,
button:focus {
 outline: none;
}

.calculator {
 border-radius: 12px;
 box-shadow: 0 0 42px 0 rgba(0, 0, 0, 0.25);
 max-width: 15rem;
 min-width: 15rem;
 overflow: hidden;
}

.calculator__display {
 background-color: var(--black);
 color: var(--white);
 font-size: 1.75rem;
 padding: 0.75rem;
 text-align: right;
}

.calculator__keys {
 background-color: var(--keys);
 display: grid;
 grid-gap: 1px;
 grid-template-columns: repeat(4, 1fr);
}

.calculator__keys > * {
 background-color: var(--keys);
 padding: 0.75rem 1.25rem;
}

.key--operator {
 background-color: var(--key--operator);
}

button[data-action="calculate"] {
 background-color: var(--equal);
 grid-column: -2;
 grid-row: 2 / span 4;
}
</style>



</head>

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

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script>
      <script type="text/babel" >
function CalculatorDisplay({ display }) {
 return <div className="calculator__display">{display}</div>;
}

function CalculatorKey({ operator, action, text, clickHandler }) {
 return (
  <button
   className={operator ? "key--operator" : ""}
   data-action={action ? action : ""}
   onClick={clickHandler}
  >
   {text}
  </button>
 );
}

function CalculatorKeys({ clickHandler }) {
 return (
      <div className="calculator__keys">
      <CalculatorKey
        operator={true}
        keyId="add"
        action="add"
        text="+"
        clickHandler={clickHandler}
      />
      <CalculatorKey
        operator={true}
        keyId="subtract"
        action="subtract"
        text="-"
        clickHandler={clickHandler}
      />
      <CalculatorKey
        operator={true}
        keyId="multiply"
        action="multiply"
        text="&times;"
        clickHandler={clickHandler}
      />
      <CalculatorKey
        operator={true}
        keyId="divide"
        action="divide"
        text="%"
        clickHandler={clickHandler}
      />
      <CalculatorKey keyId="seven" text="7" clickHandler={clickHandler} />
      <CalculatorKey keyId="eight" text="8" clickHandler={clickHandler} />
      <CalculatorKey keyId="nine" text="9" clickHandler={clickHandler} />
      <CalculatorKey keyId="four" text="4" clickHandler={clickHandler} />
      <CalculatorKey keyId="five" text="5" clickHandler={clickHandler} />
      <CalculatorKey keyId="six" text="6" clickHandler={clickHandler} />
      <CalculatorKey keyId="one" text="1" clickHandler={clickHandler} />
      <CalculatorK.........完整代码请登录后点击上方下载按钮下载查看