js对购物车设计

最新推荐文章于 2022-09-03 09:39:49 发布

单一*my*旋律

最新推荐文章于 2022-09-03 09:39:49 发布

阅读量823

点赞数 2

本文链接：https://blog.csdn.net/qq_47808703/article/details/107756551

版权

本文介绍了使用JavaScript设计购物车的功能，包括商品数量的增减、价格动态计算以及购物车界面的展示。通过js代码块、html实现代码块及效果展示，详细阐述了整个功能的实现过程。

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

js对购物车设计

此功能主要实现的是对购物车中购买东西的数量进行加减操作，并在操作是价格会相应的增加和减少，总金额也如此，以及一个是否关闭购物车的简单界面的实现

一、js代码块

/**
 * 关闭购物车
 */
function close_plan(){
	if(confirm("是否确定要关闭购物车?")){
		//关闭浏览器
		window.close();
	}
}

/**
 * 点击+的操作
 */
function plus(num){
//	var input = document.getElementsByName("amount");//集合
	//input[0]	input[1]
	//input[num]
	//获取数量并加1
	var count = parseInt(document.getElementsByName("amount")[num].value)+1;
	//修改显示数量输入框中的数量值
	document.getElementsByName("amount")[num].value = count;
	//获取单价
	var price = parseFloat(document.getElementsByName("price")[num].value);
	//计算总价
	var total = price*count;
	document.getElementById("price"+num).innerHTML = "¥"+total.toFixed(2);
	totals();
}

/**
 * 操作-的
 */
function minus(num){
	//获取数量并减1
	var count = parseInt(document.getElementsByName("amount")[num].value)-1;
	//获取单价
	var price = parse