其他代码
jquery实现简单计算器特效
PetitQ
这是一款 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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
