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 {
.........完整代码请登录后点击上方下载按钮下载查看