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实现的购物车效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容