angularJS制作的购物车功能
发布时间：2020-12-17 10:05:20 所属栏目：安全 来源：网络整理
导读：!DOCTYPEhtmlhtmllang="en"ng-app="myapp"headmetacharset="UTF-8"titleDocument/titlestylebody,html{width:100%;height:100%;margin:0;padding:0;white-space:nowrap;font-family:Arial,"HiraginoSansGB","微软雅黑","宋体";}ul,li,h4,p{margin:0;padding:
<!DOCTYPEhtml>
<htmllang="en"ng-app="myapp">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
body,html{width:100%;height:100%;margin:0;padding:0;white-space:nowrap;font-family:Arial,"HiraginoSansGB","微软雅黑","宋体";}
ul,li,h4,p{margin:0;padding:0;}
li{list-style:none;}
h4{margin-bottom:6px;}
p{margin-bottom:6px;}
#bg{width:100%;height:100%;background:#FAFB98;display:inline-block;}
#owrap{width:800px;height:460px;position:relative;left:calc(50%-400px);top:calc(50%-230px);border-radius:30px;box-shadow:010px28px#E0D272;transition:allease0.3s;-webkit-transition:allease0.3s;-moz-transition:allease0.3s;-ms-transition:allease0.3s;background:#fff;}
#obox{width:100%;height:460px;position:relative;transition:allease0.3s;-webkit-transition:allease0.3s;-moz-transition:allease0.3s;-ms-transition:allease0.3s;opacity:1;}
#oul{width:100%;overflow:auto;position:relative;display:inline-block;}
#oula{width:18px;height:18px;color:#909696;line-height:18px;border:1pxsolid#909696;margin-bottom:6px;text-align:center;text-decoration:none;display:inline-block;}
#oulspan{margin:05px05px;}
#oullidiv{width:110px;height:22px;border-radius:6px;text-align:center;line-height:22px;font-size:14px;cursor:pointer;background:#FF6F3C;color:#fff;}
#oul.li_adds{border:5pxdotted#FF6F3C;}
#oul.have_adds{background:#FCDD68;}
#oulli{width:130px;height:116px;padding:10px0020px;list-style:none;border:5pxdotted#DBE3E4;float:left;margin:20px20px020px;border-radius:20px;}
.oall{width:200px;height:50px;line-height:50px;text-align:center;font-size:20px;letter-spacing:10px;display:inline-block;position:absolute;left:50px;bottom:30px;transition:allease0.3s;-webkit-transition:allease0.3s;-moz-transition:allease0.3s;-ms-transition:allease0.3s;}
.oconfirm{width:200px;height:50px;line-height:50px;text-align:center;font-size:25px;letter-spacing:10px;background:#FF6F3C;color:#fff;display:inline-block;text-decoration:none;border-radius:25px;position:absolute;left:550px;bottom:30px;transition:allease0.3s;-webkit-transition:allease0.3s;-moz-transition:allease0.3s;-ms-transition:allease0.3s;}
#items{width:100%;overflow:hidden;padding-top:20px;}
#itemsli{width:calc(100%-40px);height:30px;line-height:30px;color:#677A7A;padding:020px020px;position:relative;}
#itemsli.each_all{width:200px;display:inline-block;position:absolute;left:150px;}
.even{background:#DBE3E4;}
</style>
</head>
<body>
<divid="bg"ng-controller="ctrler">
<divid="owrap">
<divid="obox"ng-view>
</div>
<spanid="ospan"class="oall"ng-bind-template="总金额：{{all_cal.num}}元"></span>
<ahref="#go_buy"ng-click="go_cal($event)"class="oconfirm"ng-click="go_cal()">~去结算~</a>
</div>
</div>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.15/angular.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.15/angular-route.min.js"></script>
<scripttype="text/javascript">
varm1=angular.module("myapp",['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider
.when("/",{
template:
"<ulid='oul'>
<ling-repeat='fruitinifruit'ng-controller='eachCtrl'class='`li_border`'>
<h4ng-bind='fruit.name'></h4>
<p>单价：<spanng-bind='fruit.money'></span></p>
数量：<ahref='javascript:;'ng-click='oreduce()'>-</a>
<spanng-bind='fruit.num'></span>
<ahref='javascript:;'ng-click='oadd()'>+</a>
<divclass='`have_click`'ng-click='addTo($event)'ng-bind='ocon'></div></li></ul>"
})
.when("/go_buy",{
template:
"<ulid='items'>
<ling-repeat='ofruitinnew_arr'ng-class='{even:$even?true:false}'ng-hide='ofruit.num==0'>
<spanng-bind-template='{{ofruit.name}}：{{ofruit.money}}x{{ofruit.num}}'></span>
<spanclass='each_all'ng-bind-template='************************ {{ofruit.money*ofruit.num}}'></span></li></ul>"
})
}]);
m1.controller("ctrler",["$scope","$timeout",function($scope,$timeout){
$scope.all_cal={num:0};
$scope.arr_fruit=[{name:"香蕉",money:5,num:1,buy:false},{name:"苹果",money:9,{name:"雪梨",money:6,{name:"西瓜",money:10,{name:"火龙果",money:8,{name:"荔枝",money:11,{name:"榴莲",money:18,{name:"哈密瓜",buy:false}];
//点击去结算
$scope.ifruit=$scope.arr_fruit;
$scope.oturn=true;
$scope.go_cal=function(event){
$scope.new_arr=[];
//筛选出已加入购物车的水果
for(vari=0;i<$scope.arr_fruit.length;i++){
if($scope.arr_fruit[i].buy==true){
$scope.new_arr.push($scope.arr_fruit[i]);
}
}
if($scope.oturn){
event.target.href="#go_buy";
event.target.innerHTML="返回";
setStyle(event.target,{'height':'30px','left':'calc(50%-100px)','fontSize':'18px','lineHeight':'30px'});
setStyle(event.target.parentNode,{'width':'400px','borderRadius':'0','left':'calc(50%-200px)'});
setStyle(event.target.parentNode.children[0],{'opacity':0});
setStyle(event.target.parentNode.children[1],{'left':'calc(50%-100px)','bottom':'60px'});//不知道为什么这里不能用childNodes[1]无效
$scope.oturn=false;
$scope.ifruit=[];
}
else{
event.target.href="#/";
event.target.innerHTML="~去结算~";
setStyle(event.target,{'height':'50px','left':'550px','fontSize':'25px','lineHeight':'50px'});
setStyle(event.target.parentNode,{'width':'800px','borderRadius':'30px','left':'calc(50%-400px)'});
setStyle(event.target.parentNode.children[1],{'left':'50px','bottom':'30px'});
$scope.oturn=true;
//设置延迟出现以防瞬移突兀
$timeout(function(){
$scope.ifruit=$scope.arr_fruit;
},400);
}
};
}]);
m1.controller("eachCtrl",function($scope){
varoindex=$scope.$index;
if($scope.arr_fruit[oindex].buy){
$scope.li_border="li_adds";
$scope.ocon="取消购买";
$scope.have_click="have_adds";
}
else{
$scope.li_border="";
$scope.ocon="添加到购物车";
$scope.have_click="";
}
//点击-号时
$scope.oreduce=function(){
if($scope.arr_fruit[oindex].num==1){
return;
}
$scope.arr_fruit[oindex].num=$scope.arr_fruit[oindex].num-1;
if($scope.arr_fruit[oindex].buy){
$scope.all_cal.num=$scope.all_cal.num-$scope.fruit.money;
}
};
//点击+号时
$scope.oadd=function(){
if($scope.arr_fruit[oindex].num==99){
return;
}
$scope.arr_fruit[oindex].num=$scope.arr_fruit[oindex].num+1;
if($scope.arr_fruit[oindex].buy){
$scope.all_cal.num=$scope.all_cal.num+$scope.fruit.money;
}
};
//点击添加到购物车时
$scope.addTo=function(event){
if($scope.arr_fruit[oindex].buy){
$scope.ocon="添加到购物车";
$scope.all_cal.num=$scope.all_cal.num-$scope.fruit.money*$scope.arr_fruit[oindex].num;
$scope.arr_fruit[oindex].buy=false;
$scope.li_border="";
$scope.have_click="";
}
else{
$scope.ocon="取消购买";
$scope.all_cal.num=$scope.all_cal.num+$scope.fruit.money*$scope.arr_fruit[oindex].num;
$scope.arr_fruit[oindex].buy=true;
$scope.li_border="li_adds";
$scope.have_click="have_adds";
}
};
}]);
functionsetStyle(obj,json){
for(attrinjson){
obj.style[attr]=json[attr];
}
}
</script>
</body>
</html> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |