jquery实现计算器功能

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="test.css" />
    </head>

    <body>
        <div class="container">
            <div class="box">
                <div class="input" id="txt">
                    <!-- <span>5</span>-->
                </div>

                <div class="fun">
                    <ul>
                        <li class="store">存储</li>
                        <li class="save">取存</li>
                        <li class="back">退格</li>
                        <li class="del">清屏</li>
                    </ul>
                </div>
                <div class="bottom">
                    <ul class="num">
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>0</li>
                        <li class="point">.</li>
                        <li class="equal">=</li>
                    </ul>
                    <ul class="operation">
                        <li>÷</li>
                        <li>×</li>
                        <li>+</li>
                        <li>-</li>
                    </ul>
                </div>
            </div>
        </div>

        <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //文本框内容
            var $li = $("li");
            var flag = 0;
            $li.each(function() {
                        $(this).click(function() {
                                //获取输入框中的内容
                                var Text = $(".input").text().trim();
                                console.log($(this).text());

                                //判断第一个数是否为0
                                var txt = $(this).text();

                                if(flag == 0) {
                                    txt = txt.replace(/^0*/g, '');
                                    flag = 1;
                                }
                                
                            //    if(txt.match(/0\d{1-9}/)) {

                                    //if(Text.match(/^0*/g))

                                    //判断小数点，最多只能有一个小数点
                                    if($(this).text() == ".") {
                                        var n = Text.indexOf(".");
                                        if(n > -1) {
                                            //console.log("***");
                                            return false;
                                        }

                                    }

                                    $(".input").append(txt);

                                    //运算符
                                    switch($(this).text()) {
                                        case "退格":
                                            $(".input").text(Text.substr(0, Text.length - 1));
                                            break;
                                        case "清屏":
                                            $(".input").text("");
                                            break;

                                        case "=":
                                            function compute(content) {
                                                //加
                                                var index = content.indexOf("+");
                                                if(index > -1) {
                                                    return parseFloat(compute(content.substring(0, index))) + parseFloat(compute(content.substring(index + 1)));
                                                }
                                                //减
                                                index = content.lastIndexOf("-");
                                                if(index > -1) {
                                                    return compute(content.substring(0, index)) - compute(content.substring(index + 1));
                                                }
                                                //乘
                                                index = content.indexOf("×");
                                                if(index > -1) {
                                                    return compute(content.substring(0, index)) * compute(content.substring(index + 1));
                                                }
                                                //除
                                                index = content.lastIndexOf("÷");
                                                if(index > -1) {
                                                    return compute(content.substring(0, index)) / compute(content.substring(index + 1));
                                                }
                                                if(content == "") {
                                                    return 0;
                                                } else {
                                                    return Number(content);
                                                }
                                            }
                                            $(".input").text(compute(Text));
                                    }

                                });

                        });
        </script>
    </body>

</html>
jquery实现计算器功能

猜你喜欢
