购买按钮

最新推荐文章于 2024-12-16 00:23:24 发布

cxx13700

最新推荐文章于 2024-12-16 00:23:24 发布

阅读量676

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cxx13700/article/details/80861170

这是一个基于AngularJS和jQuery实现的网页应用，包含商品搜索、价格和销量排序、库存管理以及购买按钮功能。用户可以输入关键字过滤商品，通过按钮对商品的价格和销量进行升序或降序排列，并能选择购买商品。当点击购买按钮时，商品库存会减少，月销量会增加。同时，提供了批量删除功能，选择商品后点击批量删除按钮，会从列表中移除选中的商品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
           .whiteline{
               background-color: gainsboro;
           }
           .grayline{
               background-color: white;
           }
       </style>

   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <center>
           <input type="" placeholder="请输入关键字" ng-model="keyy" />
           <input type="button" value="批量删除" ng-click="plsc()" style="background-color: orangered;" />
           <br /><br />
           <table border="1" cellpadding="1" cellspacing="1" style="width: 39%;">
               <tr style="background-color: gray;">
                   <th><input type="checkbox" ng-model="qll"></th>
                   <th>商品名称</th>
                   <th>商品价格
                   <input type="button" value="^" ng-click="jia()" />
                   <input type="button" value="∨" ng-click="ge()" />
                   </th>
                   <th>库存
                   <input type="button" value="^" ng-click="ku()" />
                   <input type="button" value="∨" ng-click="cun()" />
                   </th>
                   <th>月销量
                   <input type="button" value="^" ng-click="xiao()" />
                   <input type="button" value="∨" ng-click="liang()" />
                   </th>
                   </th>
                   <th>购买</th>
               </tr>
               <tr ng-repeat="x in shops|filter:keyy|orderBy:pai" class="{{$index%2==0?'whiteline':'grayline'}}" style="text-align: center;">
                   <td><input type="checkbox" value="{{x.name}}" ng-model="qll"></td>
                   <td>{{x.name}}</td>
                   <td>{{x.price}}</td>
                   <td>{{x.count}}</td>
                   <td>{{x.xiao}}</td>
                   <td><input type="button" value="购买" ng-click="mai(x.name)" style="background-color: green; border-radius: 8px;"></td>
               </tr>

           </table>
       </center>
       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){
               $scope.shops=[{name:"天梭",price:4300,count:2,xiao:1800},{name:"美琴",price:2800,count:5,xiao:4500},{name:"美度",price:2500,count:280,xiao:400},{name:"梅花",price:3000,count:100,xiao:600},{name:"劳力士",price:8000,count:300,xiao:1000}]

               $scope.plsc=function(){

               var cbs=$("input:checked");
               cbs.each(function(){
                   for (var i = 0; i < $scope.shops.length; i++) {
                       if($scope.shops[i].name==$(this).val()){
                           $scope.shops.splice(i,1);break;
                       }
                   }

               });
               }
               //库存
               $scope.ku=function(){
                   $scope.pai="count";
               }
               $scope.cun=function(){
                   $scope.pai="-count";
               }
               //销量
               $scope.xiao=function(){
                   $scope.pai="xiao";

               }
               $scope.liang=function(){
                   $scope.pai="-xiao";

               }
               //价格
               $scope.jia=function(){
                   $scope.pai="price";

               }
               $scope.ge=function(){
                   $scope.pai="-price";

               }
               //购买
//               $scope.mai=function(aaa){
//                   for (var i = 0; i < $scope.shops.length; i++) {
//                       if($scope.shops[i].name==aaa){
//                           $scope.shops[i].count--;
//                           $scope.shops[i].xiao++;
//                       }
//                   }
//
//
//               }
       $scope.mai=function(aa){
           for (var i = 0; i < $scope.shops.length; i++) {
               if($scope.shops[i].name==aa){
                   if($scope.shops[i].count<1){
                   alert("库存不够!");
                   break;

                   }
                   $scope.shops[i].count--;
                   $scope.shops[i].xiao++;
               }
           }
           }

           })

       </script>

   </body>
</html>