晚上做了一个jQuery的项目，使用jQuery实现了一个简单的计算器功能，可以实现连加，连减，混合计算，括号内优先计算，代码如下：
css部分：
1 <style> 2 .main{ 3 margin: 0 auto; 4 text-align: center; 5 } 6 *{ 7 padding: 0; 8 margin: 0; 9 } 10 table { 11 margin: auto; 12 border-collapse: collapse; 13 14 } 15 span{ 16 display: inline-block; 17 text-align:center; 18 font-size: 30px; 19 width: 404px; 20 height: 100px; 21 background-color: darkgrey; 22 23 } 24 table td{ 25 text-align: center; 26 width: 100px; 27 height: 100px; 28 line-height: 100px; 29 background-color: lightgrey; 30 border:1px solid darkgrey; 31 } 32 </style>
html部分：
<div class="main"> <span id="input"> </span> <table> <tbody> <tr> <td>C</td> <td>D</td> <td>.</td> <td>*</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td>-</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>+</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>/</td> </tr> <tr> <td>(</td> <td>0</td> <td>)</td> <td>=</td> </tr> </tbody> </table> </div>
jquery部分：
1 <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 var $td=$("td"); 5 6 $td.each(function(){ 7 $(this).click(function(){ 8 var Text=$("#input").text().trim(); 9 $("#input").append($(this).text()); 10 switch ($(this).text()){ 11 case "C": 12 $("#input").text(""); 13 break; 14 case "D": 15 $("#input").text(Text.substr(0,Text.length-1)); 16 break; 17 case "=": 18 function compute(content){ 19 var index=content.lastIndexOf("("); 20 if(index>-1){ 21 var nextIndex=content.indexOf(")",index); 22 if(nextIndex>-1){ 23 //递归的思想,一步一步的递归 24 var result=compute(content.substring(index+1,nextIndex)); 25 return compute(content.substring(0,index)+(""+result)+content.substring(nextIndex+1)) 26 } 27 28 } 29 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为空,则返回0 38 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 } 46 if(content==""){ 47 return 0; 48 }else{ 49 //将content字符串转化为数值, 50 //这儿也可以使用一些技巧,比如 content-1+1,使用加减操作符,将字符串转化为数值 51 return Number(content); 52 } 53 } 54 $("#input").text(compute(Text)); 55 } 56 }) 57 58 }); 59 }) 60 64 </script>
代码详解
思路：
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为空,则返回0 38 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"
如上:
8097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
