【freecodecamp】 简易计算器项目

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/towrabbit/article/details/81295696

freecodecamp上的项目习题，制作一个简易的计算器。因为有eval()这个函数。所以做起来非常简单

eval():

传入一个表达式字符串计算并且输出结果；
例如

    console.log(eval("1+1"));//2

按照freecodecamp中国站上面的例子改版
自己做了一个：
html:

<div class="block640" id="Container">
        <input type="textbox" class="textbox" readonly value="">
        <div class="buttons">
            <button class="button" value="AC">AC</button>
            <button class="button" value="CE">CE</button>
            <button class="button" value="%">%</button>
            <button class="button" value="/">/</button>
            <button class="button" value="7">7</button>
            <button class="button" value="8">8</button>
            <button class="button" value="9">9</button>
            <button class="button" value="*">*</button>
            <button class="button" value="4">4</button>
            <button class="button" value="5">5</button>
            <button class="button" value="6">6</button>
            <button class="button" value="-">-</button>
            <button class="button" value="1">1</button>
            <button class="button" value="2">2</button>
            <button class="button" value="3">3</button>
            <button class="button" value="+">+</button>
            <button class="button" value=".">.</button>
            <button class="button" value="0">0</button>
            <button class="button" value="00">00</button>
            <button class="button" value="=">=</button>
        </div>
    </div>

css:

@charset "utf-8";
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body{
    background-color: #000000;
}
.block640 {
    width:100%;
    max-width:640px;
    height: auto;
    margin: 0 auto;
}
#Container{
    height: 470px;
    background-color: rgba(200,200,255,0.3);
    -webkit-box-shadow: 0em 0em 10px 0 rgba(255,255,255,0.6);
    -moz-box-shadow: 0em 0em 10px 0 rgba(255,255,255,0.6);
    box-shadow: 0em 0em 10px 0 rgba(255,255,255,0.6);
    border-radius:10px;
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding:25px;
    color:rgba(233,233,255,.9);
}
#Container .textbox{
    font-size:30px;
    width:100%;
    background-color: #222222;
    line-height: 50px;
    height: 50px;
    text-align:right;
    color:rgba(233,233,255,.9);
    border:2px solid white;
    padding:0 10px;
    font-family: "monospace";
}
#Container .buttons{
    width:100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding:10px;

}
#Container .buttons button{
    width:23%;
    height: 60px;
    margin:5px 5px;
    font-size:20px;
    background-color: rgba(100,100,255,0.4);
    color:white;
    text-shadow: 0em 0em 0.2em #fff;
    border:2px solid rgba(200,200,255,0.6);
    transition: all .1s;
}
#Container .buttons button:hover{
    cursor:pointer;
    background-color: rgba(155,155,255,0.6);
}
#Container .buttons button:active{
    color: #ff0;
    padding-top:-1px;
}

引用jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

js:

     var calc = "";
     var clear = true;
     $("button").click(function() {
         var text = $(this).attr("value");
         if(parseInt(text, 10) == text ) {
             calc += text;
             $(".textbox").val(calc);
             clear = false;
         }else if( text === "/" || text === "*" || text === "-" || text === "+" || text === "%" || text === "."){
             if(calc === "") return;//不能以运算符号开始 也不能以.开始
             if(checklast(calc))return;//不能两个运算符号放在一起
             calc += text;
             $(".textbox").val(calc);
             clear = false;
         } else if(text === "AC") {
             calc = "";
             $(".textbox").val("");
         } else if(text === "CE") {
             calc = calc.slice(0, -1);
             $(".textbox").val(calc);
         } else if(text === "=") {
             if(calc === '' || checklast(calc))return;//字符串末位不能为符号

             ans = eval(calc);
             calc = ""+ans;
             $(".textbox").val(ans);
             clear = true;
         }
     });
     function checklast(text){
         var lastChar = text[text.length-1];
         var re = /[-+*\/%.]/;
         return re.test(lastChar);
     }

完成效果图：

codepen项目链接

欢迎评论点赞喔