用JQuery写一个计算器

wanghui 发布于2019-08-22 14:06 / 1554人阅读

摘要：因为觉得的界面比漂亮一些，所以最近正在把博客迁移到这边来，这几天多发了两篇作为一个学习中练手的小，选了一个计算器。，选取一个字符串的指定长度的字符。检查元素是否含有指定的类名。代码经过初步测试，能正常使用。

因为觉得segment fault的markdown界面比CSDN漂亮一些，所以最近正在把博客迁移到这边来，这几天多发了两篇.....

作为一个学习中练手的小demo，选了一个计算器。原因大概只是因为早就想做，比较简单，又确实有很多地方不太清楚，所以选了这个玩意，其实看网上的许多源码，做起来不是很难，但是我还是写了差不多一个礼拜，每天中午午休的一个小时加上下班后的1个小时，星期天也弄了差不都一天，终于基本把整体的功能都完成了，后期我想再迭代优化一下，加上一些CSS3的动画和响应式的功能，让这个小demo可以在手机上跑起来。不过这都是后话了。

废话不多说，上代码吧：

代码知识点

因为主要用了JQ的代码，所以知识点主要是JQ的。

1.substr（start，length）：选取一个字符串的指定长度的字符。
start为必须参数，是字符串开始位置的index值，length非必须，指定字符串的长度。这个方法会返回指定的字符串。

2.hasClass（className）：检查元素是否含有指定的类名。
className不需要带“.”。常用if判断；例：

`if($(this).hasClass("btn_plus")){

change=1;
}`

3.其他的代码十分常用，也没有必要一一列出了。

实现原理

由于在网上看的代码太长，理解够呛，所以这个demo基本上是笔者自己的创作，其中某些思想有借鉴网络，但主要的实现皆为本人。

原理是将数字存储为字符串result，按运算符（+-*/）的时候存储字符串result为第一个数字result_1，同时根据按的不同的运算符，赋给变量change不同的值；并且把result清空以便保存第二个字符串。再输入完第二段字符串时，把它再次赋给result，当按等于符的时候，把result赋给result_2；同时，根据change值的不同，进行不同的运算，得出结果，显示在屏幕上。

其中用了大量的if判断，以至于层层叠叠，我都怕会出什么问题......

最后附上我的github地址，如果你觉得对你有帮助的话，请尽情地用fork和star来“羞辱”我吧！

问题

说不上来问题在哪，感觉代码写得太乱，有点随机应变的感觉，没有很好地做到事先规划，有一种头疼医头脚疼医脚的感觉。

1.在处理负号符的时候，导致了result的值有时是字符串，有时又是数字，我的初衷是在处理字符本身的时候始终以字符串的形式存在，当要调整正负和运算的时候再变成数字，可是由于后期的代码变得冗长，导致我自己越来越糊涂，只能应付了事。

2.迭代。我本来希望能在一个礼拜做成一个能在手机使用的小应用，但是由于时间的计划不太合理，前期的基本功能用了太久才完成。后面我想完善起来，结合响应式，这应该不难。

PS：代码经过初步测试，能正常使用。大神发现有什么bug的，欢迎拍砖指点。

GPU云服务器云服务器用html写一个秒表用php写一个日志用java写一个单例用c语言写简单计算器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92854.html

26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0
Dom详解

摘要：例子第三级的同级的第二个获取元素复制代码两个都包含的元素，一个在文档树的前面，但是它在第三级，另一个在文档树的后面，但它在第一级，通过获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素。对象就是通过包装对象后产生的对象。 DOM JavaScript 的组成组成部分说明 Ecmascript 描述了该语言的语法和基本对象 DOM 描述了处理网页内容的方法和接...

liuhh 2019-08-26 10:36 评论0 收藏0
前端知识普及之页面加载

摘要：如果你的文件涉及操作，可以直接在里面添加回调函数，或者说基本上我们的文件都可以写在里面进行调用其实，这和我们将文件放在底部，在上面加以及异步加载文件的效果是一样一样的。如果大家想继续看下面的内容的话，有一个要求，就是回答我一个问题:你这样写过代码吗？ window.onload = function(){ $(.gravatar).on(click,function(){ ...

tianyu 2019-08-19 17:38 评论0 收藏0
用jquery写贪吃蛇

需要具备知识：1.html、css基础2.jquery基础具体实现方法：创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

gitmilk 2019-08-02 13:59 评论0 收藏0
用jquery写贪吃蛇

需要具备知识：1.html、css基础2.jquery基础具体实现方法：创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

h9911 2019-08-23 14:20 评论0 收藏0