AngularJS 购物车简易小Demo
摘要： 前端开发 流程 一般公司前端开发流程 现代前端开发流程图 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> &……
| 前端开发 流程 |
| 一般公司前端开发流程 |
| 现代前端开发流程图 |
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>AngularJS 购物车实例测试</title>
<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 {
/*display:table-cell;*/
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;
/*line-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;
/*text-align:center;*/
}
.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()}}</p>
<a href=”javascript:;”>去结算</a>
</div>
</div>
</div>
</body>
</html>
<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.value.num = $scope.value.num+1;
}
// $scope.isBuy = function(buy, $event){
// console.log(buy, $event)
// }
$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>
| 前端模块化开发流程图 |
| 前端开发的详细流程图 |
| 公众号前端开发流程图文 |
» 本文来自：前端开发者 » 《AngularJS 购物车简易小Demo》
» 本文链接地址：https://www.rokub.com/6294.html
» 您也可以订阅本站：https://www.rokub.com
近期评论