<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

    <head>

        <meta charset="utf-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title>JQuery购物车多物品数量的加减+总价计算</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

        <script>

            $(function() {

                $(".add").click(function() {

                    var t = $(this).parent().find('input[class*=text_box]');

                    if(t.val()==""||undefined||null){

                        t.val(0);

                    }

                    t.val(parseInt(t.val()) + 1)

                    setTotal();

                })

                $(".min").click(function() {

                    var t = $(this).parent().find('input[class*=text_box]');

                    if(t.val()==""||undefined||null){

                        t.val(0);

                    }

                    t.val(parseInt(t.val()) - 1)

                    if(parseInt(t.val()) < 0) {

                        t.val(0);

                    }

                    setTotal();

                })

                $(".text_box").keyup(function(){

                    var t = $(this).parent().find('input[class*=text_box]');

                    if(parseInt(t.val())==""||undefined||null || isNaN(t.val())) {

                        t.val(0);

                    }

                    setTotal();

                })

                function setTotal() {

                    var s = 0;

                    $("#tab td").each(function() {

                        var t = $(this).find('input[class*=text_box]').val();

                        var p = $(this).find('span[class*=price]').text();

                        if(parseInt(t)==""||undefined||null || isNaN(t) || isNaN(parseInt(t))){

                            t=0;

                        }

                        s += parseInt(t) * parseFloat(p);

                    });

                    $("#total").html(s.toFixed(2));

                }

                setTotal();

            })

        </script>

        <style type="text/css">

        input[type=number] {

            -moz-appearance:textfield;

        }

        input[type=number]::-webkit-inner-spin-button,

        input[type=number]::-webkit-outer-spin-button {

            -webkit-appearance: none;

            margin: 0;

        }

        </style>

    </head>

    <body>

        <table id="tab">

            <tr>

                <td>

                    <span>单价:</span><span class="price">50.00</span>

                    <input class="min" name="" type="button" value="-" />

                    <input class="text_box" name="" type="number" value="" placeholder="0"/>

                    <input class="add" name="" type="button" value="+" />

                </td>

            </tr>

            <tr>

                <td>

                    <span>单价:</span><span class="price">25.50</span>

                    <input class="min" name="" type="button" value="-" />

                    <input class="text_box" name="" type="number" value="" placeholder="0"/>

                    <input class="add" name="" type="button" value="+" />

                </td>

            </tr>

        </table>

        <p>总价：<label id="total"></label></p>

    </body>

</html>

效果预览

JQuery购物车多物品数量的加减+总价计算的更多相关文章

  1. jQuery实现购物车多物品数量的加减+总价计算

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  2. jQuery实现购物车多物品数量的加减+总价+删除计算

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  3. Jquery实现购物车物品数量的加减特效

    今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...

  4. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  5. Jquery实现表单动态加减、ajax表单提交

    一直在搞Java后台开发,记得刚工作那一两年时间搞过前后端交互开发,用的东西也是五花八门,当时觉得做页面展示给别人看,是很有成就的事情,不过现在感觉自己跟纯前端开发比起来弱爆了,不过如果你的目标是作为 ...

  6. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  7. 自己动手丰衣足食之 jQuery 数量加减插件

    引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...

  8. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

  9. JavaScript 加减危机——为什么会出现这样的结果？

    在日常工作计算中,我们如履薄冰,但是 JavaScript 总能给我们这样那样的 surprise~ 0.1 + 0.2 = ? 1 - 0.9 = ? 如果小伙伴给出内心的结果: 0.1 + 0.2 ...

随机推荐

  1. [转帖]Chrome用户请尽快更新：谷歌发现两个严重的零日漏洞

    Chrome用户请尽快更新:谷歌发现两个严重的零日漏洞 https://news.cnblogs.com/n/647075/ 强烈建议:Chrome 用户请尽快升级浏览器!在谷歌今天发布的紧急补丁程序 ...

  2. windows server系统打印服务配置

    系统环境:windows server 2008 R2 Enterprise Service Pack 1 安装内存:8G 系统类型:64位操作系统 目标:在此系统上开启打印服务,可以添加网络打印机 ...

  3. C++容器简介1—stack

    一.简介 stack是一种容器适配器(STL的容器分为顺序容器和关联容器,容器适配器),被设计来用于操作先进后出(FILO)结构的情景,在这种情况下, 元素的插入和删除都只能在容器的尾部进行. sta ...

  4. 100天搞定机器学习|Day55 最大熵模型

    1.熵的定义 熵最早是一个物理学概念,由克劳修斯于1854年提出,它是描述事物无序性的参数,跟热力学第二定律的宏观方向性有关:在不加外力的情况下,总是往混乱状态改变.熵增是宇宙的基本定律,自然的有序状 ...

  5. "CreateProcess error=206, 文件名或扩展名太长。"，用gradle构建项目创建mapper文件时提示这个错误，是Windows Gradle长类路径问题，官方已经修复

    用gradle构建项目mapper文件时,提示这个错误,这个是Windows Gradle长类路径问题, gradle官方已经解决了这个问题. 官网给出的解决方法地址:https://plugins. ...

  6. 小程序day1-day3随笔

    0==小程序的结构和组件 1==小程序常用组件:text文本属性 3==小程序UI组件view的属性hover 鼠标点击出现的效果hover 4==小程序ui组件button按钮组件的属性 5==小程 ...

  7. 一行代码让3D翻转后的文本恢复清晰

    FlashPlayer10提供的3D功能有一个相当蛋疼的问题:只要设置过rotationX.rotationY或者rotationZ属性,显示对象里面的文字(尤其是设备字体,位图文本)就会一直处于模糊 ...

  8. Ted演讲 The secrets of learning a new language

    第一次写这么多英文~~对照双语字幕整理的~~ 这是我很喜欢的一个演讲~~ 让我们一起学英文吧 l  I love learning foreign languages. l  In fact, I l ...

  9. ESP8266 智能家居简单实现

    本文转自CSDN,地址 https://blog.csdn.net/jsagacity/article/details/78531819 全文如下 : 前段时间,公司利用 ESP8266 这个WiFi ...

  10. wc命令——Linux系统高效数据统计工具

    wc(world count)是一个统计文件字词,字节,行数的Linux命令,它可以帮我们非常方便的统计以上信息. 主要参数 常见参数如下: -c 统计字节数. -l 统计行数. -m 统计字符数.这 ...