JavaScript简单计算器

最新推荐文章于 2022-11-13 16:56:04 发布

Ma-Aici

最新推荐文章于 2022-11-13 16:56:04 发布

阅读量1k

点赞数 1

分类专栏： javaScript 文章标签：计算器 javascript js js计算器

本文链接：https://blog.csdn.net/maaici/article/details/82588446

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用来js写了一个简单的计算器，得益于jquery的便捷性，很少的代码就可以实现。

演示地址：https://maaici.github.io/JS_Calculator/

以下是js源码


//计算结果变量
var resault = 0;
//前一个按下的运算符
var op = "";
//输入的数字是否从头开始
var isNew = false;

$(function () {
    $("#txt").val('0');
    //绑定按钮事件
    //数字输入按钮事件
    $(".number").click(function () {
        if (isNew && this.value != "+/-") {
            $("#txt").val('0');
            isNew = !isNew;
        }
        var currNum = $("#txt").val();
        if (!isNaN(this.value)) //输入的是数字
        {
            if (this.value == 0 && currNum == "0") {
                $("#txt").val('0');
            } else if (this.value != 0 && currNum == "0") {
                $("#txt").val(this.value);
            }
            else {
                $("#txt").val(currNum + this.value);
            }
        } else if (this.value == "+/-")//输入的是负号
        {
            $("#txt").val(0 - parseFloat($("#txt").val()));
        } else if (this.value == "." && currNum.indexOf(".") == -1)//输入的是小数点 并且 当前输入的数字中不包含小数点
        {
            $("#txt").val(currNum + this.value);
        }
    });

    //操作符
    $(".op").click(function () {
        getResault();
        op = this.value;
        isNew = true;
    });

    //cancel （相当于归零操作）
    $("#btn_can").click(function () {
        $("#txt").val("0");
        op = "=";
        isNew = false;
        resault = 0;
    });

    //clean (只清除掉当前输入的数据，不影响上次保存的记录)
    $("#btn_cle").click(function () {
        $("#txt").val("0");
    });

    //del  (删掉前一个输入的数字部分，即在显示框的数字最后一位删掉，如果的话)
    $("#btn_del").click(function () {
        var currStr = $("#txt").val();
        if (currStr.length == 1) {
            $("#txt").val("0");
        } else {
            $("#txt").val(currStr.substr(0, currStr.length - 1));
        }
    });
});

//计算结果
function getResault() {
    //js不能精准表示浮点数，为了保证结果的准确性，先将数字扩大  再将结果缩小
    var zoomNum = 10000;//缩放系数（可以按需调整）
    resault = parseFloat(resault);
    if (op == "+") {
        resault = resault * zoomNum + parseFloat($("#txt").val()) * zoomNum;
        resault = resault / zoomNum;

    } else if (op == "-") {
        resault = resault * zoomNum - parseFloat($("#txt").val()) * zoomNum;
        resault = resault / zoomNum;
    } else if (op == "*") {
        resault = (resault * zoomNum) * (parseFloat($("#txt").val()) * zoomNum);
        resault = resault / zoomNum / zoomNum;
    } else if (op == "/") {
        if (parseFloat($("#txt").val()) == 0) {
            resault = 0;
        } else {
            resault = (resault * zoomNum) / (parseFloat($("#txt").val()) * zoomNum);
        }
    } else {
        resault = $("#txt").val();
    }
    $("#txt").val(resault);
}

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Common</title>
    <style>
        .btn{
            width: 80px;
            height: 50px;
            margin: 5px;
            font-size:18px;
            border-bottom: darkslategrey
        }
    </style>
    <script src="/js/jquery-3.3.1.js"></script>
    <script src="/js/Common.js"></script>
</head>

<body>
    <div style="align-content: center">
        <div>
            <table id="Ca" style="height:100%;width: 600px;display: block">
                <tbody style="background-color: slategrey">
                    <tr>
                        <td colspan="4" style="text-align:center">
                            <h2>简&nbsp单&nbsp计&nbsp算&nbsp器</h1>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="text-align:right">
                            <div style="width:100%">
                                <input type="text" id="txt" style="height:30px;width:360px;margin: 
                                5px;text-align: right;font-size: 26px">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td><input class="btn" type="button" id="btn_can" value="Cancel"></td>
                        <td><input class="btn" type="button" id="btn_cle" value="Clean"></td>
                        <td><input class="btn" type="button" id="btn_del" value="Del"></td>
                        <td><input class="btn op" type="button" id="btn_add" value="+"></td>
                    </tr>
                    <tr>
                        <td><input class="btn number" type="button" id="btn_1" value="1"></td>
                        <td><input class="btn number" type="button" id="btn_2" value="2"></td>
                        <td><input class="btn number" type="button" id="btn_3" value="3"></td>
                        <td><input class="btn op" type="button" id="btn_reduce" value="-"></td>
                    </tr>
                    <tr>
                        <td><input class="btn number" type="button" id="btn_4" value="4"></td>
                        <td><input class="btn number" type="button" id="btn_5" value="5"></td>
                        <td><input class="btn number" type="button" id="btn_6" value="6"></td>
                        <td><input class="btn op" type="button" id="btn_x" value="*"></td>
                    </tr>
                    <tr>
                        <td><input class="btn number" type="button" id="btn_7" value="7"></td>
                        <td><input class="btn number" type="button" id="btn_8" value="8"></td>
                        <td><input class="btn number" type="button" id="btn_9" value="9"></td>
                        <td><input class="btn op" type="button" id="btn_c" value="/"></td>
                    </tr>
                    <tr>
                        <td><input class="btn number" type="button" id="btn_f" value="+/-"></td>
                        <td><input class="btn number" type="button" id="btn_0" value="0"></td>
                        <td><input class="btn number" type="button" id="btn_point" value="."></td>
                        <td><input class="btn op" type="button" id="btn_as" value="="></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

以上是全部代码，发现bug请告诉我哦。

Ma-Aici

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简单计算器

用来js写了一个简单的计算器，得益于jquery的便捷性，很少的代码就可以实现。演示地址：https://maaici.github.io/JS_Calculator/以下是js源码//计算结果变量var resault = 0;//前一个按下的运算符var op = "";//输入的数字是否从头开始var isNew = false;$(functio...
复制链接

扫一扫