这是一款jquery实现简单计算器代码。该jquery计算器使用 Bootstrap 4进行布局,并结合math.js数学库,实现简单的加减乘除和平方,开方等数学计算。
使用方法
在页面中引入bootstrap 4,jquery和math.min.js文件。以及计算器的样式文件style.css和main.js文件。
<link href="path/to/bootstrap-4.0.0-beta.min.css" rel="stylesheet"> <link href="path/to/font-awesome.min.css" rel="stylesheet"> <link href="path/to/style.css" rel="stylesheet"> <script src="path/to/jquery.js"></script> <script src="path/to/bootstrap-4.0.0-beta.min.js"></script> <script src="path/to/math.min.js"></script> <script src="path/to/main.js"></script>
HTML结构
该jquery计算器的HTML结构如下:
<div class="container"> <!-- Rounded switch --> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> <form> <input readonly id="display1" type="text" class="form-control-lg text-right"> <input readonly id="display2" type="text" class="form-control-lg text-right"> </form> <div class="d-flex justify-content-between button-row"> <button id="left-parenthesis" type="button" class="operator-group">(</button> <button id="right-parenthesis" type="button" class="operator-group">)</button> <button id="square-root" type="button" class="operator-group">√</button> <button id="square" type="button" class="operator-group">x²</button> </div> <div class="d-flex justify-content-between button-row"> <button id="clear" type="button">C</button> <button id="backspace" type="button">⌫</button> <button id="ans" type="button" class="operand-group">Ans</button> <button id="divide" type="button" class="operator-group">÷</button> </div> <div class="d-flex justify-content-between button-row"> <button id="seven" type="button" class="operand-group">7</button> <button id="eight" type="button" class="operand-group">8</button> <button id="nine" type="button" class="operand-group">9</button> <button id="multiply" type="button" class="operator-group">×</button> </div> <div class="d-flex justify-content-between button-row"> <button id="four" type="button" class="operand-group">4</button> <button id="five" type="button" class="operand-group">5</button> <button id="six" type="button" class="operand-group">6</button> <button id="subtract" type="button" class="operator-group">−</button> </div> <div class="d-flex justify-content-between button-row"> <button id="one" type="button" class="operand-group">1</button> <button id="two" type="button" class="operand-group">2</button> <button id="three" type="button" class="operand-group">3</button> <button id="add" type="button" class="operator-group">+</button> </div> <div class="d-flex justify-content-between button-row"> <button id="percentage" type="button" class="operand-group">%</button> <button id="zero" type="button" class="operand-group">0</button> <button id="decimal" type="button" class="operand-group">.</button> <button id="equal" type="button">=</button> </div> </div>
该jquery计算器的github地址为:https://github.com/PictureElement/minimal-calculator
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!