表格购物车

最新推荐文章于 2023-02-16 11:58:01 发布

Song_dn

最新推荐文章于 2023-02-16 11:58:01 发布

阅读量453

点赞数

本文链接：https://blog.csdn.net/Song_dn/article/details/78559274

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>运动商城</title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <style type="text/css">
           .head{
               background: black;
               width: 100%;
               height: 35px;
               line-height: 35px;
           }
           .s1{
               color: white;
               font-size: 12px;

           }
           .s2{
               color: white;
               font-size: 12px;
               float: right;
               margin-right: 20px;
           }
           table{
               width: 100%;

           }
           td{
               width: 20%;
               font-size: 12px;

           }
           button{
               background: coral;
               border-radius: 3px;
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <h3>运动商城</h3>
       <div class="head">
           <span class="s1">运动商城</span>
           <span class="s2">你的购物车:{{num}}个商品，RMB {{sum}}</span>
       <h3>你的购物车</h3>

       <table class="tab">
           <tr>
           <td>商品名称</td>
           <td>数量</td>
           <td>单价</td>
           <td>小计</td>
       </tr>
       <tr ng-repeat="x in names">
           <td>{{x.name}}</td>
           <td>{{x.sl}}</td>
           <td>{{x.price}}</td>
           <td>{{x.sl * x.price}}
           <button ng-click="del($index)">-1</button>
           <button ng-click="add($index)">+1</button>
           </td>
       </tr>
       </table>
       <script type="text/javascript">
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.names=[
               {"name":"鼠标","sl":1,"price":"101"},
               {"name":"键盘","sl":3,"price":"601"},
               {"name":"主机","sl":1,"price":"3001"}];

            var summ = 0;
            var num1 =0 ;
            for (var i = 0; i < $scope.names.length; i++) {
               summ+= $scope.names[i].sl * $scope.names[i].price;
               num1 += $scope.names[i].sl ;
            }
            $scope.num = num1;
            $scope.sum =summ ;

            $scope.del= function($index){
               $scope.names[$index].sl--;
               var summ = 0;
            var num1 =0 ;
            for (var i = 0; i < $scope.names.length; i++) {
               summ+= $scope.names[i].sl * $scope.names[i].price;
               num1 += $scope.names[i].sl ;
            }
            $scope.num = num1;
            $scope.sum =summ ;
            if($scope.names[$index].sl==0){
              var b=   confirm("确定删除吗？");
              if(b){
                 $scope.names.splice($index,1);
              }else{
                 alert("商品无效");
              }
            }
            if($scope.names.length==0){
               alert("购物车空了！");
            }
            }

            $scope.add= function($index){
               $scope.names[$index].sl++;
               var summ = 0;
            var num1 =0 ;
            for (var i = 0; i < $scope.names.length; i++) {
               summ+= $scope.names[i].sl * $scope.names[i].price;
               num1 += $scope.names[i].sl ;
            }
            $scope.num = num1;
            $scope.sum =summ ;
            }

           });
       </script>
       </div>
   </body>
</html>