简单的Material Design风格计算器

这是一款简单的Material Design风格计算器。该计算器支持加减乘除和乘方开方运算。它使用简单，效果炫酷。

安装

可以通过bower或npm来安装该计算器插件。

bower install material_calculator
npm i material_calculator
                

使用方法

在页面的head中引入bootstrap.min.css，creative.min.css以及谷歌Roboto字体文件。

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/creative.min.css">
                

在页面底部引入jquery，bootstrap.min.js和calculate.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/calculate.js"></script>          
                

HTML结构

该计算器的基本HTML结构如下：

<div class="container">
  <div class="col-md-4 col-md-offset-4 calculator" align="center">
    <div class="row displayBox">
      <p class="displayText" id="display">0</p>
    </div>
    <div class="row numberPad">
      <div class="col-md-9">
        <div class="row">
          <button class="btn clear hvr-back-pulse" id="clear">C</button>
          <button class="btn btn-calc hvr-radial-out" id="sqrt">√</button>
          <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="square">x<sup>2</sup></button>
        </div>
        <div class="row">
          <button class="btn btn-calc hvr-radial-out" id="seven">7</button>
          <button class="btn btn-calc hvr-radial-out" id="eight">8</button>
          <button class="btn btn-calc hvr-radial-out" id="nine">9</button>
        </div>
        <div class="row">
          <button class="btn btn-calc hvr-radial-out" id="four">4</button>
          <button class="btn btn-calc hvr-radial-out" id="five">5</button>
          <button class="btn btn-calc hvr-radial-out" id="six">6</button>
        </div>
        <div class="row">
          <button class="btn btn-calc hvr-radial-out" id="one">1</button>
          <button class="btn btn-calc hvr-radial-out" id="two">2</button>
          <button class="btn btn-calc hvr-radial-out" id="three">3</button>
        </div>
        <div class="row">
          <button class="btn btn-calc hvr-radial-out" id="plus_minus">±</button>
          <button class="btn btn-calc hvr-radial-out" id="zero">0</button>
          <button class="btn btn-calc hvr-radial-out" id="decimal">.</button>
        </div>
      </div>
      <div class="col-md-3 operationSide">
        <button id="divide" class="btn btn-operation hvr-fade">÷</button>
        <button id="multiply" class="btn btn-operation hvr-fade">×</button>
        <button id="subtract" class="btn btn-operation hvr-fade">−</button>
        <button id="add" class="btn btn-operation hvr-fade">+</button>
        <button id="equals" class="btn btn-operation equals hvr-back-pulse">=</button>
      </div>
    </div>
  </div>
</div>  
                

该Material Design风格计算器插件的github地址为：https://github.com/xxczaki/calculator.js

相关插件

精美的jQuery科学计算器插件

jquery实现简单计算器特效

js实现简单计算器

基于Bootstrap 3的精美jQuery计算器插件