实现购物车结算功能：批量和全部删除，全选和反选，单价和总价，数量增减，页面隐藏和显示
2018-01-08 11:42
1206 查看
<!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-3.2.1.min.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){
$sco
4000
pe.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>
<!-- 显示￥符号也可以直接使用 ￥ 如<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实现购物车功能(按钮增减数量、添加、全选、删除、批量删除、结算)
- 购物车 结算功能,选中勾选状态可以显示所有选中的总价还有选中的数量,未选中不进行计算,删除功能
- RN的购物车实现( 数量,单价,总价,总数 )
- AJAX实现弹窗显示详情，全选和批量删除
- MVP实现购物车（二级列表），删除结算功能，拦截器+封装okHttp
- 购物车之 全选 反选 批量删除 包邮 总价
- .net开发中批量删除记录时实现全选功能的具体方法
- Jquery仿美团外卖等食品选择页面购物车数量加减功能实现
- asp.net实现批量删除的全选功能案例
- AngularJs实现添加,批量删除,全选,反选等功能
- JS实现复选框的全选和批量删除功能
- HTML angular购物车:加减按钮改变数量+全选+低于1时提示删除商品+计算所有商品总价+清空购物车+单独删除+输入内容小于1时,自动变为1+反选
- 实现购物车页面结算功能
- Android ExpandableListView 实现购物车页面 全选 多选编辑删除
- Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
- AngularJs实现添加,批量删除,全选,反选等功能
- 原生JS实现购物车的添加删除，以及总价计算的功能