JavaScript前端开发实现购物车

购物车

ShopCart.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<style>
			.cart {
				width: 700px;
				padding: 0 10px 10px;
				border: 1px solid #D5E5F5;
			}

			.cart-title {
				margin-bottom: 10px;
				font-size: 14px;
				border-bottom: 1px solid #AED2FF;
				line-height: 30px;
				height: 30px;
				font-weight: 700;
				text-indent: 15px;
				color: #333;
				font-family: 'Microsoft YaHei';
			}

			.cart-table {
				width: 100%;
				margin: 0 auto;
				border-collapse: collapse;
				font-size: 12px;
				font-family: Verdana, "Microsoft YaHei";
				color: #333;
			}

			.cart-table th {
				border-bottom: 2px solid #B2D1FF;
				font-weight: normal;
				height: 35px;
				line-height: 23px;
			}

			.cart-item {
				background-color: #FAFCFF;
				border-bottom: 1px dotted #84B3FD;
			}

			.cart-item td {
				height: 55px;
				text-align: center;
			}

			.cart-item .cart-txt-left {
				text-align: left;
			}

			.cart-name {
				color: #3366D4;
				font-weight: bold;
			}

			.cart-subtotal {
				color: #FF3334;
				font-weight: bold;
			}

			.cart-reduce,
			.cart-add {
				display: inline-block;
				width: 16px;
				height: 16px;
				line-height: 16px;
				color: #FFF;
				background-color: #BDBDBD;
				border: 0;
				cursor: pointer;
				border-radius: 2px;
				font-family: 'Arial';
				font-size: 13.3333px;
			}

			.cart-reduce:hover,
			.cart-add:hover {
				background-color: #FF9900;
			}

			.cart-num {
				margin: 5px;
				width: 35px;
				text-align: center;
				height: 20px;
				line-height: 20px;
				padding: 0 3px;
				display: inline-block;
				background: #fff;
				border: 1px solid #bbb
			}

			.cart-del,
			.cart-all {
				color: #3366D4;
			}

			.cart-del:hover,
			.cart-all:hover {
				text-decoration: underline;
				cursor: pointer
			}

			.cart-bottom {
				height: 55px;
				text-align: right
			}

			.cart-bottom .cart-all {
				position: relative;
				top: 1px
			}

			.cart-total-price {
				color: #FF3334;
				font-weight: bold;
				font-size: 16px;
			}

			.cart-bottom-btn {
				color: #FFF;
				font-size: 14px;
				font-weight: 600;
				cursor: pointer;
				margin: 0 20px;
				background: #FE8502;
				border: 1px solid #FF6633;
				border-radius: 5px 5px 5px 5px;
				padding: 6px 12px;
			}

			.cart-bottom-btn:hover {
				background: #FF6600;
			}
		</style>
	</head>
	<body>
		<div class="cart">
			<div class="cart-title">我的购物车</div>
			<table class="cart-table" border="" cellspacing="" cellpadding="">
				<tr>
					<th><span class="cart-all">全选</span></th>
					<th>商品</th>
					<th>单价 </th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
				<tr class="cart-item">
					<td><input class="cart-check" type="checkbox" checked /></td>
					<td><span class="cart-name">Loading...</span></td>
					<td><span class="cart-price">0</span></td>
					<td>
						<span class="cart-reduce">-</span>
						<span class="cart-num">0</span>
						<span class="cart-add">+</span>
					</td>
					<td><span class="cart-subtotal">0</span></td>
					<td><span class="cart-del">删除</span></td>
				</tr>
				<tr class="cart-bottom">
					<td colspan="6">
						<span class="cart-bottom-span">已选择<span class="cart-total-num">0</span>件商品</span>
						<span class="cart-bottom-span">总计：<span class="cart-total-price">0</span></span>
						<span class="cart-bottom-btn">提交订单</span>
					</td>
				</tr>
			</table>
		</div>
		<!--引入js文件-->
		<script src="ShopCart.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//调用ShopCart函数,第一个参数表示HTML中购物车的class前缀,用来针对网页中指定前
			//缀的class元素进行操作.第二个参数表示页面打开时,自动添加到购物车表格在的商品信息
			ShopCart('cart',[
				{name:'JavaScript实战',price:45.8,num: 1},
				{name:'PHP基础案例教程',price:49.8,num: 2},
				{name:'HTML+CSS网页制作',price:45.2,num: 5},
				{name:'Java基础入门',price:45.8,num: 8},
			]);
		</script>
	</body>
</html>

ShopCart.js

(function(window) {
	/**
	 * @param {String} prefix	前缀
	 * @param {Array} defCart	初始数据 [{name:'',price:1,num:1}]
	 */
	//创建ShopCart构造函数
	var ShopCart = function(prefix, defCart) {
		Find.prototype.prefix = prefix;
		//完成购物车中商品的添加
		//通过Cart对象查找class为cart-item的<tr>模板，然后创建了cart对象
		var cart = new Cart(document.getElementsByClassName(prefix)[0]);
		for (var i in defCart) {
			cart.add(defCart[i]); //	添加商品
		}
		cart.updateTotal(); //更新购物车统计（购买的总数量和总价格）

	};

	//
	Cart.prototype = {
		/**
		 * 向购物车中添加商品
		 * @param {Object} data	商品信息
		 */
		add: function(data) {
			var tmp = this.tmp.cloneNode(true); //克隆一个元素节点
			//1.创建购物车中的一件商品对象
			var item = new Item(tmp, data);
			var cart = this;
			//2.添加事件
			item.check.onclick = function() {
				cart.updateTotal();
			};
			item.add.onclick = function() { //增加商品数量
				item.num.textContent = ++item.data.num;
				item.updateSubtotal();
				cart.updateTotal();
			};
			item.reduce.onclick = function() { //减少商品数量
				if (item.data.num > 1) {
					item.num.textContent = --item.data.num;
					item.updateSubtotal();
					cart.updateTotal();
				}else{
					alert('至少选择1件，如果不需要，请直接删除');
				}
			};
			item.del.onclick = function(){
				if(confirm('您确定要删除此商品吗？')) {		//删除商品
					tmp.parentNode.removeChild(tmp);	//移出HTML页面中的商品
					cart.del(item);					//删除items中保存的对应商品
					cart.updateTotal();
				}
			};
			//3.更新小计，然后将商品对象保存到items中，并插入到item-bottom节点之前
			item.updateSubtotal();
			this.items.push(item);
			this.bottom.before(tmp);
		},
		
		updateTotal: function(){		//更新购物车统计
			var num = 0,price = 0;
			for(var i in this.items){
				var item = this.items[i];
				if(item.check.checked){
					num += item.data.num;
					price += item.data.num * item.data.price;
				}
			}
			this.num.textContent = num;
			this.price.textContent = price.toFixed(2);
		},
		
		checkAll : function() {	//	全选功能
			for(var i in this.items){
				this.items[i].check.checked = true;
			}
			this.updateTotal();
		},
		
		del: function(item) {	//删除商品
			for(var i in this.items) {
				if(this.items[i] === item) {
					delete this.items[i];
				}
			}
			
		}
	};

	//Item构造函数
	function Item(tmp, data) {
		var find = new Find(tmp); //获取class为cart的div元素对象
		this.check = find.className('check'); //获取商品前的复选框对象
		this.name = find.className('name'); //获取商品名称对象
		this.price = find.className('price'); //获取商品单价对象
		this.num = find.className('num'); //获取商品数量对象
		this.add = find.className('add'); //获取增加商品数量
		this.reduce = find.className('reduce'); //获取减少商品对象
		this.subtotal = find.className('subtotal'); //获取商品小计对象
		this.del = find.className('del'); //获取删除商品对象
		this.data = data;
		//设置商品相关参数
		this.name.textContent = data.name;
		this.price.textContent = data.price.toFixed(2);
		this.num.textContent = data.num;
	}
	Item.prototype = {
		/**
		 * 更新小计
		 * 
		 */
		updateSubtotal: function() {
			this.subtotal.textContent = (this.data.num * this.data.price).toFixed(2);
		}
	};

	//Find构造函数表示从哪个元素对象中进行查找
	function Find(obj) {
		this.obj = obj;
	}

	Find.prototype = {
		prefix: '', //prefix属性表示class前缀
		className: function(className) { //className()方法用于根据class查找对应的元素
			return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
		}
	};

	//编写Cart构造函数，用来创建购物车
	function Cart(obj) {
		this.items = []; //保存所有商品，用于完成购物车的统计、全选以及商品删除的操作
		var find = new Find(obj); //获取class为cart的div对象
		this.all = find.className('all'); //获取全选元素对象
		this.bottom = find.className('bottom'); //获取购物车的统计部分元素对象
		this.num = find.className('total-num'); //获取商品总数
		this.price = find.className('total-price'); //商品总价
		this.tmp = find.className('item'); //获取商品的模板
		this.tmp.parentNode.removeChild(this.tmp); //移出模板
		var cart = this;
		this.all.onclick = function() { //为全选添加单击事件
			cart.checkAll();
		};
	}






	window['ShopCart'] = ShopCart;
})(window);

i学无止境

发布了26 篇原创文章 · 获赞 6 · 访问量 4505

私信关注

JavaScript前端开发 实现购物车

猜你喜欢

JavaScript前端开发实现购物车