jQuery实现简易的计算器

Winona ·

更新时间:2024-09-20

· 950 次阅读

本文实例为大家分享了jQuery实现简易的计算器的具体代码，供大家参考，具体内容如下

布局如下：

css代码

#d1{
    width: 400px;
    height: 500px;
    /*background-color: #A9A9A9;*/
    float: left;
    margin: 20px 0px 0px 500px;
    font-size: 30px;
    font-weight: bold;
    font-family: 宋体;
    text-align: center;
    line-height: 70px;
    background:url("../img/1 (20).jpg");
    background-repeat:no-repeat;
    background-size:400px 500px;
}
#d2{
    width: 100%;
    height: 4%;
    color: aqua;
    float: left;
    border:0px red solid;
    text-align: left;
    line-height: 18px;
    font-size: 20px;
    font-family: "微软雅黑";
}
#d3{
    width: 100%;
    height: 10%;
    color: aqua;
    float: left;
    border:0px red solid;
    text-align: left;
    line-height: 18px;
    margin-top: 3px;
    margin-bottom: 9px;
    opacity: 0.8;
}
.c1{
    width: 22.1%;
    height: 15%;
    background-color: #FFC0CB;
    cursor: pointer;
    float: left;
    border-radius: 12px;
    margin: 0px 0px 9px 9px;
    opacity: 0.8;
}
.c1:hover{
    background-color: aqua;
}

布局+jQuery：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>计算器</title>
        <link href="计算器.css" rel="external nofollow"  rel="stylesheet">
    </head>
    <body>
        <div id=d1>
            <div id=d2>● ● ●</div>
            <div id=d3>
                <input type="text" id="t" style="border:1px bisque solid;width: 394px;height:48px;background-color:#FF6600;font-size: 25px;" />
            </div>
            <div class=c1 value="AC">AC</div>
            <div class=c1 value="+/-">+/-</div>
            <div class=c1 value="%">%</div>
            <div class=c1 value="/">÷</div>
            <div class=c1 value="7">7</div>
            <div class=c1 value="8">8</div>
            <div class=c1 value="9">9</div>
            <div class=c1 value="*">×</div>
            <div class=c1 value="4">4</div>
            <div class=c1 value="5">5</div>
            <div class=c1 value="6">6</div>
            <div class=c1 value="-">-</div>
            <div class=c1 value="1">1</div>
            <div class=c1 value="2">2</div>
            <div class=c1 value="3">3</div>
            <div class=c1 value="+">+</div>
            <div class=c1 value="0">0</div>
            <div class=c1 value="保留">保留</div>
            <div class=c1 value=".">.</div>
            <div class=c1 onclick="answer()">=</div>
            <script src="../JQuery/jquery-3.4.1.js" ></script>
            <script>
                var store = '';
                var bo1 = false; //是否 按了 = 的变量
                $(".c1:lt(19)").click(function(){
                    var x1=$(this).attr("value");
                    get(x1);
                });
                function get(x) {
                    var a = $("*:text");
                    if(x == "保留") {
                        bo1 = false;
                    } else if(x == "AC") {
                        a.val("0");
                        bo1 = true;
                    } else if(x == "+/-") {
                        a.val(0 - a.val());
                    } else {
                        store = x;
                        var v = a.val();
                        if(bo1 == true) {
                            a.val(x);
                            bo1 = false;
                        } else {
                            a.val(v + x);
                        }
                    }
                }
                function answer() {
                    var a = $("*:text");
                    var x = a.val();
                    var y = eval(x);
                    a.val(y);
                    bo1 = true;
                }
            </script>
        </div>
    </body>
</html>

jQuery

1024 个赞