小小购物车

来源：互联网发布：dns使用的端口号为编辑：程序博客网时间：2024/05/22 01:31
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script src="angular-1.3.0.js"></script>    <script src="jquery.1.12.4.js"></script>    <title>月考联系</title>    <style>        .a{            background-color: red;        }        .b{            background-color: steelblue;        }        input::-webkit-outer-spin-button,        input::-webkit-inner-spin-button {            -webkit-appearance: none;        }        input[type="number"]{            -moz-appearance: textfield;        }    </style>    <script>        var data1=[            {                done:false,                name:"ipad",                price:12,                number:2            },            {                done:false,                name:"iphone",                price:23,                number:4            },            {                done:false,                name:"mypad",                price:99,                number:1            },            {                done:false,                name:"zpad",                price:20,                number:1            }        ]        var app=angular.module("myApp",[]);        app.controller("myCtrl",function($scope){            $scope.data=[];            $scope.data=data1;            $scope.showtable=true;            $scope.showall=false;            $scope.addnum=function(name){                for(x in $scope.data){                    if($scope.data[x].name == name){                        $scope.data[x].number++;                    }                }            }            $scope.deletenum=function(name){                for(x in $scope.data){                    if($scope.data[x].name == name){                        if($scope.data[x].number>1){                            $scope.data[x].number--;                        }else{                            var a=confirm("是否将该商品移出购物车？")                            if(a == true){                                $scope.data.splice(x,1);                            }                            if($scope.data.length-1<0){                                $scope.showtable=false;                                $scope.showall=true;                            }                        }                    }                }            }//            总价            $scope.allprice=function(){                var c =0;                for(x in $scope.data){                     c+= $scope.data[x].price*$scope.data[x].number;                }                return c;            };            $scope.checkall=function(){                for(x in $scope.data){                    if( $scope.quan==true){                        $scope.data[x].done=true;                    }else{                        $scope.data[x].done=false;                    }                }            }            $scope.deleteall=function(){                var con = confirm("你确认要删除么？");                if(con == true){                    for(x in $scope.data){                        $scope.data.splice(x);                    }                    $scope.showtable=false;                    $scope.showall=true;                }              }            $scope.deleone=function(name){                var con = confirm("你确认要删除么？");                if(con == true){                for(x in $scope.data) {                    if($scope.data[x].name == name){                        $scope.data.splice(x,1);                    }                 }                    if($scope.data.length-1<0){                        $scope.showtable=false;                        $scope.showall=true;                    }                }            }        });    </script></head><body ng-app="myApp" ng-controller="myCtrl">    <h3>我的购物车</h3>    <table width="500px" border="1px" ng-show="showtable">        <tr>            <td colspan="6" align="right"><button class="a" ng-click="deleteall()">清空购物车</button></td>        </tr>        <tr>            <td><input type="checkbox" ng-click="checkall()" ng-model="quan"></td>            <td>name</td>            <td>price</td>            <td >number</td>            <td>totalPrice</td>            <td>option</td>        </tr>        <tr ng-repeat="x in data | orderBy:'price'">            <td><input type="checkbox" ng-model="x.done"></td>            <td>{{x.name}}</td>            <td>{{x.price | currency:"￥"}}</td>            <td><button class="b" ng-click="addnum(x.name)">+</button>                <input type="number" style="width: 15px"  ng-model="x.number"  >                <button class="b" ng-click="deletenum(x.name)">-</button></td>            <td>￥:{{x.price * x.number}}</td>            <td><button class="b" ng-click="deleone(x.name)">删除</button></td>        </tr>        <tr>            <td colspan="6">总价为:￥:{{allprice()}}</td>        </tr>    </table><div ng-show="showall">    我的购物车为空，<a href="https://jx.tmall.com/?ali_trackid=2:mm_99396806_34958614_123424034:1508826320_325_828252153">去逛商场</a>></div></body></html>
阅读全文
0 0