这是一款简单的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之家,转载请注明出处:http://www.htmleaf.com/jQuery/Layout-Interface/201708314714.html
下一篇:纯js实现电子时钟特效
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!