实现购物车结算功能:批量/全部删除,全选,单价/总价,数量增减,页面隐藏/显示
2017-11-21 15:22
1061 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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="../jquery-1.11.1/jquery-2.1.0.js"></script> <script src="../angular-1.5.5/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>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</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> <!-- 显示¥符号也可以直接使用 ¥ 如<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>
相关文章推荐
- 实现购物车结算功能:批量/全部删除,全选,单价/总价,数量增减,页面隐藏/显示
- 实现购物车结算功能:批量和全部删除,全选和反选,单价和总价,数量增减,页面隐藏和显示
- 实现购物车结算功能:批量和全部删除,全选和反选,单价和总价,数量增减,页面隐藏和显示
- Angularjs实现购物车功能(按钮增减数量、添加、全选、删除、批量删除、结算)
- 购物车 结算功能,选中勾选状态可以显示所有选中的总价还有选中的数量,未选中不进行计算,删除功能
- Android ListView长按弹出CheckBox,实现全选,反选,批量删除功能
- 模拟网易邮箱实现全选,全不的功能/使用DataList实现 加入购物车,编辑,删除,更新,取消功能。/试完成Datalist使用存储过程来分页
- .net开发中批量删除记录时实现全选功能的具体方法
- 在页面中,我们经常看到,一个button按钮,如果属标点击,就会触发一个窗口的显示,如果二次点击并可以隐藏,那么如何通过JAVA配合html来实现这一功能呢?
- MVP实现购物车(二级列表),删除结算功能,拦截器+封装okHttp
- JS实现复选框的全选和批量删除功能
- 购物车之 全选 反选 批量删除 包邮 总价
- AngularJs实现添加,批量删除,全选,反选等功能
- AngularJs实现添加,批量删除,全选,反选等功能
- AngularJS购物车实现添加用户,修改用户,全选反选,批量删除
- 1模拟网易邮箱实现全选,全不的功能(服务端和客户端) 2 使用DataList实现 加入购物车,编辑,删除,更新,取消功能。要求连一个产品表。
- AngularJS实现的根据数量与单价计算总价功能示例
- Android ExpandableListView 实现购物车页面 全选 多选编辑删除
- HTML angular购物车:加减按钮改变数量+全选+低于1时提示删除商品+计算所有商品总价+清空购物车+单独删除+输入内容小于1时,自动变为1+反选
- 1怎样让输入的text文本填写的部分只添加数字、2怎样将输入的数字一次性全部删除 3怎样选择密码 让它不显示 4 怎样实现在没有return的情况下点击button的情况下就能够使键盘页面下落5 怎样实现点击指定的button来对使指定的text进行键盘弹出 6怎样改变button按钮的状态