JS购物车编辑

实现了：第一件商品的加减
实现了：全选/全不选（使用prop而不是attr）
实现了：删除（遮罩层）

未实现：第二件商品的删除
未实现：小计及应付款额的初始化（写死的）

计算小数乘法时，要先乘100

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style>

        .div1 {

            border: 1px solid gainsboro;

            width: 950px;

            height: 60px;

        }

        .div-checkbox,

        .div-goods,

        .div-amount,

        .div-unit-price,

        .div-price,

        .div-del {

            border: 1px solid;

            width: 60px;

            height: 20px;

            padding: 20px;

            float: left;

            text-align: center;

        }

        .div-price {

            width: 100px;

        }

        .div-goods {

            width: 140px;

        }

        .div-amount {

            width: 140px;

        }

        .div-unit-price {

            width: 50px;

        }

        .div-total-price {

            border: 1px solid gainsboro;

            width: 950px;

            height: 60px;

            text-align: right;

        }

        .div-submit {

            width: 950px;

            text-align: right;

        }

        div#cover {

            /*遮罩层*/

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 1000px;

            z-index: 100;

            display: none;

            background-color: grey;

        }

        div#prompt {

            /*弹窗*/

            border: 2px solid yellow;

            display: none;

            position: fixed;

            top: 100px;

            left: 500px;

            z-index: 101;

            width: 300px;

            height: 200px;

        }

    </style>

    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

    <script>

        $(function() {

            //全选

            var i = 0;

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

                i++;

                if (i % 2 != 0) {

                    //此处用attr则只能选中/取消一次

                    $(".cls-checked").prop("checked", true);

                } else {

                    $(".cls-checked").prop("checked", false);

                }

            });

            //通过name获取某一商品的按钮

            $("input[name='btn1']").click(function() {

                //数量

                var _amount = parseInt($("#id-txt-amount1").val());

                if ($(this).val() == "+") {

                    _amount++;

                } else if ($(this).val() == "-") {

                    if (_amount == 1) {

                        //必须买!

                        return;

                    }

                    _amount--;

                }

                $("#id-txt-amount1").attr("value", _amount);

                // 本商品的总价

                var _unitPrice = $("#id-unit-price1").html();

                var _thisPrice = parseFloat(_unitPrice * 100 * _amount / 100).toFixed(2);

                $("#id-price1").html(_thisPrice);

                // 总价

                var _otherPrice = $("#id-price2").html();

                var _totalPrice = parseFloat(_thisPrice + _otherPrice).toFixed(2);

                $("#id-total-price").html(_totalPrice);

            });

            //删除一条

            $(".div-del a").click(function() {

                showPrompt(this);

            });

        });

        function showPrompt(obj) {

            $("#cover").css("display", "block");

            // 10毫秒内透明度降为0.5

            $("#cover").fadeTo(10, 0.5);

            $("#prompt").css("display", "block");

            $("#prompt a").click(function() {

                $("#cover").css("display", "none");

                $("#prompt").css("display", "none");

                return;

            });

            $("#prompt input").click(function() {

                $("#cover").css("display", "none");

                $("#prompt").css("display", "none");

                $(obj).each(function() {

                    $(obj).parent("div").parent("div").remove();

                });

            });

        }

    </script>

    <body>

        <!--遮罩层-->

        <div id="cover"></div>

        <!--弹窗-->

        <div id="prompt">

            <div style="width: 100%;height: 20px;text-align: right;background-color: gray;">

                <a href="#">关闭</a>

            </div>

            <div style="text-align: center;background-color: white;width: 300px;height: 180px;line-height: 100px;">

                确认删除吗？

                <br />

                <input type="button" value="确定" />

            </div>

        </div>

        <!--表头------------------------------------------------------->

        <div class="div1">

            <div class="div-checkbox">

                <input type="checkbox" class="allPic"><b>全选</b></input>

            </div>

            <div class="div-goods"><b>项目</b></div>

            <div class="div-amount"><b>数量</b></div>

            <div class="div-unit-price"><b>单价</b></div>

            <div class="div-price"><b>小计</b></div>

            <div class="div-del"></div>

        </div>

        <!--第一行------------------------------------------------------->

        <div class="div1">

            <div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div>

            <div class="div-goods">

                A

            </div>

            <div class="div-amount">

                <input type="button" value="-" name="btn1" />

                <input type="text" size="2" value="1" id="id-txt-amount1" />

                <input type="button" value="+" name="btn1" />

            </div>

            <div class="div-unit-price">

                ￥<span id="id-unit-price1">9.90</span>

            </div>

            <div class="div-price">￥<span id="id-price1">2.00</span></div>

            <div class="div-del"><a href="#">删除</a></div>

        </div>

        <!--第二行（未实现加减）------------------------------------------------------->

        <div class="div1">

            <div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div>

            <div class="div-goods">

                B

            </div>

            <div class="div-amount">

                <input type="button" value="-" class="btn2" />

                <input type="text" size="2" value="1" id="id-txt-amount2" />

                <input type="button" value="+" class="btn2" />

            </div>

            <div class="div-unit-price">

                ￥<span id="id-unit-price2">2.00</span>

            </div>

            <div class="div-price">￥<span id="id-price2">2.00</span></div>

            <div class="div-del"><a href="#">删除</a></div>

        </div>

        <div class="div-total-price">应付款额： ￥

            <span id="id-total-price">11.90</span>

        </div>

        <div class="div-submit">

            <input type="submit" />

        </div>

    </body>

</html>

JS购物车编辑的更多相关文章

JQuery案例：购物车编辑
购物车编辑实现了:商品的加减,总价的变动实现了:全选/全不选(使用prop而不是attr) 实现了:删除(遮罩层) <html> <head> <meta chars ...
js获取编辑框游标的位置
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
简单实用angular.js购物车功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Eclipse中jsp、js文件编辑时，卡死现象解决汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
js购物车计算价格
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...
jira7通过全局js给编辑区自定义快捷键【原】
jira7编辑区自定义快捷键本文主要描述了jira7如何通过添加全局js引用,给文本编辑区自定义快捷键用以快速填充模板内容. jira 3/4/5可参考官方api https://developer ...
vue.js购物车
vue.js https://cn.vuejs.org/v2/guide/ 简单购物车 <html> <head> <script src="https://c ...
js 购物车的实现
购物车原理:创建一个构造函数,把涉及到的项目写成方法,然后把这些方法放到构造函数的原型对象上,通过按钮绑定,调用原型对象上的方法,实现对涉及项目的改变 html代码: <!DOCTYPE htm ...
三.jquery.datatables.js表格编辑与删除
1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...

随机推荐

NAT资料
第1章 NAT 1.1 NAT概述 1990年代中期,NAT是作为一种解决IPv4地址短缺以避免保留IP地址困难的方案而流行起来的.网络地址转换在很多国家都有很广泛的使用.所以NAT就成了家庭和小型办 ...
idea：打包jar（原文by曲高终和寡）
idea打包java可执行jar包 1,在项目上鼠标右键 --> Open Module Settings 2, Artifacts --> + --> JAR --> F ...
Django--QuerySet--基础查询
Django--QuerySet--基础查询创建模型类: from django.db import models # Create your models here. class Blog(mod ...
原生js小球运动
//html代码 <input type="button" value="小球运动" /> <div></div> //js ...
1. Django概述
1.1 设计模型 Django,但它附带了一个你可以用python代码描述数据库布局的对象关系映射器. 数据模型语法提供了许多丰富的方法来展现你的模型——到目前为止,它解决了多年来数据库模式问题. 简 ...
Windows下dos命令行
Dos命令--基本命令 1.求助命令例如:del /? rd /? 2.基本常用命令例如:dir :列出当前目录下的文件以及文件夹,后面可以接其他路径 md:创建目录(mkdir),一次创建多级目 ...
Linux系统基本操作命令
1.文件与文件夹(目录)操作命令可以参考:http://www.runoob.com/linux/linux-command-manual.html 1)rm:删除命令例:$ rm -i 文 ...
使用jsoup轻松爬数据
刚刚学习爬虫,感觉使用jsoup爬虫挺容易的.记录一下自己爬取数据的过程. Jsoup介绍: Jsoup 是一个 Java 的开源HTML解析器,可直接解析某个URL地址.HTML文本内容.使用Jso ...
vscode下调试运行c++
vscode是微软的最新产品,轻量易用,最初是前端用的多,尤其是typescript,因为vscode的作者也是typescipt作者.一般c++的IDE很多,比如visual studio等,但是都 ...
CentOS 7 命令行安装TeamViewer
由于要通过要远程登录到内网的电脑(一台笔记本),用于在紧急情况下处理服务器故障.刚开始准备使用ssh端口转发,无奈vps转发速度太慢. 后面考虑使用TeamViewer远程控制Windows桌面,但是 ...

JS购物车编辑

JS购物车编辑的更多相关文章

随机推荐

热门专题