HTML购物车

最新推荐文章于 2024-03-18 23:01:18 发布

翻译最新推荐文章于 2024-03-18 23:01:18 发布 · 1.4k 阅读

这是一个HTML页面，展示了如何使用AngularJS和jQuery来创建一个购物车。页面包括一个可搜索的商品列表，商品数量增减功能，以及按商品编号和价格小计排序的选项。用户可以对商品进行增加、减少数量或删除操作，并且可以查看购物车的总数量和总价。页面还提供了一个清空购物车的按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>

<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>

<style type="text/css">
*{margin: 0 auto;}
table tr:nth-child(odd){
background-color: #FF0080;
}
table tr:nth-child(even){
background-color: #00FF00;
}
</style>
</head>
<body ng-app="myapp" ng-controller="treal">
<h1 style="width: 230px; background-color: yellow;">我的购物车详情</h1>
<div style="width: 500px;">
<input type="text" placeholder="根据商品名称查询" ng-model="spm" style="border-radius: 10px; float: right; margin-top: 50px;" />
</div>
<div id="div2" style="width:540px;">
<table style=" width: 540px;" border="1" cellpadding="0" cellspacing="0">
<tr style="background-color: #808080;">
<td ng-click="idpx()">商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品价格</td>
<td ng-click="jgxjpx()">价格小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in goods|filter:spm|orderBy:px">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<input type="button" value="-" ng-model="" ng-click="jssl(x.id)" />
<input type="number" value="{{x.num}}" />
<input type="button" value="+" ng-model="" ng-click="slzj(x.id)" />
</td>
<td>{{x.price}}</td>
<td>{{x.num*x.price}}</td>
<td><input type="button" value="删除" ng-click="deldg(x.id)" /></td>
</tr>
</table>
<div style="width: 540px; margin-top: 20px;">
<span style="float: left; background-color: #00FF00;">商品总数量是:{{zsm()}}</span>
<span style="float: left; margin-left: 150px; background-color: #00FF00;">商品总价是:{{zjg()}}</span>
<input type="button" ng-click="qk()"style="background-color: yellow; float: right;" value="清空购物车"/>

</div>
</div>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("treal",function($scope){
//初始化数组数据
$scope.goods=[
{id:"003",name:"电视",num:2,price:3000},
{id:"005",name:"电风扇",num:6,price:50},
{id:"001",name:"电动车",num:2,price:2000},
{id:"002",name:"手机",num:6,price:6000},
{id:"004",name:"鼠标",num:9,price:300},
];
//排序条件
$scope.px="";
//点击商品编号正序排序
$scope.idpx=function(){
$scope.px="id";
}
//点击价格小计降序排序
$scope.jgxjpx=function(){
$scope.px="num*price";
}
//减少数量
$scope.jssl=function(l){
//根据id减少对应商品的数量
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].id==l){
$scope.goods[i].num--;
if($scope.goods[i].num==0){
var sc=confirm("您是否要删除此商品?");
if(sc){
$scope.goods.splice(i,1);
break;
}
}
}

}
}
//数量增加
$scope.slzj=function(l){
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].id==l){
$scope.goods[i].num++;
break;
}

}
}
//删除一行
$scope.deldg=function(l){
for(var i=0;i<$scope.goods.length;i++){
if ($scope.goods[i].id=l) {
$scope.goods.splice(i,1);
break;
}
}
}
//清空购物车
$scope.qk=function(){
$scope.goods=[];
}
//计算购买总数量
$scope.zsm=function(){
$scope.zs=0;
for (var i = 0; i < $scope.goods.length; i++) {
$scope.zs+=$scope.goods[i].num;
}
return $scope.zs;
}
//计算总价
$scope.zjg=function(){
$scope.zs=0;
for (var i = 0; i < $scope.goods.length; i++) {
$scope.zs+=$scope.goods[i].num*$scope.goods[i].price;
}
return $scope.zs;
}
});
</script>
</body>
</html>