當前位置：首頁 » 網購平台 » js簡單製作購物車
擴展閱讀
寧波奧德賽優惠價格 2021-03-15 14:26:02
丹尼斯購物卡能掛失么 2021-03-15 14:25:58
淘寶購物指紋驗證失敗 2021-03-15 14:24:44

js簡單製作購物車

發布時間: 2021-02-09 23:09:38

❶ javaScript 如何實現購物車狀態圖

就是圖片 ，然後根據不同的狀態換，也可以把這個圖片做成透明的，下面弄個背景為綠色的色塊，讓透明的圖片透過去，色塊的寬度通過提前設置好的根據不同的狀態進行變化

❷ 求用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對話框，我想做一個購物車結算功能，在結算的時候會花上幾秒鍾時間，這時候

稍等一下，我貼個demo代碼給你

這個是HTML頁面

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Demo</title>
<scripttype="text/javascript"src="

<styletype="text/css">
body{font-size:14px;}
.btn{background:#f22d00;color:#fff;display:inline-block;width:120px;height:50px;line-height:50px;text-align:center;font-family:'LantingheiSC','MicrosoftYahei';font-size:20px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;border-radius:2px;text-decoration:none;cursor:pointer;}
.mask{background:#000;opacity:0.5;height:50px;width:120px;position:absolute;left:8px;top:8px;color:#fff;line-height:50px;text-align:center;font-weight:bold;}
.maskimg{vertical-align:-3px;margin-right:5px}
</style>
</head>
<body>
<divclass="file-box">
<formmethod="post"id="demo_form">
<ahref="javascript:;"class="btn"id="J_Go"><span>結&nbsp;算</span></a>
</form>
</div>
</body>
<scripttype="text/javascript">
$(document).ready(function(){
$('#J_Go').click(function(){
//修改結算按鈕的背景顏色
$('#J_Go').css('background','#ccc');
//添加遮罩效果
varhtml='<spanclass="mask">';
html+='<imgsrc="loading.gif">請稍候...</san>';
$('#demo_form').append(html);
//提交表單
varurl='test.php';
$.post(url,{},function(r){
if(r.status==1){
//提交表單後返回成功，則去除遮罩
$('.mask').remove();
//修改結算按鈕顏色
$('#J_Go').css('background','#f22d00');
}else{
alert(r.info);
}
},'json');
});
returnfalse;
});
</script>
</html>

這個是PHP頁面

<?php
	$info['status']=1;
	$info['info']='操作成功！';
	exit(json_encode($info));
?>

這是效果圖示

本想上傳個附件的，一個完整的實例Demo的，但是現在才三級，不支持上傳附件。

若有任何疑問，歡迎追問！

❹ 前端用js如何實現購物車功能，如圖那樣的效果

這是需要多個方法才能完成的
1，需要動態添加商品那一條顯示的function
2，個數那個需要一個增加減少的function
3， 需要個統計總數量的
4，需要一個檢測checkbox的
你做到什麼程度了

❺ 用JavaScript代碼模擬購物車。

購物車挺復雜的，不是一句兩句能說清的，現在前端都用react，vue這類響應式框架做購物車，事半功倍。

❻ 如何用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);
	}
}

❼ 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>

❽ 如何用html css javascript php製作購物車

一兩句說不清楚………

用html css做出商品樣子和購物車樣子，

然後用javascript來對買這個動專作做處理，把商品的信屬息存起來，通過js把商品信息傳遞給購物車，讓購物車能夠顯示；
另一方面把信息交給php，寫入資料庫。

我這么說你明白了么……

❾ JavaScript根據這個代碼，做出購物車里減一個數量的效果，跪求！我實在不會！

把
inputcount[index].value=count+1;
改為

if (count <= 0) { return };
inputcount[index].value=count--;

❿ 在HTML里用javascript做一個簡單購物車部分

給樓主做了一個，JS實現商品計數的加和減，最少不能少於1，最多不大於99，代碼裡面有注釋，方面樓主查看和使用。

閱讀全文

與js簡單製作購物車相關的內容

本站內容整理源於互聯網，如有問題請聯系解決。
Copyright design: www.9igoo.com since 2014