HTML+CSS+JS+AngularJS 购物车功能

最新推荐文章于 2024-04-10 17:14:17 发布

四夕520

最新推荐文章于 2024-04-10 17:14:17 发布

阅读量544

点赞数

本文链接：https://blog.csdn.net/Luokaiqin520/article/details/79459907

版权

<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title></title>
<style>
span{
border: 1px solid black;
background-color: #00FF66;
}
.css1{
background-color: palegoldenrod;
}
.css2{
background-color: palegreen;
}
</style>


<script type="text/javascript" src="libs/angular.min.js" ></script>
<script>
//2.定义模板
var app = angular.module("App",[]);
//3.定义控制器
app.controller("mykzq",function($scope){
//4.数据
$scope.datas=[
{"gid":001,"gname":"手机", "gnum":3,"gprice":1000,"gcount":3000},
{"gid":002, "gname":"电脑","gnum":3,"gprice":2000,"gcount":6000},
{"gid":003, "gname":"电视","gnum":6,"gprice":500,"gcount":3000}];

//5.实现删除的功能
$scope.remove=function($index){
//根据下标$index 使用splice()方法进行单一删除
$scope.datas.splice($index,1);
}

//6.实现计算总数的功能
$scope.gnums = function(){
//定义总价初始值为0
var a = 0;
//循环数组
for(var i=0;i<$scope.datas.length;i++){
//总价+=每个数量
a+=$scope.datas[i].gnum;
}
//最后返回总数
return a;
}

//7.实现计算总价的功能
$scope.gprices = function(){
//定义总价初始值为0
var b = 0;
//循环数组
for(var x=0;x<$scope.datas.length;x++){
//总价+=每个数量
b+=$scope.datas[x].gnum*$scope.datas[x].gprice;
}
//最后返回总价
return b;
}

//8.实现清空购物车的功能
$scope.removeAll = function(){
//设置数组为空
$scope.datas=[];
}

//9.实现当商品数量减少到小于1的时候，提示“确定要删除该产品吗？”，点击确定，删除该行数据。
$scope.chan=function($index){
//循环数组
if($scope.datas[$index].gnum<=0){
//弹出提示框
var f = confirm("确定要删除该产品吗？");
//点击提示框确定，进行删除该商品
if(f){
$scope.datas.splice($index,1);
}
}
}
});
</script>
</head>
<body ng-controller="mykzq">
<center>
<h1 style="background-color: #D7FF86; width: 250px;">我的购物车详情</h1>


<input type="text" placeholder="根据商品名称查询" ng-model="select" style="margin-left: 600px; border-radius: 20px;margin-bottom: 10px;
background-color: yellow;"/>


<table style="width: 800px; background-color: #999999;" border="1" cellspacing="0">
<tr>


<th>商品编号<input type="button" value="∧" ng-click="orderkey='gid'"/></th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>


<th>价格小计<input type="button" value="∨" ng-click="orderkey='-gnum*gprice'"/></th>
<th>操作</th>
</tr>


<tr ng-repeat="x in datas | orderBy:orderkey | filter:{gname:select}" class="{{$even?'css1':'css2'}}">
<td>{{x.gid}}</td>
<td>{{x.gname}}</td>


<td><input type="number" ng-model="x.gnum" ng-change="chan($index)"/></td>
<td>{{x.gprice}}</td>
<td>{{x.gnum*x.gprice}}</td>


<td><button ng-click="remove($index)" style="background-color: yellow;border-radius: 10px;">删除</button></td>

</tr>

</table>

<div style="margin-top: 20px;">
<span style="margin-left: 50px;">商品总数:{{gnums()}}</span>
<span style="margin-left: 200px;">商品总价：{{gprices()}}</span>


<input type="button" value="清空购物车" ng-click="removeAll()" style="background-color: yellow; border-radius: 20px;margin-left: 200px;"/>
</div>
</center>

</body>

</html>

四夕520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS+AngularJS 购物车功能

&lt;!DOCTYPE html&gt;&lt;html ng-app="App"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; span{ border: 1px solid black; backg
复制链接

扫一扫