用纯JQuery的方式实现一个计算器

用纯JQuery的方式实现一个计算器






    </script>
    <script type="text/javascript">
        var str="";
        $(function(){
            $(":button").click(function(){
                var num=$(this).text();
                if(num=="C"){
                    str="";
                    $("#in").val(0);
                }else if(num=="="){
                    /*eval函数是计算字符串的数字
                      例如字符串是:"2+3";
                      那么eval函数计算的就是字符串:"2+3";
                      得出结果5;
                      可以简单的理解为将字符串内的内容当数学公式计算了.
                     * */
                    var result=eval(str);
                    $("#in").val(result);
                    //这里为了计算连加连减,所以需要将值再次返回给str;
                    str=result;
                }//else内为计算连加连减
                else{
                    str+=num;
                    $("#in").val(str);
                }
            });
        });
    </script>
</head>
<body>
    <!--
        实现计算器的基本按钮,可以在用一个大的div套4个小的div.每个小的div都有四个按钮.
    -->
    <div id="box" style="width: 200px; height: 200px; background-color: gainsboro;">
        <div id="">
            <input type="text" name="" id="in" value="" />
            <div id="">
                <button>7</button>
                <button>8</button>
                <button>9</button>
                <button>+</button>
            </div>
            <div id="">
                <button>4</button>
                <button>5</button>
                <button>6</button>
                <button>-</button>
            </div>
            <div id="">
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>*</button>
            </div>
            <div id="">
                <button>0</button>
                <button>C</button>
                <button>/</button>
                <button>=</button>
            </div>
        </div>
    </div>
</body>

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值