jquery实现简单计算器特效

当前位置:主页 > jQuery库 > 工具类 > jquery实现简单计算器特效
jquery实现简单计算器特效
分享:

    插件介绍

    这是一款jquery实现简单计算器代码。该jquery计算器使用 Bootstrap 4进行布局,并结合math.js数学库,实现简单的加减乘除和平方,开方等数学计算。

    浏览器兼容性

    浏览器兼容性
    时间:2017-12-27
    阅读:
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
简要教程

这是一款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

网友评论