當前位置：首頁 » 網購平台 » 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