html购物车练习

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

szj_0322

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

阅读量924

点赞数

本文链接：https://blog.csdn.net/szj_0322/article/details/79824073

版权

这是一个HTML页面，展示了如何使用AngularJS实现一个简单的购物车功能。页面中包含一个输入框用于根据商品名称查询，表格展示商品编号、名称、数量、单价、小计，并提供删除和清空购物车的操作。通过AngularJS的ng-repeat指令动态渲染数据，ng-click事件处理排序和删除功能，同时实现了商品总数和总价的计算。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 60%;
				background-color: orchid;
				margin: 0 auto;
				text-align: center;
				padding: 20px;
			}
			#cha{
				float: right;
				border-radius: 10px;
				margin: 5px;
			}
			table{
				width: 100%;
				
			}
			button{
				background-color: gold;
			}
			thead tr{
				background-color: dimgray;
			}
			tbody tr:nth-child(even){
				background-color: chartreuse;
			}
			tbody tr:nth-child(odd){
				background-color: cyan;
			}
			.but{
				border: none;
				background-color:dimgray;
			}
			
			.lift{
				float: left;
				margin: 10px;
			}
			.cent{
				margin-bottom: 10px;
			}
			#right{
				float: right;
				margin: 10