js购物车功能

最新推荐文章于 2024-08-04 16:33:59 发布

lvbb66

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量77

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2302_80798583/article/details/139723023

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			tr,
			td {
				text-align: center;
			}
		</style>
	</head>
	<body>
	</body>
	<table border="1px" cellpadding="10px" style="border-collapse: collapse;">
		<thead>
			<tr>
				<th>商品名称</th>
				<th>商品价格（单位为元）</th>
				<th>商品数量</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="goods">
			<tr>
				<td>安分守己</td>
				<td>28</td>
				<td><button>-</button> 0 <button>+</button></td>
				<td><button>编辑</button><button>删除</button></td>
			</tr>
		</tbody>
		<footer id="total">
			<tr>
				<td>总价：</td>
				<td id="gross"></td>
				<td>总数量：</td>
				<td id="qty"></td>
			</tr>
		</footer>
	</table>

	<button id="appends" onclick="adds(1,1)">添加</button>

	<div class="addition" style="display: none;">
		<input class="box name" type="text" placeholder="请输入商品名称" />
		<input class="box price" type="number" placeholder="请输入商品价格" />
		<input class="box number" type="number" placeholder="请输入商品数量" />
		<br />
		<button onclick="additie(2,3)">提交</button> <button onclick="call(5)">取消</button>
	</div>

	<div class="edit" style="display: none;">
		<input class="redact_names" type="text" placeholder="请编辑商品名称" />
		<input class="redact_prices" type="number" placeholder="请编辑商品价格" />
		<input class="redact_numbers" type="number" placeholder="请编辑商品数量" />
		<br />
		<button class="affixions" onclick="additie(2,4)">编辑</button> <button onclick="call(6)">取消</button>
	</div>
	<script src="./js/index.js"></script>


</html>

[{
	"id": "1",
	"name": "🍓🍕",
	"price": "28.00",
	"num": "0"

}, {
	"id": "2",
	"name": "🍉🐝🐝",
	"price": "14.00",
	"num": "0"

}, {
	"id": "3",
	"name": "🍔🍔🍔🍔🍔🍔🍔🍔🍔",
	"price": "5.00",
	"num": "0"
}, {
	"id": "4",
	"name": "🥼",
	"price": "10.00",
	"num": "0"
}]

< !DOCTYPE html >
	<
	html >
	<
	head >
	<
	meta charset = "utf-8" / >
	<
	title > < /title> <
	style >
	*
	{
		margin: 0;
		padding: 0;
	}

	.show {
		width: 70 % ;
		height: 500 px;
		margin - left: 20 px;
		margin - top: 20 px;
		overflow: hidden;

	}

	.print {
		display: flex;

		width: 800 % ;

	}

	.dots {
		display: flex;
		position: absolute;
		top: 480 px;
		left: 30 % ;
	}

	.dot {
		width: 15 px;
		height: 15 px;
		margin - left: 10 px;
		border - radius: 10 px;
		background - color: honeydew;

	}

	.print img {
		width: 100 % ;
		height: 500 px;
		object - fit: cover;
	} <
	/style> <
	/head> <
	body >
	<
	div class = "all" >
	<
	div class = "show" >
	<
	div class = "print" >
	<
	/div> <
	div class = "dots" >
	<
	div class = "dot" > < /div> <
	div class = "dot" > < /div> <
	div class = "dot" > < /div> <
	div class = "dot" > < /div> <
	div class = "dot" > < /div> <
	div class = "dot" > < /div> <
	div class = "dot" > < /div> <
	/div> <
	/div> <
	/div> <
	script >
	let data;
let index = 0;
let dot = document.getElementsByClassName('dots')[0];
let show = document.getElementsByClassName('show')[0];
let print = document.getElementsByClassName('print')[0];
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/new_file.json', true);
xhr.send();
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		let text = xhr.responseText;
		console.log(text);
		data = JSON.parse(text);
		console.log(data);

		renderer(data);
	}
};

function renderer(data) {

	let str = '';
	let strs = '';
	for (let i = 0; i < data.length; i++) {
		str += `<img src="${data[i].path}" alt="" />`;
		strs += `<div class="dot" onclick="control(${i})"></div>`
	};
	str += `<img src="${data[0].path}" alt="" />`
	dot.innerHTML = strs;
	print.innerHTML = str;
}
console.log(show.offsetWidth);

setInterval(function() {
	index++;
	print.style.transition = 'all 0.5s';
	print.style.marginLeft = "-" + show.offsetWidth * index + 'px';
	if (index == data.length) {
		setTimeout(function() {
			index = 0;
			print.style.marginLeft = "-" + show.offsetWidth * index + 'px';
			print.style.transition = null;
		}, 700)
	}
}, 3000)

function control(index) {
	console.log(dot);


}