用js实现收银功能。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>xx超市收银系统</title>

     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

     </script>

     <script type="text/javascript">

         $(function () {

             $('form').submit(function () {

                 var payable = Number($('#txtPayable').val());//应付

                 var payment = Number($('#txtPayment').val());//实付

                 if (payable === payment) {

                     $('#tdPocket').text(0);

                 } else if (payable > payment) {

                     $('#tdPocket').text('您还需再支付' + (payable*10 - payment*10)/10 + '元！');

                 } else {//需要找零

                     var yuan = [100, 50, 20, 10, 5, 1];

                     var jiao = [5, 2, 1];

                     var msg = '';

                     var payableYuan = parseInt(payable);

                     var paymentYuan = parseInt(payment);

                     var pocketYuan = paymentYuan - payableYuan;//找零元

                     var surplus = pocketYuan;

                     $(yuan).each(function() {

                             if (surplus >= this) {

                                 var count = parseInt(surplus / this);

                                 msg += this + '元' + count + '张';

                                 surplus -= count * this;

                             }

                     });

                     //在js中10.2-10.1=0.09999999999999964，防止小数误差，需要*10

                     var pocketJiao = parseInt(((payment * 10) - (payable * 10)) - (pocketYuan * 10));//找零角

                     surplus = pocketJiao;

                     $(jiao).each(function () {

                         if (surplus >= this) {

                             var count = parseInt(surplus / this);

                             msg += this + '角' + count + '张';

                             surplus -= count * this;

                         }

                     });

                     msg += '共' + pocketYuan + '.' + pocketJiao + '元';

                     $('#tdPocket').text(msg);

                 }

                 return false;

             });

         });

     </script>

     <style type="text/css">

         table {

             border: 1px solid #0000cd;

         }

         td {

             padding: 2px;

         }

         .right {

             text-align: right;

         } 

         .left {

             text-align: left;

             width: 50px;

         }

         .center {

             text-align: center;

         }

     </style>

 </head>

 <body>

     <form>

         <table border="1" cellpadding="0" cellspacing="0">

             <tr>

                 <td class="right">应付：</td>

                 <td class="left"><input type="number" id="txtPayable" min="0" step="any" /></td>

             </tr>

             <tr>

                 <td class="right">实付：</td>

                 <td class="left"><input type="number" id="txtPayment" min="0" step="any" /></td>

             </tr>

             <tr>

                 <td class="right">找零：</td>

                 <td class="left" id="tdPocket"></td>

             </tr>

             <tr>

                 <td colspan="2" class="center"><input type="submit" value="计算" id="btnCalc" /></td>

             </tr>

         </table>

     </form>

 </body>

 </html>

效果

样式有点丑，没时间去调。

找零时，从最大面值的钱开始找，找零5.1，找一张5元，而不是找5张1元。

只考现行的第五套人民币面值，不考虑分币，目前几乎不怎么流通分币了。

重点是算出零钱该找出x张y面值的钱，由于js对于小数计算有误差，需要先将小数换算成整数，再转成小数.

js中10.2-10.1结果是0.09999999999999964;

要想得到结果0.1,笨一点的办法(10.2*10-10.1*10)/10=0.1;

有了这款神器，是不是再也不用担心找错钱了?我还是比较喜欢收银员给我多找点钱:)

如果觉得对你有帮助，请点个赞，谢谢！

不足与错误之处，敬请批评指正！

锋利的js之妈妈再也不用担心我找错钱了的更多相关文章

  1. 妈妈再也不用担心我找不到spring源码了！

    获取spring源码: http://repo.springsource.org/libs-release-local/ http://repo.springsource.org/libs-relea ...

  2. 有了 tldr，妈妈再也不用担心我记不住命令了

    引言 有一次我在培训时说「程序员要善于使用 Terminal 以提高开发效率」,一位程序员反驳道:「这是 21 世纪,我们为什么要用落后的命令行,而不是先进的 GUI?」 是的,在一些人眼里,这个黑黑 ...

  3. 妈妈再也不用担心别人问我是否真正用过redis了

    1. Memcache与Redis的区别 1.1. 存储方式不同 1.2. 数据支持类型 1.3. 使用底层模型不同 2. Redis支持的数据类型 3. Redis的回收策略 4. Redis小命令 ...

  4. 妈妈再也不用担心我使用git了

    妈妈再也不用担心我使用git了 Dec 29, 2014 git git由于其灵活,速度快,离线工作等特点而倍受青睐,下面一步步来总结下git的基本命令和常用操作. 安装msysgit 下载地址:ms ...

  5. 利用CH341A编程器刷新BIOS，恢复BIOS，妈妈再也不用担心BIOS刷坏了

    前几天,修电脑主析就捣鼓刷BIOS,结果刷完黑屏开不了机,立刻意识到完了,BIOS刷错了.就从网上查资料,各种方法试了个遍,什么用处都没有.终于功夫不负有心人,找到了编码器,知道了怎么用.下面看看具体 ...

  6. python爬虫07 | 有了 BeautifulSoup ，妈妈再也不用担心我的正则表达式了

    我们上次做了 你的第一个爬虫,爬取当当网 Top 500 本五星好评书籍 有些朋友觉得 利用正则表达式去提取信息 太特么麻烦了 有没有什么别的方式 更方便过滤我们想要的内容啊 emmmm 你还别说 还 ...

  7. 有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了

    写在前面 说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...

  8. 妈妈再也不用担心我的移动端了：网易和淘宝的rem方案剖析

    从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...

  9. 【C#】妈妈再也不用担心自定义控件如何给特殊类型的属性添加默认值了，附自定义GroupBox一枚

    ------------------更新:201411190903------------------ 经过思考和实践,发现套路中的第1条是不必要的,就是完全可以不用定义一个名为Default+属性名 ...

随机推荐

  1. 《JavaScript模式》第5章 对象创建模式

    @by Ruth92(转载请注明出处) 第5章:对象创建模式 JavaScript 是一种简洁明了的语言,并没有其他语言中经常使用的一些特殊语法特征,如 命名空间.模块.包.私有属性 以及 静态成员 ...

  2. Insert Interval

    在已经排好序的区间中,插入一个新的区间,与merge的做法类似 Given a set of non-overlapping intervals, insert a new interval into ...

  3. notifyDataSetInvalidated()跟notifyDataSetChanged()的区别

    public void notifyDataSetChanged(): 通过一个外部的方法控制,如果适配器的内容改变了,那么就会强制调用getView来刷新每个Item的内容.这个方法内部实现了在每个 ...

  4. linux 给文件夹权限

    用的thinkphp3.2的框架,在本地运行没有问题,部署到服务器上(基于centos的LAMP环境)即报错_STORAGE_WRITE_ERROR_:./Application/Runtime/Ca ...

  5. python 类中staticmethod,classmethod,普通方法

    1.staticmethod:静态方法和全局函数类似,但是通过类和对象调用. 2.classmethod:类方法和类相关的方法,第一个参数是class对象(不是实例对象).在python中class也 ...

  6. tomcat内存溢出 PermGen space

    1. java.lang.OutOfMemoryError: PermGen space  ---- PermGen space溢出.  PermGen space的全称是Permanent Gene ...

  7. datalist的用法

    DataList 提供相关的编辑模板,但和DataGrid不一样的是,DataList没有编辑按钮.要在DataList中使用编辑功能,可在项模板中增加一个按 钮,Linkbutton和Button都 ...

  8. Hadoop学习15--编程相关

    1.新版本:mapreduce包 2.job设置: a.JobName便于调试 b.FileInputFormat.addInputPath 添加输入路径,可添加多个:可以是具体文件,还可以是文件夹. ...

  9. 鸟哥的linux私房菜学习

    cat /etc/shells 系统拥有的shellcat /etc/passwd 记录用户使用的shell按两次 tab 键可显示所有可执行的指令alias 查看所有命令的别名alias lm='l ...

  10. ASP.NET中进行消息处理(MSMQ) 一(转)

    MSMQ是微软消息队列的英文缩写.那么什么是消息队列?这些介绍网上一大片这里就不多说了.本文对于大虾级的人物来说这只是小玩意而已,对于初学者来说这文章还是有一定的帮助,希望路过的大虾们别笑话我班门弄斧 ...