javaScript 与JQuery 计算器练习

JavaScript 实现简单计算器

JavaScript代码如下：

<script>

    var num = 0;  
    // 定义第一个输入的数据
    function jsq(num) {
        // 获取当前输入
        if(num=="%"){
            document.getElementById('screenName').value=(document.getElementById('screenName').value)/100;
        }else{
            document.getElementById('screenName').value += document.getElementById(num).value;
        }
    }
    function eva() {
        //计算输入结果
        document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
    }
    function clearNum() {
        //清0
        document.getElementById("screenName").value = null;
        document.getElementById("screenName").focus();
    }
    function tuiGe() {
        //退格
        var arr = document.getElementById("screenName");
        arr.value = arr.value.substring(0, arr.value.length - 1);
    }
</script>

View Code

HTML代码如下：

<body>
<div id="calculator">
    <div id="logo">
        <span id="name">简单的计算器</span>
        <span id="verson">@MrJu</span>
    </div>

    <div id="shuRu">
        <!--screen输入栏-->
        <div class="screen">
            <input type="text" id="screenName" name="screenName" class="screen">
        </div>
    </div>

    <div id="keys">
        <!--第一排-->
        <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">
        <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">
        <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
        <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">
        <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">
        <!--第二排-->
        <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">
        <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">
        <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
        <input type="button" id="*" onclick="jsq(this.id)" value="*" class="buttons">
        <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">
        <!--第三排-->
        <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">
        <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">
        <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
        <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">
        <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">
        <!--第四排-->
        <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">
        <!--<input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">-->
        <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">
        <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">
        <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">

    </div>
</div>

</body>

View Code

Css代码：

<style>
        *{
             margin:0;
             padding:0;
             box-sizing: border-box;
             font:  14px Arial,sans-serif;
         }
        html{
            height:100%;
            background-color:lightslategrey;
        }

        #calculator{
            margin: 15px auto;
            width:330px;
            height:400px;
            border: 1px solid lightgray;
            background-color:darkgrey;
            padding:15px;
        }
        #logo{
            height: 20px;
        }
        #name{
            float:left;
            line-height:30px;
        }
        #verson{
            float:right;
            line-height:30px;
        }
        #shuRu{
            margin-top:15px;
        }
        .screen{
            margin-top:5px;
            width:300px;
            height:40px;
            text-align: right;
            padding-right:10px;
            font-size:20px;
        }
        #keys{
            border:1px solid lightgray;
            height:223px;
            margin-top:25px;
            padding:8px;
        }


        #keys .buttons{
            float:left;
            width: 42px;
            height: 36px;
            text-align:center;
            background-color:lightgray;
            margin: 0 17px 20px 0;
        }

    </style>

View Code

下面是转化为JQuery代码有bug: back建不好用，求大神评论：

JQuery代码：

<script>

    var num = "";  // 定义第一个输入的数据
    $(function () {
        $('.buttons').click(function () {
            var value =$(this).val();
            if (value=="="){
                //计算输入结果
                var a = eval(num);
                $('#screenName').val(a);
                num = a;
            }else if (value=='C'){
                //清零
                num = "";
                $('#screenName').val(num);
            }else if (value == 'Back') {
                //后退一步 有毛病

                var arr = $("#screenName").val();
                arr = arr.substring(0, arr.length - 1);
            }else {
                //获取输入值
                num += value;
                $('#screenName').val(num);
            }
            
        })
    })
</script>

View Code

HTML代码：

<body>
<div id="calculator">
    <div id="logo">
    <span id="name">简单的计算器</span>
    <span id="owner">@MrJu</span>
    </div>

<div id="shuRu">
    <!--screen输入栏-->
    <div class="screen">
        <input type="text" id="screenName" class="screen" value="">
    </div>
</div>

    <div id="keys">
            <!--第一排-->
            <input type="button" id="7"  value="7" class="buttons">
            <input type="button" id="8"  value="8" class="buttons">
            <input type="button" id="9"  value="9" class="buttons">
            <input type="button" id="Back"  value="Back" class="buttons">
            <input type="button" id="C"  value="C" class="buttons" style="margin-right:0px">
            <!--第二排-->
            <input type="button" id="4"  value="4" class="buttons">
            <input type="button" id="5"  value="5" class="buttons">
            <input type="button" id="6"  value="6" class="buttons">
            <input type="button" id="*"  value="*" class="buttons">
            <input type="button" id="/"  value="/" class="buttons" style="margin-right:0px">
            <!--第三排-->
            <input type="button" id="1"  value="1" class="buttons">
            <input type="button" id="2"  value="2" class="buttons">
            <input type="button" id="3"  value="3" class="buttons">
            <input type="button" id="+"  value="+" class="buttons">
            <input type="button" id="-"  value="-" class="buttons" style="margin-right:0px">
            <!--第四排-->
            <input type="button" id="0"  value="0" class="buttons">
            <input type="button" id="00"  value="00" class="buttons">
            <input type="button" id="."  value="." class="buttons">
            <input type="button" id="%"  value="%" class="buttons">
            <input type="button" id="eva"  value="=" class="buttons" style="margin-right:0px">

    </div>
</div>

</body>

View Code

posted on 2018-11-26 19:55 笑见蓝雨阅读(379) 评论(0) 收藏举报