如何使用jquery写一个计算器

2026年09月28日 23:23
有1个网友回答
网友(1):


html部分:





































CD.*
789-
456+
123/
(0)=


jquery部分:

1 2

代码详解

思路:

1给每个td元素添加一个click事件,通过判断点击不同的按钮来实现不同的行为,例如:当判断点击的元素是操作符“C”的时候,使用

$("#input").text("");来清空元素

2实现计算的思路:

最后做出的代码使用了递归的思想,思路如下:

(1)在点击等号之后,获取到输入的运算式,这个运算式是以字符串的形式存在的,运行compute函数,这个函数的目的是循环查找在字符串中的操作符,在找到操作符之后,将字符串中的以操作符为间隔分为两部分,对于每一部分再进行compute函数的运算,再查找运算符,在进行一次运算,循环,这样一直循环嵌套,一直运算到没有出现运算符为止

(2)实现优先级的代码:

我们知道,在等式运算中,加号和减号的地位是相同的,乘号和除号地位是相同的,先乘除后加减,这就是运算符的优先问题,如何实现运算符优先问题呢?

在这个代码中,是通过根据判断不同运算符是否存在的顺序先后来实现的,在代码中下面这一段代码:

index=content.indexOf("+");30                             if(index>-1){31                                 return compute(content.substring(0,index))+compute(content.substring(index+1));32                             }33                             index=content.lastIndexOf("-");34                             if(index>-1){35                                 return compute(content.substring(0,index))-compute(content.substring(index+1));36                             }37                             //如果返回的content为空,则返回038                             index=content.indexOf("*");39                             if(index>-1){40                                 return compute(content.substring(0,index))*compute(content.substring(index+1));41                             }42                             index=content.lastIndexOf("/");43                             if(index>-1){44                                 return compute(content.substring(0,index))/compute(content.substring(index+1));45                             }

在上面的代码中,先判断的加减号,后判断的乘除号,这里解决的是优先级问题,

例如下面等式: 1+2*3+4

在程序中,先查找到加号运算符,分成两部分,1和 2*3+4  在后面的那一部分中,在进行循环运算,根据程序,先查找加号,又分为了两部分,2*3和4对于2*3运行函数,找到了*号运算符,这时候没有多余的运算符,直接计算2*3等式。

注意知识点:

1,$(selector).trim()用于消除字符串之间的间隔;

2,$(selecoor).each(function(){})用于遍历每个元素,

3,$(seletor).text()用于获取匹配元素内的文本,注意:

在我们使用的是$(selector).text()来获取元素的,在一般的情况下 对于$("td").[0]===$("td:eq(0)")===document.getElementByTagName("td")[0]是等价的

如果我们要获取元素内的文本元素,我们需要通过$("td:eq(0)")来获得,而对于$("td").[0]则获取不到,因此,要注意,不要混用

4,对于字符串的操作方法:

在ECMAScript中存在三种基于子字符串创建新字符串的方法:

slice()  , substr()和 substring()这三种方法都会返回被操作字符的一个子字符串, 

当接受两个参数的时候,第一个参数指定字符串的开始位置,第二个参数指定子字符串在哪里结束,

对于slice(),substring()和substr()第二个参数表示的意思还不同

对于slice()和substring()第二个参数表示子字符串最后一个字符后面的位置

而对于substr()表示的是返回的字符个数:
代码如下:

var stringValue="hello world";
alert(stringValue.substring(3,7));//"lo w"
alert(stringValue.slice(3,7));//"lo w"
alert(stringValue.substr(3,7)//"lo worl"

如上:

字符串的序号从零开始,对于substring()和slice()截取的是从3开始到7后面的那个字符结束的位置,实际上不包括字符位置为7的位置(最后截取的字符串因此不包括字符"o"),但是包括一开始就截取的开头的字符("l")

而对于substr()表示的是从3的位置开始,要截取7个字符的字符长度作为字符串

如果没有第二个参数,这表示将字符串的长度作为结束位置:代码如下:

alert(stringValue.substring(3));
alert(stringValue.slice(3));
alert(stringValue.substr(3))

最后输出结果均为:

"lo world"