多语言展示
当前在线:1435今日阅读:23今日分享:25

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

上一篇已经写好计算器的界面,和最简单的计算功能,这篇主要是继续完善计算器的机能,增强其功能,和提高其使用的容错率。48详解用javascript写一个简单计算器(一)
方法/步骤
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

1.c键的清除功能,在calculater()里加入如下代码 if (event.srcElement.innerText=='c') {            results='';            display.innerText='0';            return;        }判断如果点击了c的单元格,使results置空, display显示“0”

3

然后我们需要识别输入的算式,可以用循环和条件语句来做,但这样代码显得比较繁琐,这里我们可以用正则表达来识别输入的算式是否符合要求。正则表达的内容比较多,这里我们只讲一下我们要用到的符号\ ,是转义字符,例如\+表示是'+'这个字符,因为+在正则表达也有自己的含义,所以要用转义字符;.,表示前面可以是任意的字符+,表示前面的设定的字符可以重复多次,.+这样写表示前面可以有任意个任意字符{a},表示前面的设定字符要出现a次^,表示设置第一位字符[^表达式 ],这个^表示不能存在[]里的这些字符的意思$,表示设置最后一位字符|,表示或,与编程的或意思一样\b,表示0-9数字的任意一个match()函数,用来检测字符串是否符合正则表达式的要求,如果有匹配符合要求的就返回这个字符串,否则返回null

4

举例说明正则表达式 if (event.srcElement.innerText=='=') {            return;        }这是我们检测字符是不是=的方法如果用正侧,表达来写就可以改为这样var re=/=/;if (event.srcElement.innerText.match(re)) {            return;        }/=/就是一个简单的正则表达,表示判断是不是字符“=”

5

2.接下来我们要判断算式是否合理,如果算式的第一位是运算符号*或/时,则输出“输入错误”,我们可以加入下面代码 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()里

7

4.+/-相反数要求的功能,在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类型,所以就进行一下强制类型转换

8

5.按了等号运算后得到的结果继续运算,在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='';    }只要理解上面内容,你还可以继续完善这个简单的计算,修改一下键的功能,这里就到此结束了。

推荐信息