当前位置：首页 » 网购平台 » js如何做简易购物车
扩展阅读
宁波奥德赛优惠价格 2021-03-15 14:26:02
丹尼斯购物卡能挂失么 2021-03-15 14:25:58
淘宝购物指纹验证失败 2021-03-15 14:24:44

js如何做简易购物车

发布时间: 2021-03-08 04:16:27

A. JS代码 做一个简易的购物车 效果图如下

楼主是想要点击合计就是出数值还是什么？如果说点击合计就算出值的话如下

<tablewidth="400"border="1">
<tr>
	<throws="5">简易购物车</th>
</tr>
<tr>
	<td>商品名称</td>
	<td>数量(件)</td>
	<td>单价(美元)</td>
	<td>运费(美元)</td>
	<td><buttononclick="fun()">合计</button></td>
</tr>
<tr>
	<td><inputtype="text"name="goodsName"/></td>
	<td><inputtype="text"name="num"id="num"/></td>
	<td><inputtype="text"name="price"id="price"/></td>
	<td><inputtype="text"name="freight"id="freight"/></td>
	<td><inputtype="text"name="total"id="total"/></td>
</tr>
</table>
<script>
	functionfun(){
		varnum=document.getElementById("num").value;
		varprice=document.getElementById("price").value;
varfreight=parseInt(document.getElementById("freight").value);
vartotal=(price*num)+freight;
document.getElementById("total").value=total;
	}
</script>

B. javaScript 如何实现购物车状态图

就是图片 ，然后根据不同的状态换，也可以把这个图片做成透明的，下面弄个背景为绿色的色块，让透明的图片透过去，色块的宽度通过提前设置好的根据不同的状态进行变化

C. 在HTML里用javascript做一个简单购物车部分

给楼主做了一个，JS实现商品计数的加和减，最少不能少于1，最多不大于99，代码里面有注释，方面楼主查看和使用。

D. 关于javaScript问题 购物车的实现

关于只有最后一个文本框能触发checknum方法的问题：
其实这里有个逻辑错误，主要是<%=i%>中的i是多少的问题。从你贴出来的代码看，你是不是连JS代码也循环输出了吧，也就是有几条购物信息，就会生成几个checknum方法，在JS里，同函数名的方法如果多次定义，则只有最后一个定义的方法有效果，那最后一个checknum方法里的<%=i%>实际就只指代最后一个文本框了。结果就是只有最后一个文本框有效果。
其实楼主只需要循环输出表格，JS代码只用一个就行了，只要在文本框触发JS动作时，把<%i%>作为参数传进JS方法就行了，例如，你可以这么写：

...
<td width="58" height="30"><input name="num<%=i%>" size="5" type="text" value="<%=goodsitem.number%>" onBlur="checknum(this.form,<%=i%>)"></td>
...
把JS方法放到循环外面，这么写：
function checknum(myform,i){
var inp = myform['num'+i];
if(isNaN(inp.value) || inp.value.indexOf('.')!=-1){
alert("请不要输入非法字符！");inp.focus();return;}//判断是否为数字值
if(inp.value><%=leave%>){alert("请输入小于现有库存 （"+<%=leave%>+"） 的数量！");inp.focus();return;}
if(inp.value==0){
alert("请输入大于1的整数！");inp.focus();return;}
if(inp.value==""){
alert("请输入修改的数量！");inp.focus();return;}
myform.submit();
}

关于数字修改后触发checknum方法的问题：
楼主的checknum方法最后是要提交表单的，所以如果用键盘事件，那每一次输入一个字符或删除一个字符，都会触发表单提交动作，这应该不是楼主要的结果。字符修改后触发JS方法有专门的事件处理方法onchange。楼主可以吧onblur换成onchange试试。

E. 用JavaScript代码模拟购物车。

购物车挺复杂的，不是一句两句能说清的，现在前端都用react，vue这类响应式框架做购物车，事半功倍。

F. 如何用html css javascript php制作购物车

一两句说不清楚………

用html css做出商品样子和购物车样子，

然后用javascript来对买这个动专作做处理，把商品的信属息存起来，通过js把商品信息传递给购物车，让购物车能够显示；
另一方面把信息交给php，写入数据库。

我这么说你明白了么……

G. 如何用java和jsp做一个简单的购物车

页面jsp ：

<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<%@taglibprefix="c"uri="
<%@tagliburi="

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>易买网-首页</title>
<linktype="text/css"rel="stylesheet"href="${pageContext.request.contextPath}/css/style.css"/>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-2.1.1.js"></script>
<scripttype="text/javascript">
varcontextPath='${pageContext.request.contextPath}'
</script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/shopping.js"></script>
</head>
<body>
<jsp:includepage="top.jsp"/>
<divid="position"class="wrap">
	您现在的位置：<ahref="Home">易买网</a>&gt;购物车
</div>
<divclass="wrap">
	<divid="shopping">
		<formaction=""method="post">
			<table>
				<tr>
					<th>商品名称</th>
					<th>商品价格</th>
					<th>购买数量</th>
					<th>操作</th>
				</tr>
				<c:forEachitems="${sessionScope.shopCar}"var="item"varStatus="status">
				<trid="proct_id_${item.proId}">
					<tdclass="thumb"><imgsrc="${item.proImg}"height="50"width="30"/><ahref="Proct?action=view&entityId=${item.proId}">${item.proName}</a></td>
					<tdclass="price"id="price_id_1">
						<span><fmt:formatNumbervalue="${item.proPrice}"type="NUMBER"minFractionDigits="2"/></span>
						<inputtype="hidden"value="${item.proPrice}"/>
					</td>
					<tdclass="number">
						<dl>
							<dt><spanonclick="sub('number_id_${item.proId}','${item.proId}')">－</span><inputid="number_id_${item.proId}"type="text"readonly="readonly"name="number"value="${item.proNum}"/><spanonclick="addNum('number_id_${item.proId}','${item.proId}')">＋</span></dt>
							
						</dl>
					</td>
					<tdclass="delete"><ahref="javascript:deleteItem('proct_id_${item.proId}','${item.proId}')">删除</a></td>
				</tr>
				</c:forEach>
			</table>
			<divclass="button"><inputtype="submit"value=""/></div>
		</form>
	</div>
</div>
<divid="footer">
	Copyright&;kaka292817678itjob远标培训.
</div>
</body>
</html>



页面关联的js 自己去网上下载一个jquery
/*数量减少*/
functionsub(id,proId){
	//购买数量的值
	varnum=$('#'+id).val();
	if(num>1){
		$('#'+id).val(num-1);
	}
	
	edit(id,proId);
	
}

functionedit(id,proId){
	varurl=contextPath+'/HomeCarManager'
	//修改后的数量，购物明细的商品的id
	num=$('#'+id).val();
	$.post(url,{"num":num,"proId":proId},function(msg){
		/*
		if(msg=='true'){
			alert('修改成功');
		}else{
			alert('修改失败');
		}*/
	});
}
/**
*数量增加
*@param{}id
*/
functionaddNum(id,proId){
	//购买数量的值
	varnum=$('#'+id).val();
	$('#'+id).val(parseInt(num)+1);	
	edit(id,proId);
}

/**
*删除购物明细
*/
functiondeleteItem(trId,proId){
	//
	//console.log($("#"+trId));
	//js删除页面节点
	//$("#"+trId).remove();
	varurl=contextPath+'/HomeCarManager'
	$.post(url,{"proId":proId},function(msg){
		if(msg=='true'){
			//js删除页面节点
			$("#"+trId).remove();
		}
	});
	
}



后台servlet1
packagecom.kaka.web;

importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjava.util.List;

importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*购物车处理类
*@author@authorITJob远标培训
*
*/

importcom.kaka.entity.Items;
importcom.kaka.entity.Proct;
importcom.kaka.service.ProctService;
importcom.kaka.service.impl.ProctServiceImpl;
{

	=1L;
	ProctServiceps=newProctServiceImpl();
	@Override
	protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
		//获取商品的id
		StringproId=req.getParameter("proId");
		resp.setContentType("text/html;charset=UTF-8");
		PrintWriterwriter=resp.getWriter();
		if(null!=proId&&!"".equals(proId)){
			//返回添加购物车成功
			//System.out.println("============="+proId);
			//根据商品的id查询商品
			try{
				IntegerpId=Integer.parseInt(proId);
				Proctproct=ps.findProctById(pId);
				if(null!=proct){
					//查询到了商品，将商品的相关参数构建一个购物明细放入到购物车
					Itemsit=newItems();
					it.setProId(proct.getProId());
					it.setProName(proct.getProName());
					it.setProPrice(proct.getProPrice());
					it.setProImg(proct.getProImg());
					
					//先判断session范围是否有购物车
					List<Items>shopCar=(List<Items>)req.getSession().getAttribute("shopCar");
					if(null==shopCar){
						//购物车
						shopCar=newArrayList<Items>();
					}
					//将商品加入到购物车之前，判断购物车中是否已经包含了该购物明细，如果包含了，只需要修改购买的数量
					if(shopCar.contains(it)){
						intindex=shopCar.indexOf(it);//寻找购物车中包含购物明细在购物车中位置
						Itemsitems=shopCar.get(index);//获取购物车中存在的购物明细
						items.setProNum(items.getProNum()+1);
					}else{
						shopCar.add(it);
					}
					
					
					//将购物车放入到session访问
					req.getSession().setAttribute("shopCar",shopCar);
					//返回
					writer.print(true);
				}else{
					writer.print(false);
				}
			}catch(Exceptione){
				e.printStackTrace();
				writer.print(false);
			}
		}else{
			writer.print(false);
		}
		writer.flush();
		writer.close();
	}
	@Override
	protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
		doPost(req,resp);
	}
}



后台管理servlet
packagecom.kaka.web;

importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjava.util.List;

importjavax.mail.FetchProfile.Item;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*购物车修改
*@authorITJob远标培训
*
*/

importcom.kaka.entity.Items;
importcom.kaka.entity.Proct;
importcom.kaka.service.ProctService;
importcom.kaka.service.impl.ProctServiceImpl;
{

	=1L;
	ProctServiceps=newProctServiceImpl();
	@Override
	protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
		resp.setContentType("text/html;charset=UTF-8");
		PrintWriterwriter=resp.getWriter();
		//获取参数
		StringproId=req.getParameter("proId");
		Stringnum=req.getParameter("num");
		if(null!=proId&&null!=num
				&&!"".equals(proId)&&!"".equals(num)){
			try{
				IntegerpId=Integer.parseInt(proId);
				FloatpNum=Float.parseFloat(num);
				
				//根据商品的id获取对应的明细项
				//先判断session范围是否有购物车
				List<Items>shopCar=(List<Items>)req.getSession().getAttribute("shopCar");
				for(Itemsit:shopCar){
					if(it.getProId()==pId){
						it.setProNum(pNum);
					}
				}
				writer.print(true);
			}catch(Exceptione){
				e.printStackTrace();
			}
		}else{
			//删除的操作
			try{
				IntegerpId=Integer.parseInt(proId);
				//根据商品的id获取对应的明细项
				//先判断session范围是否有购物车
				List<Items>shopCar=(List<Items>)req.getSession().getAttribute("shopCar");
				Itemsitems=null;
				for(Itemsit:shopCar){
					if(it.getProId()==pId){
						items=it;
						break;
					}
				}
				if(null!=items){
					shopCar.remove(items);
					req.getSession().setAttribute("shopCar",shopCar);
				}
				
				writer.print(true);
			}catch(Exceptione){
				e.printStackTrace();
			}
		}
		
		writer.flush();
		writer.close();
	}
	@Override
	protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
		doPost(req,resp);
	}
}

H. 用js实现购物车（用js cookie传递数据）

不需要加id的 ，你可以直接提交数据保存到数据库，然后从数据库里检索显示在购物车页面

I. 前端用js如何实现购物车功能，如图那样的效果

这是需要多个方法才能完成的
1，需要动态添加商品那一条显示的function
2，个数那个需要一个增加减少的function
3， 需要个统计总数量的
4，需要一个检测checkbox的
你做到什么程度了

J. 求用javascript编写的简易购物车小程序如图所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml2.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script>
/*
*@author Caoshun
*@计算 合计费用
*/
function countMethod(){
var num=document.getElementById("num").value;
var unitPrice=document.getElementById("unitPrice").value;
var freight=document.getElementById("freight").value;

document.getElementById("result").value=parseFloat((num*unitPrice))+parseFloat(freight);
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" background="#red" style="text-align: center;">
<tr><td colspan="5" align="center">简易购物车</td></tr>
<tr>
<td>商品名称</td>
<td>数量(件)</td>
<td>单价(美元)</td>
<td>运费(美元)</td>
<td><input type="button" value="合计" onclick="countMethod();"></td>
</tr>
<tr>
<td>跑跑道具</td>
<td><input type="text" size="6" id="num"></td>
<td><input type="text" size="6" id="unitPrice"></td>
<td><input type="text" size="6" id="freight"></td>
<td><input type="text" size="6" id="result"></td>
</tr>
</table>
</body>
</html>

阅读全文

与js如何做简易购物车相关的内容

本站内容整理源于互联网，如有问题请联系解决。
Copyright design: www.9igoo.com since 2014