angularjs实现的购物车效果代码实例
分类:实例代码
分享一段代码实例,它实现了购物车效果,能够实时计算商品的总价格。
并且选中产品的时候,有相关样式的变化,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js"></script> <style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.6%; font-family: "Microsoft Yahei",sans-serif; line-height: 1; } a { text-decoration: none; color: grey; } ul, li { list-style: none; } .checkbox { vertical-align: middle; display: inline-block; width: 20px; height: 20px; position: relative; } .checkbox .box { border-radius: 4px; position: absolute; display: block; width: 20px; height: 20px; border: 2px solid #ccc; transition: all 0.5s; } .checkbox input[type="checkbox"] { position: absolute; z-index: 10; opacity: 0; } .checkbox input:checked + .box { border-color: red; } .checkbox input:checked + .box::after { position: absolute; display: block; content: ' '; width: 10px; height: 10px; background-color: red; top: 3px; left: 3px; } body { font-size: 1.4rem; } .wrap { margin-top: 3rem; } .wrap ul { display: block; width: 100%; margin-bottom: 3rem; } .wrap li { margin: 1rem auto; text-align: center; width: 20rem; height: 16rem; padding: 1rem; border: 0.4rem solid #ccc; border-radius: 0.8rem; transition: all 0.5s; } .wrap li.active { border-color: rgb(218, 30, 30); } .contentW { font-size: 1.6rem; height: 3.2rem; text-align: left; } .buttonW a { display: inline-block; padding: 0.8rem 0.6rem; background-color: rgb(218, 30, 30); color: #fff; font-size: 1.6rem; border-radius: 0.4rem; } .buttonW .addc { vertical-align: middle; display: inline-block; } a.calc { display: inline-block; vertical-align: middle; border: 1px solid #999; width: 22px; height: 22px; text-align: center; } .contentW span { display: inline-block; vertical-align: middle; } .buttonW a.cancel { background-color: #FFE47C; } .price { display: table; margin: 0 auto; } .price p { font-size: 1.8rem; } .price a { display: inline-block; background: rgb(218,30,30); padding: 0.8rem 2rem; margin-left: 1rem; color: #fff; border-radius: 0.8rem; } a.nobuy { border-color: #eee; background-color: #ccc; } </style> </head> <body> <div class="container" ng-app="cartApp" ng-controller="cartCtrl"> <div class="wrap"> <ul> <li class="{{fruit.buy?'active':''}}" ng-repeat="fruit in fruits" item={{fruit.id}}> <p class="contentW"> 名称:{{fruit.name}} </p> <p class="contentW"> 单价:{{fruit.price}} </p> <p class="contentW"> 数量: <a href="javascript:;" class="calc {{fruit.num<=1?'nobuy':''}}" ng-click="overdue(fruit.id)">-</a> <span>{{fruit.num}}</span> <a href="javascript:;" class="calc {{fruit.num>=10?'nobuy':''}}" ng-click="add(fruit.id)">+</a> </p> <div class="buttonW"> <div class="checkbox"> <input type="checkbox" id="{{fruit.id}}" ng-model="fruit.buy"> <span class="box"></span> </div> <label class="addc" for="{{fruit.id}}">添加到购物车</label> </div> </li> </ul> <div class="price"> <p> 总价:{{totalPrice()}} <a href="javascript:;">去结算</a> </p> </div> </div> </div> <script type="text/javascript"> var fruits = [{ id: 'fruit1', name: "苹果", price: "10", num: 1, buy: false }, { id: 'fruit2', name: "香蕉", price: "1", num: 1, buy: false }, { id: 'fruit3', name: "橘子", price: "20", num: 1, buy: false }]; angular.module('cartApp', []) .controller('cartCtrl', function($scope) { //取出水果 $scope.fruits = fruits; //点击-事件 $scope.overdue = function(id) { angular.forEach($scope.fruits, function(value, key) { if (value.id == id && value.num > 1) { $scope.fruits[key].num--; } }); } $scope.add = function(id) { angular.forEach($scope.fruits, function(value, key) { if (value.id == id && value.num < 10) { $scope.fruits[key].num++; } }); } $scope.totalPrice = function() { $scope.total = 0; angular.forEach($scope.fruits, function(value, key) { if (value.buy) { $scope.total = $scope.total + value.price * value.num; } }); console.log($scope.total) return $scope.total; } }); </script> </body> </html>
angularjs实现的购物车效果代码实例,这样的场景在实际项目中还是用的比较多的,关于angularjs实现的购物车效果代码实例就介绍到这了。
angularjs实现的购物车效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。