js实现一个简单的计算器，初学前端第二个小作品

最新推荐文章于 2024-04-25 09:54:19 发布

黄金贼贼

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量5.1k

点赞数 4

本文链接：https://blog.csdn.net/to_study/article/details/80528507

版权

jsjs实现一个简单的计算器，初学前端第二个小作品，

js的eval（String)函数返回该字符串的计算结果，不符合运算规则的会报错；

做这个计算器最大的问题在于让eval传入的值符合运算规则，比如：

重要问题解决思路：

首先操作要区分是数字还是运算符，毕竟表达式值跟运算符区别是根本的；

1.字符串的首字母不能是*、/等运算符；这个很好解决，第一个操作如果运算符直接得0+运算符得字符串就ok；

2.不允许连续得两个运算符，这个问题也不难解决，在js中使用一个全局变量last来记住上一个操作是数字还是运算符，在进行验证；

3.不允许一段数字有两个小数点；这个问题就稍微有点复杂，我的思路是还是使用一个全局变量pot来跟踪记录小数点得使用情况，初始化值是0，当出现一个小数点值置1，当pot为1时不允许输入小数点，当满足前一个操作是数字和当前操作是一个运算符的条件时将pot置0；

4.另外一个特殊的就是等于号了，当前一个操作是等于是，如果当前是数字则重新开始，如果是运算符就将上一次计算的结果拿出来继续计算

前面说的是大体思路，具体在实现还是会碰到一些小麻烦，也是很头疼慢慢解决的，毕竟完成一件事都是痛苦与快乐兼并着；

效果如下地址

点击打开链接

HTML代码：

<body>
        <div class="counter">
            <div class="upper" id="upper">0</div>
             <div class="middle" id="middle">0</div>
            <div class="under">
                <button οnclick="clearAll();">C</button>
                <button οnclick="delectOne();">←</button>
                <button value="/" οnclick="button_onclick(this)">/</button>
                <button value="*" οnclick="button_onclick(this)">*</button>
                <button value="7" οnclick="button_onclick(this)">7</button>
                <button value="8" οnclick="button_onclick(this)">8</button>
                <button value="9" οnclick="button_onclick(this)">9</button>
                <button value="-" οnclick="button_onclick(this)">-</button>
                <button value="4" οnclick="button_onclick(this)">4</button>
                <button value="5" οnclick="button_onclick(this)">5</button>
                <button value="6" οnclick="button_onclick(this)">6</button>
                <button value="+" οnclick="button_onclick(this)">+</button>
                <button value="1" οnclick="button_onclick(this)">1</button>
                <button value="2" οnclick="button_onclick(this)">2</button>
                <button value="3" οnclick="button_onclick(this)">3</button>
                <button value="." οnclick="button_onclick(this)">.</button>
                <button value="0" οnclick="button_onclick(this)" style="width:150px;">0</button>
                <button value="=" οnclick="button_onclick(this)" style="width:150px; background-color: aqua">=</button>
                
            </div>
             
        </div>
        <script src="counter.js"></script>
    </body>

CSS代码：

body{
    background-color: darkgray;
}
.counter{
    position:absolute;
    background-color:darkkhaki;
    margin-left: 500px;
    width:300px;
    height: 500px;
    float:left; 
}
.under{
    position: absolute;
    padding:0px;
    background-color:whitesmoke;
    margin-top: 200px;
    width:300px;
    height:300px;
    float:left;
    font-size: 0px;
    
}
.under button{
    width:75px;
    height:60px;
    font-size:20px;
}
.upper{
    position:absolute;
    width: 300px;
    height:150px;
    border-bottom-width: 1px; 
    border-bottom-style:dashed;
    font-size:20px;
    float:left;
    word-wrap:break-word;
    overflow:hidden;
}
.middle{
    padding-top: 10px;
    position: absolute;
    margin-left: 0px;
    margin-top: 150px;
    width:300px;
    height:50px;
    font-size:30px;
}

js代码：

var last = "0";      //全局变量记住当前操作的上一个操作

//全局变量，跟踪记录小数点.的使用，每段数字最多只能有一个小数点
var pot = 0;

//判断是数字
function isNumber(obj){
    if(obj=="*"||obj=="/"||obj=="-"||obj=="+"||obj=="."||obj=="="){
        return false;
    }
    else return true;
}

//重置计算器
function clearAll(){
    var obj1=document.getElementById("upper");
    obj1.innerHTML = "0";
    
    var obj2=document.getElementById("middle");
    obj2.innerHTML = "0";
    last = "0";
    pot=0;
}
//删除上一个操作
function delectOne(){
   
    var obj1 = document.getElementById("upper");
    
    if(pot==1){
        if(obj1.innerHTML.charAt(obj1.innerHTML.length-1)==".")pot=0;
    }
    
    obj1.innerHTML = obj1.innerHTML.substring(0,obj1.innerHTML.length-1);
    last = obj1.innerHTML.charAt(obj1.innerHTML.length-1);
    
    console.log(last);
}

//按下按钮进行计算
function button_onclick(obj){
    var obj1 = document.getElementById("upper");
    var obj2 = document.getElementById("middle");
    
    //如果出于刚开始,还没有数据
    if(obj1.innerHTML=="0"){
        last = obj.value;
        //当按钮是一个数字
        if(isNumber(obj.value)){
            obj1.innerHTML = obj.value;
            obj2.innerHTML = eval(obj1.innerHTML);
        }//end if
        //当按钮是一个运算符
        else {
            //如果是小数点
            if(obj.value==".")pot=1;
            obj1.innerHTML = obj1.innerHTML+obj.value;
        }//end else
        
        return;
    }//end if
    
    //输入的是一个数字的时候
    if(isNumber(obj.value)){
        //当输入一个数字，且前一个输入是一个不是小数点.的运算符时
        if(pot==1){
            if(last!="."&&!isNumber(last))pot=0;
        }
        //输入的是一个数字的时候且上一个操作是等于时
        if(last=="="){
            obj1.innerHTML=obj.value;
            obj2.innerHTML=eval(obj1.innerHTML);
            last=obj.value;
            return;
        }//end if
        if(last=="/"&&obj.value=="0"){
            obj1.innerHTML=obj1.innerHTML+obj.value;
            obj2.innerHTML="不能除以0";
            last=obj.value;
            return;
        }
        last=obj.value;
        obj1.innerHTML=obj1.innerHTML+obj.value;
        obj2.innerHTML=eval(obj1.innerHTML);
        return;
    }//end if
    
    //当输入是一个运算符
    else{                     //当输入是一个运算符
       if(last=="="){           //当输入是一个运算符，且前一个操作是等于时,取得之前所计算的结果继续
           if(obj.value=="=")return;      //当输入是一个运算符=时，且前一个操作是等于,则什么都不做
            obj1.innerHTML=obj2.innerHTML.substring(1,obj2.innerHTML.length)+obj.value;
           last=obj.value;
           return;
       }
       //当输入为小数点.检查是否一个数字有两个小数点
       if(obj.value=="."){
           //如果两个小数点，什么都不做
           if(pot==1){
           return;
       }
       //否则pot置1
           pot = 1;
       }
       
        if(obj.value=="="){          //当输入是一个运算符=
            obj2.innerHTML = obj.value+eval(obj1.innerHTML);
            last=obj.value;
            return;
        }//end if
        //前一个是数字时
        if(isNumber(last)){
            obj1.innerHTML = obj1.innerHTML+obj.value;
            last=obj.value;
            return;
        }
        else{             //当输入是一个运算符，且前一个输入也是一个运算符，进行替换
            if(last==".")pot=0;    //当前一个时小数点时
            obj1.innerHTML = obj1.innerHTML.substring(0,obj1.innerHTML.length-1);
            obj1.innerHTML = obj1.innerHTML+obj.value;
            last = obj.value;
            return;
        }//end else
    }//end else
}

黄金贼贼

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
js实现一个简单的计算器，初学前端第二个小作品

jsjs实现一个简单的计算器，初学前端第二个小作品，效果如下地址点击打开链接HTML代码：&lt;body&gt; &lt;div class="counter"&gt; &lt;div class="upper" id="upper"&gt;0&lt;/div&gt; &lt;div class="m
复制链接

扫一扫