购物车 2

最新推荐文章于 2021-02-23 18:11:09 发布

nijiadalinge

最新推荐文章于 2021-02-23 18:11:09 发布

阅读量197

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79825056

版权

移动开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#da{
				width: 600px;
				height: 1000px;
			}
			table{
				width: 600px;
			}
			
			select{
				background: #999999;
			}
			#xiao{
				width: 400px;
				height: 25px;
				margin-top: 20px;
				float: left;
			}
			#yi{
				width: 150px;
				height: 25px;
				background: #00FF66;
				float: left;
			}
			#er{
				width: 150px;
				height: 25px;
				background: #00FF66;
				float: right;
			}
			#san{
				width: 150px;
				height: 25px;
				float: right;
				margin-top: 20px;
			}
			
			.css1{
				background-color:#00FF99;
			}
			.css2{
				background: #FF3399;
			}
		</style>
		
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script type="text/javascript" src="js/lib/js/angular/angular.js" ></script>
		<script>
			var app = angular.module("linrenjiang",[]);
			app.controller("conl",function($scope){
				
				$scope.selname = "";
				$scope.px = '-num*s.price';
				$scope.sj = true;
				$scope.stus = [{
					id : 001,
					name: "手机",
					num : 3,
					price : 1000
				},{
					id : 002,
					name: "电脑",
					num : 3,
					price : 2000
				},{
					id : 003,
					name: "电视",
					num : 6,
					price : 500
				}];
				
				$scope.add = function(){
					$scope.stus.push({  
                    id : 004,
					name: "冰箱",
					num : 2,
					price : 15000
                    });  
				}
				$scope.del = function(na){
					if(window.confirm("你确定删除" + na + "吗")) {  
                        for(index in $scope.stus) {  
                            if(na == $scope.stus[index].name) {  
                                $scope.stus.splice(index, 1);  
                            }  
                        }  
                    }  
				}
				
				 //总价格  
                $scope.prices = function() {  
                    var p = 0;  
                    for(var x = 0; x < $scope.stus.length; x++) {  
                        p += $scope.stus[x].num * $scope.stus[x].price;  
                    }  
                    return p;  
                }  
                //总数量  
                $scope.nums = function() {  
                    var p = 0;  
                    for(var x = 0; x < $scope.stus.length; x++) {  
                        p += $scope.stus[x].num;  
                    }  
                    return p;  
                }  
                
                //清空购物车
  				 $scope.delAll=function(){  
                	$scope.stus.splice(0);
                } 

			});
		</script>
	</head>
	<body ng-app="linrenjiang" ng-controller="conl">
		<center>
			<div id="da">
				<h2 style="background: #D7FF86; width: 200px;">我的购物车详情</h2>
				<button ng-click="add()" style="float: left; width: 80px; background: red;">添加</button>
				<input type="text" ng-model="selname"  style="float: right; width: 250px; height: 25px; background: url(img/s.PNG)"/>
			<br />
			<table cellpadding="0" cellspacing="0" border="1px">
				<thead>
					<tr style="background: #999999;">
						<th ng-click="px = 'id';sj=!sj">商品编号</th>
						<th>商品名称</th>
						<th>商品数量</th>
						<th>商品单价</th>
						<th ng-click="px = 'num*s.price'; sj=!sj">价格小计</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="s in stus | filter:{name:selname} | orderBy:px:sj" class="{{$even ? 'css1' : 'css2' }}" align="center">
						<td>{{s.id}}</td>
						<td>
							<span ng-click="f=true">{{s.name}}</span>
							<span ng-show="f">
								<input ng-model="s.name" /><button ng-click="f=fales">保存</button>
							</span>
						</td>
						<td><input type="number" ng-model="s.num" min="1"/></td>
						<td>{{s.price}}</td>
						<td>{{s.num*s.price}}</td>
						<td>
							<button ng-click="del(s.name)" style="background: yellow;">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<br />
			<div style="width: 600px; height: 30px;">
				<div id="xiao">
				<div id="yi">
					商品总数:{{nums()}}
				</div>
				
				<div id="er">
					商品总价:{{prices()}}
				</div>
				
				
				
			</div>
			
				<div id="san">
					<button ng-click="delAll()" style="background: yellow;">清空购物车</button>
				</div>
			</div>

		</div>
		
		</center>
		
		
		
	</body>
</html>

nijiadalinge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车 2

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #da{ width: 600px; height: 1000px; } table{
复制链接

扫一扫