购物车的综合

来源：互联网发布：社交网络用户数量编辑：程序博客网时间：2024/06/05 01:56
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            h3 {                margin-right: 400px;            }            table,            th,            td {                border: 1px solid grey;                border-collapse: collapse;                padding: 5px;            }            table tr:nth-child(odd) {                background-color: #f1f1f1;            }            table tr:nth-child(even) {                background-color: #ffffff;            }            #mydiv {                display: none            }        </style>        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>        <script>            var app = angular.module("myapp", []);            app.controller("myctrl", function($scope) {                //初始化数据                $scope.goods = [{                        name: "qq",                        price: 12.9,                        number: 2,                        state: false                    },                    {                        name: "wx",                        price: 23.9,                        number: 12,                        state: false                    },                    {                        name: "fd",                        price: 45.9,                        number: 23,                        state: false                    },                    {                        name: "asd",                        price: 99.9,                        number: 9,                        state: false                    }                ];                //删除单个                $scope.dele = function(index) {                    //删除                    $scope.goods.splice(index, 1);                };                //数量减少有个                $scope.reduce = function(index) {                    var num = $scope.goods[index].number;                    if($scope.goods[index].number > 1) {                        $scope.goods[index].number--;                    } else if($scope.goods[index].number == 1) {                        if(confirm("否删除该商品")) {                            //如果数量小于1 删除 商品                            $scope.goods.splice(index, 1);                        } else {                            $scope.goods[index].number = num;                        }                    }                };                //数量增加一个                $scope.add = function(index) {                    $scope.goods[index].number++;                };                //计算总价                $scope.allSum = function() {                    var allPrice = 0;                    var money;                    for(var i = 0; i < $scope.goods.length; i++) {                        allPrice += $scope.goods[i].price * $scope.goods[i].number;                    }                    money = "¥" + allPrice;                    return money;                };                //全选 反选                $scope.selectAll = false;                $scope.all = function(m) {                    for(var i = 0; i < $scope.goods.length; i++) {                        if(m == true) {                            $scope.goods[i].state = true;                        } else {                            $scope.goods[i].state = false;                        }                    }                };                //批量删除                $scope.deleteSel = function() {                    var userNames = [];                    //遍历users数组，获取状态是选中的user对象的名字                    for(index in $scope.goods) {                        if($scope.goods[index].state == true) {                            userNames.push($scope.goods[index].name);                        }                    }                    if(userNames.length > 0) {                        if(confirm("是否删除选中项？")) {                            for(i in userNames) {                                var name = userNames[i];                                for(i2 in $scope.goods) {                                    if($scope.goods[i2].name == name) {                                        $scope.goods.splice(i2, 1);                                    }                                    if($scope.goods.length == 0) {                                        $(function() {                                            $("table").hide();                                            $("#mydiv").show();                                        });                                    }                                }                            }                        }                    } else {                        alert("请选择删除项");                    }                };                //删除全部                $scope.deleteall = function() {                    $scope.goods.splice($scope.goods);                    $(function() {                        $("table").hide();                        $("#mydiv").show();                    });                };            });        </script>    </head>    <body ng-app="myapp" ng-controller="myctrl">        <center>            <h3>我的购物车</h3>            <table border="1" cellpadding="10" cellspacing="0" align="center">                <tr align="center">                    <td colspan="6">                        <input type="button" ng-click="deleteall()" value="清空购物车" style=" background-color: #A94442; color: white; margin-left: 520px;" />                        <input type="button" ng-click="deleteSel()" value="批量删除" style=" background-color: #A94442; color: white; " />                    </td>                </tr>                <tr align="center">                    <th>                        <input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)" />                    </th>                    <th>name</th>                    <th>price</th>                    <th>number</th>                    <th>totalPrice</th>                    <th>option</th>                </tr>                <tr ng-repeat="g in goods" align="center">                    <td>                        <input ng-model="g.state" type="checkbox" ng-checked="selectAll" />                    </td>                    <td>{{g.name}}</td>                    <td>{{g.price | currency:"¥" }}</td>                    <td>                        <input type="button" value="-" style="background-color: #0000FF; color: white;" ng-click="reduce($index)" />                        <input type="text" ng-model="g.number" style="width: 25px;" />                        <input type="button" value="+" style="background-color: #0000FF; color: white;" ng-click="add($index)" />                    </td>                    <td>{{g.number*g.price | currency:"¥" }}</td>                    <td>                        <input type="button" value="删除" style="background-color: #0000FF; color: white;" ng-click="dele($index)" />                    </td>                </tr>                <tr>                    <td colspan="6">                        总价为:<span ng-bind="allSum()"></span>                    </td>                </tr>            </table>            <div id="mydiv">                您的购物车为空,<b style="color: #008080;">去逛商城</b>            </div>        </center>    </body></html>
阅读全文
0 0