实现购物车结算功能：批量和全部删除，全选和反选，单价和总价，数量增减，页面隐藏和显示

需求：

要求：技术要求（html+css+angularjs）

1. 完成页面布局，如图1.1（button按钮可以用普通按钮）

2.Ø声明数据对象，初始化商品信息，数据自拟且不低于四条

3. 用ng-repaet指令将对象遍历并渲染到页面中

4.Ø点击”+”按钮输入框中的数量加1，同时可以计算出商品小计和购物车总价。同理，当点击”-”按钮时输入框中的数量减1，商品小计和购物车总价都会改变。在输入框中手动输入数量值，商品小计和购物车总价动态改变。

5. 使用AngularJS的过滤器在商品价格、商品小计、购物车总价前加”￥：”。

6. 当商品数量为1，用户点击”-”操作时，弹出对话框，询问用户是否删除该商品。如图1.2 当用户点击”确认”时删除该条商品信息，当用户点击”取消”时商品恢复原来数量。

7. 用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除，若购物车商品被全部删除后，展示如图1.3

效果图：

图1.1

图1.2

图1.3

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现购物车结算功能：批量/全部删除，全选/反选，单价/总价，数量增减，页面隐藏/显示</title>
    <style type="text/css">
       .mouse_color{
           background-color: #cccccc;
       }
        .num{
            width: 50px;
        }
        a{
            text-decoration: none;
        }
       #btn1,#btn2{
            color:white;
            width: 100px;
            float: right;
            border: solid red;
            margin-right: 88px;
            background-color: #ff3b30;
        }
    </style>
    <script src="../js/jquery-2.1.0.js"></script>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">
        $(function () {
            // 鼠标移到行的颜色:光标在表格上移动，当前行变色；( mousemove或mouseover )
            $("#tab tr").mouseover(function () {
                $(this).addClass("mouse_color");
            });
            // 鼠标移出行的颜色:离开当前行，颜色恢复
            $("#tab tr").mouseout(function () {
                $(this).removeClass("mouse_color");
            });
        });
    </script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            //1. 声明数据对象，初始化商品信息，数据自拟且不低于四条
            $scope.Products = [
                {name:"qq",price:12.90,number:1,totalPrice:12.90,state:false},
                {name:"wx",price:23.90,number:1,totalPrice:23.90,state:false},
                {name:"cn",price:99.90,number:1,totalPrice:99.90,state:false},
                {name:"us",price:2.90,number:1,totalPrice:2.90,state:false},
                {name:"jp",price:0.90,number:1,totalPrice:0.90,state:false}
            ];

            //2. 减少数量函数
            $scope.less = function (index) {
                if($scope.Products[index].number > 1){
                    $scope.Products[index].number--;
                }else {
                    //跳转到删除按钮事件处
                    $scope.remove(index);
                }
            }
            //3. 添加数量函数
            $scope.add = function (index) {
                $scope.Products[index].number++;
            }

            //4. 所有商品总价函数
            $scope.AlltotalPrice = function () {
                var allPrice = 0;
                for(var i = 0;i<$scope.Products.length;i++){
                    allPrice +=  $scope.Products[i].number * $scope.Products[i].price;
                    allPrice.toFixed(2);        //保留两位小数
                }
                return allPrice.toFixed(2);;
            }

            //5. 输入框输入负数或其它除数字外的内容时，输入框内容要变为1
            $scope.change = function (index) {
                if($scope.Products[index].number >= 1){
                }else {
                    $scope.Products[index].number = 1;
                }
            }

            //6.购买总数量函数
            $scope.numAll = function () {
                var numAlls = 0;
                for(var i = 0;i<$scope.Products.length;i++){
                    numAlls += $scope.Products[i].number;
                }
                return numAlls;
            }

            //7. 点击删除按钮操作，弹出对话框，询问用户是否删除该商品。
            $scope.remove = function (index) {
                if(confirm("您是否要将该商品移除购物车？")){
                    $scope.Products.splice(index,1);
                }
            }

            //8.点击 清空购物车 按钮，清空商品信息
            $scope.clear = function () {
                if(confirm("您是否准备清空购物车？")){
                    $scope.Products = [];
                }
            }

            //9. 点击批量删除按钮的函数：用户没有选中任意复选框时点击批量删除按钮提示用户先进行选中要删除的商品信息
            $scope.delSelect = function () {
                var ProductsNames = [];  //定义空数组，保存选中项的name
                //根据下标遍历数据源，把选中项的名字添加到数组中。
                for(index in $scope.Products){
                    //判断选项是否为选中的的状态？
                    if($scope.Products[index].state == true){
                        ProductsNames.push($scope.Products[index].name);
                    }
                }

                //遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。
                if(ProductsNames.length >0 ){
                    if(confirm("您是否要将选择的商品移除购物车？")){
                        for(i in ProductsNames){
                            var name = ProductsNames[i];
                            //对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。
                            for(y in $scope.Products){
                                if (name == $scope.Products[y].name){
                                    $scope.Products.splice(y,1);
                                }
                            }
                        }
                    }
                }else {
                    alert("请先选择要移除的商品项");
                }
            }

            //10. 全选复选按钮 的点击事件
            $scope.selectAll = false;
            $scope.selectAllFun = function () {
                //如果全选按钮为true时，就把数组的state状态变为true
                if($scope.selectAll){
                    for(index in $scope.Products){
                        $scope.Products[index].state = true;
                    }
                }else {
                    for(index in $scope.Products){
                        $scope.Products[index].state = false;
                    }
                }

            }
            //单个复选框按钮的点击事件：根据点击的单个复选框按钮的下标的state 检测内容是否全选
            $scope.checkSelect = function (index) {
                var temp = 0;
                if($scope.Products[index].state == true){
                    temp++;
                }else {
                    temp--;
                }

                //定义的变量大小等于数组的长度，代表内容全选，表示全选按钮为true
                if(temp == $scope.Products.length  ){
                    $scope.selectAll = true;
                }else {
                    $scope.selectAll = false;
                }

                //定义标志位checkState，默认为false
                var checkState = false;
                for(i in $scope.Products){
                    if($scope.Products[i].state == true){
                    }else {
                        //数据源中的标志位变量state不是全部等于true时，标志位checkState才为true
                        checkState = true;
                    }
                }
                if(checkState){
                    //标志位checkState为true时，全选按钮就为false
                    $scope.selectAll = false;
                }else {
                    $scope.selectAll = true;
                }
            }

            //11. 判断数据源的长度：长度为0时，即购物车为空，页面就提示：您的购物车为空，去逛商场
            $scope.showContent = function () {
                if($scope.Products.length > 0){
                    return false;
                }else {
                    return true;
                }
            }
        });
    </script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<h2>我的购物车</h2>
<hr style="size: 1px;background-color: #F5F5F5;width: 100%;">   <br>
    <button ng-click="delSelect()" id="btn1" > 批量删除 </button>
    <button ng-click="clear()" id="btn2" > 清空购物车 </button>   <br><br>

<center>
    <table id="tab" ng-hide="showContent()" border="1 solid #F5F5F5;" cellspacing="0" cellpadding="1" width="888" height="333">
        <thead>
            <tr align="left">
                <!--    全选复选按钮    -->
                <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
                <th>name</th>
                <th>price</th>
                <th>number</th>
                <th>totalPrice</th>
                <th>option</th>
            </tr>
        </thead>
        <tbody>
            <!--    用ng-repaet指令将对象遍历并渲染到页面中    -->
            <!--    使用AngularJS的过滤器在商品价格、商品小计、购物车总价前加”￥：”   -->
            <tr ng-repeat="goods in Products">
                <!--    单个 复选按钮    -->
                <th align="left"><input type="checkbox" ng-model="goods.state"  ng-click="checkSelect($index)"></th>
                <td>{{goods.name}}</td>
                <td>￥:{{goods.price.toFixed(2)}}</td>
                <td>
                    <!--    点击”+”按钮输入框中的数量加1，同时可以计算出商品小计和购物车总价。 -->
                    <button ng-click="less($index)" style="background-color: #007aff;color: white;border: solid #007aff;">-</button>

                    <input type="text" class="num" ng-model="goods.number" ng-change="change($index)">

                    <!--    当点击”-”按钮时输入框中的数量减1，商品小计和购物车总价都会改变。  -->
                    <button ng-click="add($index)" style="background-color: #007aff;color: white;border: solid #007aff;">+</button> </td>
                </td>
                <td>￥:{{(goods.price * goods.number).toFixed(2)}}</td>
                <td><button ng-click="remove($index)" style="background-color: #007aff;color: white;border: solid #007aff;">删除</button></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">
                    购买数量：<span>{{numAll()}}</span> &nbsp;&nbsp;
                    <!--    显示￥符号也可以直接使用  ￥  如<td colspan="6">总价为：￥:<span ng-bind="AlltotalPrice()"></span></td>    -->
                    总价为：<span ng-bind="AlltotalPrice() | currency:'￥'"></span>
                </td>
            </tr>
        </tfoot>
    </table>

    <!--    购物车为空时选择显示的内容   -->
    <p ng-show="showContent()">您的购物车为空，<a href="https://world.taobao.com/">去逛商场</a></p>
</center>
</body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

那些逝去的岁月-档案
前天向赐哥要的华姐爱人的电话，前天晚上联系上姐夫，让他帮我去办理一下档案的事，昨天把我身份证复印件传真过去，首次用传真，真神奇，我觉得我都out了。那边姐夫还挺热心的。今天早上就给我打了2电话，第一个电话就是确认下我毕业的时间、毕业学校、名字，这些信息我还真漏…...
2024/4/17 9:34:51
halcon相机标定及图像矫正（代码）
1 halcon相机标定和图像矫正对于相机采集的图片，会由于相机本身和透镜的影响产生形变，通常需要对相机进行标定，获取相机的内参或内外参，然后矫正其畸变。相机畸变主要分为径向畸变和切向畸变，其中径向畸变是由透镜造成的，切向畸变是由成像仪与相机透镜的不平行造成的。针…...
2024/4/17 9:35:03
隻去掉小數點後，末位的0
FORM REMOVE_RADIX_POINT_ZERO USING PF_DIGIT PF_VALUE PF_STRVAL. "小數點后的位數，原值，字符值 DATA: L_QTY TYPE I, L_LEN TYPE I.L_QTY = PF_VALUE. IF L_QTY = PF_VALUE. PF_STRVAL = L_QTY. …...
2024/4/17 9:34:39
用C++扩展PHP
前端时间写过一个Repl的PHP Extension, 记得当时在国内的中文网站上,相关的资料真的很少, 今天就抛砖引玉写一些,希望对后来者有所帮助, 那些基本的东西我就不赘述了, 主要谈谈, PHP Exitension和 PHP 之间的参数传递问题;先说说我写的那个PHP Extension, 因为Repl(Yahoo的一个…...
2024/4/19 19:08:55
Java循环-搬砖问题
@Testpublic void test6() {/** 搬砖问题：36 块砖，36 人搬，男搬 4，女搬 3，两个小孩抬 1 砖，要求一次全搬完，问男、女和小孩各若干？*/int man, woman, child;int brick = 36;// 砖头数量int count = 36;// 人数for (man = 0; man < brick / 4; man++) {for (woman = …...
2024/5/6 23:25:27
多商铺购物车查询排除重复商家
2019独角兽企业重金招聘Python工程师标准>>> 实例：两个不同的店铺查询如果：相同店铺：结果： ok转载于:https://my.oschina.net/u/3794433/blog/2048773...
2024/5/5 4:54:54
视觉测量—相机标定
随着计算机视觉的飞速发展，计算机视觉已经越来越多的应用于空间几何尺寸的精确测量和定位，摄像机作为视觉测量的关键部件，相机标定自然是视觉测量的一项重要工作。 1、标定原因在视觉测量过程中，为确定空间物体特征点的三维几何位置与其在图像中对应点之间的相互关系，必须…...
2024/4/23 20:39:32
实验吧-你真的会PHP吗？writeup
首先fiddler抓包，在response header中发现hint:6c525af4059b4fe7d8c33a.txt,打开后找到index.php源码<?php $info = ""; $req = []; $flag="xxxxxxxxxx";ini_set("display_error", false); error_reporting(0); if(!isset($_POST[number…...
2024/5/3 23:40:21
4月收支情况登记
1 号星期三中餐 7元2号星期四中餐 7元3号星期五中餐 7元请人吃饭 7元请姐夫，卢君胜吃饭 100元4号星期六请姐夫吃中餐 50元请姐夫和军武晚餐 50元5号星期天请姐夫吃中餐 50元6号星期一请龚双和刘迪吃饭 90元7号星期二中餐 7元8号星期三中餐 7元9号星期四中…...
2024/4/1 14:05:06
Java实验--超级简单的计算器
学了Java的GUI后，做了个super简单的计算器，只能做加法。（萌新日常记录，大佬发现有什么问题欢迎评论区留言）都是很简单的知识，其中主要涉及GridLayout布局的应用、添加监听器、两个控件、还有响应事件、内部类… 详细代码如下： import java.awt.*; import java.awt.even…...
2024/4/17 9:34:45
购物车课程设计实验报告
1、团队成员介绍：组长：穆浩然，组员：林聪杰，罗家宏，朱心溁任务分配：　穆浩然：编写UserInfo类和Commodity类，撰写博客；林聪杰：商品和购物车界面；罗家宏：用户登入界面；朱心溁：数据库。 2、项目git地址 https://gitee.com/UM_L/shopping_cart_course_design 3、gi…...
2024/4/17 9:34:27
相机标定——基础知识整理
相机标定是用于获取相机畸变，内参数和外参数的一个操作，是机器视觉中不可或缺的一个重要步骤。畸变是相机因其自身成像特性无法避免产生的图像变形。内参数是对相机内部特性的描述，包括相机图像中心、相机焦距等。外参数描述的是相机在世界坐标系上的位置和方向。一、畸变系…...
2024/4/17 9:34:33
如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
作者：未知请作者速与本人联系步入IT业已经有几年的时间了,从最早接触pb6.0到现在.Net技术,计算机技术不论是从硬件还是软件都有巨大的进步.而中国程序员总体水平在世界上也是远远落后，其中缺乏完善的体系、必要的交流和程序员个人英雄主义的思想是主要原因.前不久在工作中…...
2024/5/4 12:28:28
编译原理：词法分析实验报告
词法分析实验报告文章目录词法分析实验报告一、实验目的二、实验原理三、实验要求四、实验步骤（利用Java语言来进行词法分析）①　待分析的语言词法②　单词符号对应的种别码③　词法分析程序流程图④　编写程序（见源程序代码文件）⑤　测试结果（见输入输出文件）五、运行结…...
2024/4/24 22:52:49
java梦
看来我也不用这么早回去了，其实，我也想在家的，我姐夫帮我在教育局找到了一份工作，嘿嘿。有着落，一切都可以慢慢来。没什么大不了的。我又可以安安心心的去实现我的JAVA梦了哦，嘿嘿，我姐夫帮我找了个网络中心的工作，不知道怎么样，哈哈，总算心里放下个石头了。大笑。 …...
2024/4/17 9:34:39
购物车多sku组合查询算法
购物车多sku组合查询算法http://blog.csdn.net/xie244135119/article/details/77747220下载地址：https://github.com/xie244135119/ChooseSkuDemo...
2024/4/17 9:34:33
xslt点滴
1。引入文档声明xhtml文件开头要求有文档声明,例aspx自动产生的是 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">解决方法：在xslt文件中声明<xsl:output method="html&…...
2024/4/17 9:35:46
Java课程设计 --- 词典笔记，对自己的单词本进行增删改查
登陆界面是Login.java文件，登陆账号为001，密码为123。Login.javaimport java.awt.Font; import java.awt.GridLayout; import javax.swing.*; import java.awt.event.*;public class Login extends JFrame{JPanel jp0,jp1,jp2,jp3;JLabel jlb1,jlb2;JButton jb1,jb2;JTextFie…...
2024/4/17 9:35:28
何时才能大富大贵
公司的减肥哈开始的恢复阿卡世界打开大姐夫卡时间豆腐阿杜康师傅暗示的话官方会计师的供货方科技按时打发士大夫阿士大夫啊是打飞机开啊是打飞机开哈里斯的回复拉丝机快点发生借款老地方卢卡斯的回复拉斯加豆腐了卷卡式带付款了坚实的发了可接受的富利卡就是大富豪拉时刻记得发…...
2024/4/24 17:13:45
cookie实现购物车与session的登录判断
Cookie是由服务器端生成，发送给客户端，在客户端存储，而session是有服务器端生成，并存储于服务器端，因而session比cookie安全。但是如果什么都放session的话，会拖垮服务器的。要实现购物车，首先我们用js模拟一个商品对象，这里只给出了加入购物车的功能use strict; var …...
2024/5/4 12:34:54

实现购物车结算功能：批量和全部删除，全选和反选，单价和总价，数量增减，页面隐藏和显示

相关文章

最新文章