css 创建科学计算器

CSS 可以帮助我们创建漂亮的界面。这篇文章将演示如何使用 CSS 创建科学计算器。

/* 以下是基本的 HTML 结构 */div class="calculator">
      div class="screen">
    /div>
      button class="number">
    1/button>
      button class="number">
    2/button>
      button class="number">
    3/button>
      button class="operator">
    +/button>
      button class="number">
    4/button>
      button class="number">
    5/button>
      button class="number">
    6/button>
      button class="operator">
    -/button>
      button class="number">
    7/button>
      button class="number">
    8/button>
      button class="number">
    9/button>
      button class="operator">
    */button>
      button class="number">
    0/button>
      button class="decimal">
    ./button>
      button class="clear">
    C/button>
      button class="operator">
    //button>
      button class="calculate">
    =/button>
    /div>

我们首先定义整个计算器的样式：

.calculator {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
     /* 分为四列 */  grid-template-rows: repeat(5, 1fr);
     /* 分为五行 */  width: 400px;
      height: 500px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
 /* 添加投影效果 */}
.screen {
      grid-column: 1 / span 4;
     /* 横跨整行 */  text-align: right;
      padding-right: 10px;
      font-size: 2rem;
      background-color: #f5f5f5;
      border-radius: 5px;
}
button {
      border: none;
      background-color: #eee;
      color: #333;
      font-size: 1.5rem;
      border-radius: 5px;
      cursor: pointer;
      user-select: none;
 /* 禁止选择内容 */}
/* 数字按钮 */.number {
      grid-column: span 1;
      grid-row: span 1;
}
/* 操作符按钮 */.operator {
      grid-column: span 1;
      grid-row: span 2;
}
/* 等于号按钮 */.calculate {
      grid-column: span 2;
      grid-row: span 2;
}
/* 清除按钮 */.clear {
      grid-column: span 1;
      grid-row: span 1;
}
/* 小数点按钮 */.decimal {
      grid-column: span 1;
      grid-row: span 1;
}
    

最后，我们将使用 JavaScript 来让这个计算器能够计算数学表达式并更新屏幕。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！