Js实现简单购物车系统

最新推荐文章于 2024-05-28 18:30:26 发布

大源阿良

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Shirongliang/article/details/123010423

版权

本次实验目的主要是熟悉对document方法的使用，比如append()、setAttribute()、querySelectAll()等，以及元素的兄弟元素，父亲元素的操作。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<style type="text/css">
		table th, td{
			
			border: 1px solid white;
		}
		table th {
			background-color: #B0C4DE;
		}
		table td{
			background-color: #F0F0F0;
		}
		table{
			text-align: center;
			width:800px;
		}
		
	</style>
</head>
<body>
    <div id="box">
        <div id="addGoods">
            商品名称：<input type="text" id="goodsName"><br />
            商品价格：<input type="text" id="goodsPrice"><br />
            商品数量：<input type="text" id="goodsAmounts"><br />
			<input type="button" value="添加" id="add" onclick="addGoods()"/>
        </div>
		<div id="goodsCar">
			<h2>购物车</h2>
			<table >
				<tr>
					<th><input type="checkbox"></th>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				
			</table>
			
			总计：<input type="text" id="total" />
			<input type="button" id="onput" value="提交订单" />
		</div>
    </div>
	
	<script type="text/javascript">
		function addGoods(){
			var nameDom = document.getElementById('goodsName');
			var priceDom = document.getElementById('goodsPrice');
			var amountDom = document.getElementById('goodsAmounts');
			//创建表格
			var tableDom = document.querySelector('table');
			var trDom = document.createElement('tr');
			//第一列
			var td1Dom = document.createElement('td');
			var td1 =document.createElement('input');
			td1.type = 'checkbox';
			td1Dom.append(td1)
			trDom.append(td1Dom);
			
			//第二列
			var td2Dom = document.createElement('td');
			var td2 = "《" + nameDom.value + "》";
			td2Dom.append(td2)
			trDom.append(td2Dom);
			
			//第三列
			var td3Dom = document.createElement('td');
			var td3 = priceDom.value;
			td3Dom.append(td3)
			trDom.append(td3Dom);
			
			//第四列
			var td4Dom = document.createElement('td');
			var subBtn = document.createElement('button');
			subBtn.setAttribute("name","decr")
			td4Dom.append(subBtn);
			
			
			
			var inputDom = document.createElement('input');
			inputDom.type = 'text'
			inputDom.setAttribute("name","count")
			inputDom.style.width = "30px";
			inputDom.style.textAlign = "center";
			inputDom.value = amountDom.value
			td4Dom.append(inputDom);
			
			
			
			var addBtn = document.createElement('button');
			addBtn.setAttribute("name","incr");
			td4Dom.append(addBtn);
			trDom.append(td4Dom);
			
			
			//第五列----小计
			var td5Dom = document.createElement('td');
			td5Dom.setAttribute("name","subTotal")
			var td5 = 0;
			td5 = priceDom.value * amountDom.value;
			td5Dom.append(td5);
			trDom.append(td5Dom);
			//第六列
			var td6Dom = document.createElement('td');
			var deleteBtn = document.createElement('input');
			deleteBtn.type = 'button'
			deleteBtn.value = "删除";
			deleteBtn.setAttribute("name","reBtn")
			td6Dom.append(deleteBtn);
			trDom.append(td6Dom);
			tableDom.append(trDom);
			//最后一行
			var totalDom = document.getElementById('total');
			var caculDom = document.querySelectorAll("[name=subTotal]");
			var total = 0;
			for(var i = 0;i < caculDom.length;i++){
				total += parseFloat(caculDom[i].innerText);
			}
			totalDom.value = total;
			totalDom.style.width = "50px";
			//单击事件
			var subDom = document.querySelectorAll("[name=decr]");
			
			for(var i = 0;i < subDom.length;i++){
				subDom[i].onclick = function sub(){
					var num = this.nextElementSibling;
					total = total - parseFloat(priceDom.value)
					num.value = parseInt(num.value) - 1;
					this.parentElement.nextElementSibling.innerText = priceDom.value * num.value
					totalDom.value = total
				}
			}
			var addDom = document.querySelectorAll("[name=incr]");
			
			for(var i = 0;i < addDom.length;i++){
				addDom[i].onclick = function add(){
					var num = this.previousElementSibling;
					total = total + parseFloat(priceDom.value)
					num.value = parseInt(num.value) + 1;	
					this.parentElement.nextElementSibling.innerText = priceDom.value * num.value
					totalDom.value = total
				}
			}
			//删除
			var deleteDom = document.querySelectorAll("[name=reBtn]");
			for(var i = 0;i < deleteDom.length;i++)
			{
				deleteDom[i].onclick = function dele(){
					console.log(this.parentElement.previousElementSibling.innerText)
					var num = this.parentElement.previousElementSibling.innerText;
					total = total - parseFloat(num)
					totalDom.value = total
					var dele = this.parentElement.parentElement.remove();
					}				
			}
			//提交订单
			var checkDom = document.querySelectorAll("td [type=checkbox]");
			var onputDom = document.getElementById('onput');
			var allPrice = 0;
			console.log(checkDom)
			onputDom.onclick = function onput(){
				for(var i = 0 ;i<checkDom.length;i++){
						if(checkDom[i].checked){
							 var xiaoji = checkDom[i].parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText;
							allPrice += parseFloat(xiaoji)
						}
					}
					alert('下单成功     '+allPrice)
				}
		}
	</script>
</body>
</html>

大源阿良

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
Js实现简单购物车系统

本次实验目的主要是熟悉对document方法的使用，比如append()、setAttribute()、querySelectAll()等，以及元素的兄弟元素，父亲元素的操作。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
复制链接

扫一扫