使用jquery实现的计算器功能

晚上做了一个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"

如上:

转载于:https://www.cnblogs.com/qianduangaoshou/p/6930879.html

使用jquery实现的计算器功能相关推荐

计算器ajax实现代码,jQuery实现计算器功能
本文实例为大家分享了jQuery实现计算器功能的具体代码,供大家参考,具体内容如下动画效果: 计算器 *{ margin: 0; padding: 0; } #calculator{ margin: ...
求根计算机在线,jQuery实现的简单在线计算器功能
本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: /p> "http://www.w3.org/TR/xhtm ...
chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...
android实现计算器功能吗,利用Android实现一个简单的计算器功能
利用Android实现一个简单的计算器功能发布时间:2020-11-20 16:25:01 来源:亿速云阅读:90 作者:Leah 今天就跟大家聊聊有关利用Android实现一个简单的计算器功能, ...
python表达式计算器_Python正则表达式实现简易计算器功能示例
本文实例讲述了Python正则表达式实现简易计算器功能.分享给大家供大家参考,具体如下: 需求:使用正则表达式完成一个简易计算器. 功能:能够计算简单的表达式. 如:1*2*((1+2)/(2+3)+ ...
python实现简单计算器功能键介绍_Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器计算器效果图首先搭建计算器的面板: 计算器面板结构建造一个继承于wx.Fra ...
从零开始学习jQuery (十) jQueryUI常用功能实战
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
java swing实现计算器_Java swing实现的计算器功能完整实例
本文实例讲述了Java swing实现的计算器功能.分享给大家供大家参考,具体如下: package awtDemo; import java.awt.*; import java.awt.event ...
python调用计算器卡死_Python+tkinter使用40行代码实现计算器功能
本文实例为大家分享了40行Python代码实现计算器功能,供大家参考,具体内容如下偶尔用脚本写点东西也是不错的. 效果图代码 from tkinter import * reset=True de ...

使用jquery实现的计算器功能

晚上做了一个jQuery的项目，使用jQuery实现了一个简单的计算器功能，可以实现连加，连减，混合计算，括号内优先计算，代码如下：

使用jquery实现的计算器功能相关推荐

最新文章

热门文章