详解用javascript写一个简单计算器(二)

2025-11-09 12:13:19

1、var results="";

var calresults="";

    function calculater(){

        if (event.srcElement.innerText=="=") {

            return;

        }

       results+=event.srcElement.innerText;

       display.innerText=results;

       

    }

    function resultscalcaulte(){

      calresults=eval(results);

      display.innerText=calresults;

    }

这是(一)篇的js代码,非常简单

我们需要增加的功能有

1.c键的清除功能

2.判断算式是否合理

3.多运算符号输入处理

4.+/-相反数要求的功能

5.按了等号运算后得到的结果继续运算

2、c键的清除功能,在calculater()里加入如下代码

 if (event.srcElement.innerText=="c") {

            results="";

            display.innerText="0";

            return;

        }

判断如果点击了c的单元格,使results置空, display显示“0”

详解用javascript写一个简单计算器(二)

3、然后我们需要识别输入的算式,可以用循环和条件语句来做,但这样代码显得比较繁琐,这里我们可以用正则表达来识别输入的算式是否符合要求。

正则表达的内容比较多,这里我们只讲一下我们要用到的符号

,是转义字符,例如\+表示是"+"这个字符,因为+在正则表达也有自己的含义,所以要用转义字符;

.,表示前面可以是任意的字符

+,表示前面的设定的字符可以重复多次,.+这样写表示前面可以有任意个任意字符

{a},表示前面的设定字符要出现a次

^,表示设置第一位字符

[^表达式 ],这个^表示不能存在[]里的这些字符的意思

$,表示设置最后一位字符

|,表示或,与编程的或意思一样

\b,表示0-9数字的任意一个

match()函数,用来检测字符串是否符合正则表达式的要求,如果有匹配符合要求的就返回这个字符串,否则返回null

4、举例说明正则表达式 

if (event.srcElement.innerText=="=") {

            return;

        }

这是我们检测字符是不是=的方法

如果用正侧,表达来写就可以改为这样

var re=/=/;

if (event.srcElement.innerText.match(re)) {

            return;

        }

/=/就是一个简单的正则表达,表示判断是不是字符“=”

5、接下来我们要判断算式是否合理,如果算式的第一位是运算符号*或/时,则输出“输入错误”,我们可以加入下面代码

 var re1=/^[\*|\/].+/;

 if (results.match(re1)) {

         display.innerText="输入错误";

         results="";

         return;

      }

 re1=/^[\*|\/].+/,就是判断字符串的开头是不是符号*或/的正则表达,如果符合正则表达就显示输入错误

我们还要考虑到如果算式是以运算符号*或/结尾时按下等号,也要算是错误的,我们再可以修改一下代码

 var re1=/^[\*|\/].+/;

var re2=/.+[\*|\/]$/;

 if (results.match(re1)||results.match(re2)) {

         display.innerText="输入错误";

         results="";

         return;

      }

代码放在resultscalcaulte()

详解用javascript写一个简单计算器(二)

详解用javascript写一个简单计算器(二)

详解用javascript写一个简单计算器(二)

6、多运算符号输入处理,例如如果不小心双击了加号,这样多出一个加号,就要重新输入了,我们可以设置如果上一个点击是运算符号,那下一个显示就不能是运算符号。

为此我们要设置多一个全局变量存储上一个点击的值

var lastkey="";

增加一个正则运算判断是不是运算符号

var re3=/(\+|-|\*|\/)/;

再在calculater()里加入

if(lastkey.match(re3)&&event.srcElement.innerText.match(re3)){

            return;

        }

这样多运算符号输入处理得到了优化处理

7、+/-相反数要求的功能,在calculater()里加入

 if (event.srcElement.innerText=="+/-"&&results!="") {

               results = "-"+"("+results+")";

               display.innerText=results;

               return;  

        }

就把现有数字或算式加上括号,再在前面加负号

当然我们可以继续优化一下,改按了一下+/-键,再按一下+/-键就取消添加括号与负号,再按一下就又添加括号与负号,为此要多加俩个全局变量flg和results2,代码变为

  if (event.srcElement.innerText=="+/-"&&results!="") {

            if (flg==-1) {

              results=String(results2);

               display.innerText=results;

               flg=-flg;

               return;

            }

               results2=results;

               results = "-"+"("+results+")";

               flg=-flg;

               display.innerText=results;

               return;  

        }

String(results2),这里强制类型转换的原因是results2有可能会是数字类型而非字母类型,因为.match()要求必须results必须要是string类型,所以就进行一下强制类型转换

详解用javascript写一个简单计算器(二)

8、按了等号运算后得到的结果继续运算,在calculater()里加入

if(lastkey=="="&&event.srcElement.innerText.match(re3)){

           results=calresults;

        }

在resultscalcaulte(),加入

lastkey="=";

简单来说就是运算后,检测再输入的键是不是运算符号,如果是,就用结果继续运算,如果不是就重新开始新算式

9、这样这个简单的计算器就具有实用功能,下面附上上面完整的js代码

 

 var results="";

    var results2="";

    var calresults="";

    var lastkey="";

    var flg=1;

    var re1=/^[\*|\/].+/;

    var re2=/.+[\*|\/]$/;

    var re3=/(\+|-|\*|\/)/;

    var re4=/.+[\+|-|\*|\/]{1,99}.+/

    var re5=/\d.+/;

    function calculater () {

        if (event.srcElement.innerText=="=") {

            return;

        }

        if (event.srcElement.innerText=="c") {

            results="";

            display.innerText="0";

            return;

        }

        if (event.srcElement.id=="display") {

           return;

         }

        

        if (results.match(re1)) {

         display.innerText="输入错误";

         results="";

         return;

      }

        if(lastkey.match(re3)&&event.srcElement.innerText.match(re3)){

            return;

        }

        if(lastkey=="="&&event.srcElement.innerText.match(re3)){

           results=calresults;

        }

        

        if (event.srcElement.innerText=="+/-"&&results!="") {

            if (flg==-1) {

               results=String(results2);

               display.innerText=results;

               flg=-flg;

               return;

            }

               results2=results;

               results = "-"+"("+results+")";

               flg=-flg;

               display.innerText=results;

            return;  

        }

       

       results+=event.srcElement.innerText;

       lastkey=event.srcElement.innerText;

       display.innerText=results;

          }

    function resultscalcaulte(){

         if (results.match(re1)||results.match(re2)) {

         display.innerText="输入错误";

         results="";

         return;

      }

      

      calresults=eval(results);

      display.innerText=calresults;

      lastkey="=";

      results="";

    }

只要理解上面内容,你还可以继续完善这个简单的计算,修改一下键的功能,

这里就到此结束了。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢