通过JavaScript实现计算器中的小数点重复和多次出现问题

通过JavaScript实现计算器中的小数点问题

解决小数点连续输入的问题，小数点只出现一次

计算器界面：

出现问题：在计算器完成正常计算后，会发现小数点会出现一些问题，比如会出现7…小数点连续出现的情况，或者会出现类似7.5.2+1.1小数点交替出现的情况，这些是都不满足运算要求的。不能正确的求出结果。又因为小数点不能当做运算符来进行处理。故想到下面解决方法。

解决方法：

（1）解决小数点连续输入。

有两种办法，一是定义一个全局变量isClickPoint.利用布尔来实现开关功能来控制是否输入。

二是判断最后一个字符是否为小数点，在对最后一位进行个简单替换（其实就是小数点换小数点，不换也可以）。

两种方法也可以一起使用。

function clickPoint(point){
   
            var result = document.getElementById("result");
            var string = result.innerHTML;                                  
            var len = string.length;                      //获得内容长度
            var last = string.charAt(len-1);              //取得最后一个字符

            if(last == "."){
                //这里可以理解为做了个简单的替换，将最后一位舍弃，将剩下的与参数point连接。
                var temp = string.substr(0,len-1) + point;   
                result.innerHTML = temp;
            }
            else{
                result.innerHTML += point;      
            } 
        }

但是以上方法只是解决了小数点不能连续出现的问题，却不能处理出现7.7.8这种小数点和数字或者操作符交替出现的情况。

（2）解决小数点交替出现的情况，即小数点只出现一次

我们都知道表达式是由多个变量和多个操作符构成的。就以最简单的a+b来解释。

由于设计的计算器是通过单击实现操作。所以当单击小数的时候，会出现以下情况（一部分）：

① 6.

②7 + 1.

③ 7.9 + 8.9.

④ 7.9 + 1.

最后一位的小数点表示我已经单击小数点，在函数中需要判断该小数点是否可以正常的输入进去。

首先就是第①种，这种是最简单的，直接从最后一位开始向前挨个检查是否有小数点存在即可。

而第②种，我们用简单的直接从高位向前挨个检查的方法就会出现问题，比如像第④种情况：虽然前面存在小数点，但是a和b是不同的变量，但是我们在输入的时候是按照字符串的输入进去的。所以需要从最后一位向前检查的时候需要判断到第一个检测的运算符就停，记住其位置，在对其位置后面进行判断是否已经存在小数点即可。

第③种就是上面那种方法即可解决。

//创建全局变量表示是否有多于小数点  默认没有
		var isPointclick = false;
//输入小数点
        function clickPoint(point){
            
            var result = document.getElementById("result");
            var string = result.innerHTML;
            var len = string.length;
            var last = string.charAt(len-1);  //取得最后一个字符
            var operatoropt = 0;             //用来记录运算符位置
            
            for(let i=len-1;i>=0;i--)   //对整个字符串进行遍历
            {
                if(string[i] =="+"||string[i] == "-"||string[i] == "*"||string[i] == "/"||string[i] == "%")                            //判断是否字符串中是否有运算符
                {
                    for(let j = len-1;j>=i;j--)   //在判断运算符之后是否已经存在小数点
                    {
                        if(string[j]=='.')
                        {
                            isPointClick = true;    //如果存在便将其调整为 true
                        }
                    }
                    operatoropt = i;              //记录运算符位置
                    break;               //注意打破循环，不然的话在一些情况下operator会改变
                }
                
            }
                
            for(let j=len-1;j>=operatoropt;j--)          //表示当前方没有运算符的时候比如：6
            {
                if(string[j]=='.')
                {
                    isPointClick = true;
                }
            }
                
            if(isPointClick == false)                   //根据变量来判断是否输入
            {
                result.innerHTML += point;
            }
            
        }

结果如下：

以上解决方法仅是我自己想出来的，可能不是最优解，如果大家有更好的方法的话，求各位告知一下，谢谢。