用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. 【Avalon源码】iterator

    function iterator(vars, body, ret) { var fun = 'for(var ' + vars + 'i=0,n = this.length; i < n; i ...

  2. [读书笔记]OSGI-灵活的类加载器架构

    以下内容来自周志明的<深入理解Java虚拟机>. 学习JEE规范,去看JBoss源码:学习类加载器,就去看OSGI源码. OSGI,即Open Service Gateway Initia ...

  3. ueditor在使用requirejs时，报ZeroClipboard undefined错误

    再网上找到了 http://blog.csdn.net/xundh/article/details/44536665       这样一篇文章, 其中原因说的很明白了 是因为在有requirejs时, ...

  4. Codeforces Round #156 (Div. 2)

    A. Greg's Workout 模3求和,算最大值. B. Code Parsing 最后左半部分为x,右半部分为y,那么从中间不断去掉xy,直到其中一种全部消去. C. Almost Arith ...

  5. Generator 函数学习笔记

    // 使用 function* 定义一个 generator 函数 function* helloWorldGenerator() { yield 'hello'; // yield 关键字作为暂停的 ...

  6. HackerRank "Prim's (MST) : Special Subtree"

    An intuitive Prim algorithm impl. #include <vector> #include <iostream> #include <que ...

  7. Linxu IO测试软件

    fio 安装 apt-get install fio fdisk -l Device Boot Start End Blocks Id System/dev/sda1 * 2048 968390655 ...

  8. try-catch（C# 参考）

    https://msdn.microsoft.com/zh-cn/library/0yd65esw.aspx Try-catch 语句包含一个后接一个或多个 catch 子句的 try 块,这些子句指 ...

  9. 每天一个 Linux 命令(12)：more命令

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...

  10. oracle的char和varchar类型

    源地址:https://zhidao.baidu.com/question/140310197.html varchar与char的区别就在于是否可变长度.char(5)就是定义一个5个字符长度的字符 ...