jQuery：案例9 计算器

最新推荐文章于 2024-11-10 14:00:00 发布
原创最新推荐文章于 2024-11-10 14:00:00 发布 · 437 阅读
1 ·
CC 4.0 BY-SA版权
前端同时被 2 个专栏收录
43 篇文章
订阅专栏
jQuery
18 篇文章
订阅专栏
动画效果：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script src="../jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #calculator{
            margin: 50px auto;
            padding: 5px;
            width: 230px;
            height: 230px;
            background: rgb(190,210,224);
        }
        #screen{
            width: 230px;
            height: 60px;
            background: rgb(153,153,153);
            border-radius: 5px;
            text-align: right;
            overflow: hidden;
        }
        #txt1{
            height: 20px;
            padding-top: 10px;
            font-size: 10px;
        }
        #txt2{
            height: 30px;
            font-size: 20px;
        }
        #num{
            float:left;
            width: 130px;
        }
        #num input{
            width: 40px;
            height: 40px;
            margin-top: 3px;
        }
        #operator{
            float:right;
            width: 70px;
            height: 170px;
        }
        #operator input{
            width: 70px;
            height: 30px;
            margin-top: 4px ;
        }
        #converter{
            float:right;
            width: 70px;
            height: 170px;
        }

    </style>
</head>
<body>
<div id="calculator">
    <div id="screen">
        <p id="txt1"></p>
        <p id="txt2"></p>
    </div>
    <div id="workspace">
        <div id="num">
            <input type="button" value="7">
            <input type="button" value="8">
            <input type="button" value="9">
            <input type="button" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <input type="button" value="1">
            <input type="button" value="2">
            <input type="button" value="3">
            <input type="button" value="C">
            <input type="button" value="0">
            <input type="button" value=".">

        </div>
        <div id="operator">
            <input type="button" value="+">
            <input type="button" value="-">
            <input type="button" value="*">
            <input type="button" value="/">
            <input type="button" value="=">
        </div>


    </div>
</div>

<script>
    $(function(){
         var i=0;//i为清空标志，i=1时需要清空#txt2的数据
        //获取输入的数字
        $("#num input").click(function () {
           //先判断#txt2中是否保存着上次计算的结果，如果是则将其清空
            if (i===1){
                $("#txt2").text("");
                }
            //保证数字以正确的格式显示
            //使用switch语句实现
            switch ($(this).val()){
                 case "C":
                     $("#txt2").text("");
                     break;
                 case ".":
                     if ($("#txt2").text().indexOf(".") != -1) {
                     break;
                     }else{$("#txt2").append($(this).val());}
                      break;
                 default:
                      if ($("#txt2").text() === "0") {
                          $("#txt2").text($(this).val());
                        }else{
                           $("#txt2").append($(this).val());
                        }
                   }
                   //使用if语句实现
                  /* if ($(this).val()=="C"){
                         $("#txt2").text(" ");
                     } else {
                        if ($("#txt2").text().indexOf(".") != -1) {
                            if ($(this).val() == ".") {
                             } else {
                                 $("#txt2").append($(this).val());
                             }
                        } else if ($("#txt2").text() === "0") {
                            if ($(this).val() === ".") {
                            $("#txt2").append($(this).val());
                            } else {
                                $("#txt2").text($(this).val());
                            }
                         }else{
                            $("#txt2").append($(this).val());
                         }

                         }*/
                  i=0;//将清空标志设为0
         });
        //获取运算符
         $("#operator input:not(:last)").click(function () {
             $("#txt1").text($("#txt2").text()+$(this).val());
             $("#txt2").text("");
         });
         //按下“=”键进行计算
         $("#operator input").last().click(function () {
             //使用eval()函数
            //$("#txt2").text(eval($("#txt1").text()+$("#txt2").text()));
             //使用常规方法
             var str=$("#txt1").text();
             var n1=parseFloat(str);
             var n2=parseFloat($("#txt2").text());
             var cal=str[str.length-1];
             switch (cal){
                 case "+":
                     $("#txt2").text( n1+n2);
                     break;
                 case "-":
                     $("#txt2").text( n1-n2);
                     break;
                 case "*":
                     $("#txt2").text( n1*n2);
                     break;
                 case "/":
                     $("#txt2").text( n1/n2);
                     break;
                 default: break;
             }
             $("#txt1").text( "");
             i=1;//将清空标志设为1
         });
    });
</script>
</body>
</html>