用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. Windows 下的 Sublime Text 2 配置汇总， Sublime Text 3 亦可借鉴

    1)软件下载地址:http://www.sublimetext.com/2 2)安装 Package Control ,方便安装和管理插件,网络资源很多,这里附上一篇:http://www.imjef ...

  2. javascript confirm()函数的用法

    javascript confirm()函数的用法 confirm():确认消息对话框.用于允许用户做选择的动作.弹出的对话框中包含一确定按钮和一取消按钮. confirm(str) 参数说明: st ...

  3. selinium的ruby版在windows8下安装

    1.安装ruby,当然windows下是最简单的装一个rubyinstaller,官网有.一步到位 2.因为selinium官网被墙,所以改成淘宝的一个资源库 gem sources --remove ...

  4. SQL 数据库的使用

    <1>存到数据库 CSql Sql; Sql.SqlSave(15, &m_SALink, 0, 0, 0, 0); <2>取数据 int *pt = new int[ ...

  5. ubnt+ros 接入无线

    ubnt+ros 接入无线 一.ubnt配置(UBNT NanoStation LOCOM2 LOCO M2)1.ubnt接poe,转lan接到pc2.ubnt默认ip是192.168.1.20,用户 ...

  6. input file上传文件扩展名限制

    方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...

  7. windows 下部署kafka 日记 转

    windows 下部署kafka 日记 转一.下载去apache 的官网(http://kafka.apache.org/downloads.html)下载最新的二进制版的压缩包.目前的最新版本是ka ...

  8. python基础教程之抽象

    很早知道python,但没有坚持学习.最近心血来潮,但能弥补这个遗憾. 对象几个重要概念: 多态:可以对不同类的对象使用同样的操作: 封装:对外部世界隐藏对象的工作细节: 继承:以普通的类为基础建立专 ...

  9. js中逻辑为false的8种情况

    如果对象无初始值或者其值为 0.-0.null."".false.undefined 或者 NaN,那么对象的逻辑值为 false. typeof 返回的是字符串,有六种可能:&q ...

  10. 字符数组，字符指针，字符串常量，以及sizeof的一些总结

    1.以字符串形式出现的,编译器都会为该字符串自动添加一个\0作为结尾 如在代码中写"abc",编译器帮你存储的是"abc\0". 2.数组的类型是由该数组所存放 ...