❶ 你好,jquery實現的購物車商品數量變化,價格隨之變動,但是總價格怎麼跟著變,
貼代碼吧。。不然不知道你的問題出在哪。。
❷ 購物車商品修改 怎麼重新算總價
得到用戶選擇的商品的數量和對應的價格,暫時保存起來。當用戶進入專到購物車再作計算。如屬果用戶刪除了商品或者重新添加了商品就再計算。比如說:用戶選擇了A,B兩件商品,再觸發點擊事件的時候就是保存商品的價格和數量。等到了購物車的界面再開始計算,並顯示出總價。當然這么做的前提是你的選擇商品和顯示商品不需要同時執行。
❸ 用html做一個購物車,能實現簡單的產品數量和價格的加減就行。最後能計算出提交物品價格的總和。
html中的購物車的增減不能直接傳送到後台,可以通過ajax,在js中發送ajax
純前端的話可以參考下面的
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>cart</title>
<styletype="text/css">
body,p,a,input{
margin:0;
padding:0;
font-size:12px;
}
.container{
width:100%;
}
.main{
width:1000px;
height:500px;
margin:100pxauto;
}
.main.cart-containertable{
width:100%;}
.main.cart-containertabletr{
text-align:center;
}
.main.cart-containertabletr:hover{
background:rgba(128,128,128,0.2);
}
.main.cart-containertable.table-header{
height:30px;
background:#d9d9d9;
font-size:1.2em;
}
.main.cart-containertable.table-headertd:first-child{
border-left:solid4pxred;
box-sizing:border-box;
}
.main.cart-containertabletrtd:nth-child(1),
.main.cart-containertabletrtd:nth-child(2){
text-align:left;
}
.main.cart-containertabletrtd:nth-child(2){
width:52%;
}
.main.cart-containertabletrtd:nth-child(3){
width:12%;
}
.main.cart-containertabletrtd:nth-child(4){
width:12%;
}
.main.cart-containertabletrtd:nth-child(5){
width:12%;
}
.main.cart-containertabletrtd:last-child{
width:10%;
}
.cart-good{
height:60px;
}
.cart-goodimg{
float:left;
margin:10px;
width:60px;
}
.cart-goodtdp{
margin:10px0px;
}
/*加、減按鈕*/
.cart-goodtdinput[type='button']{
width:20px;
height:20px;
background:#00f300;
outline:none;
border:none;
}
.cart-goodtdinput[type='button']:disabled{
background:grey;
}
.cart-goodtdinput[type='button']:first-child{
margin-right:-4px;
}
.cart-goodtdinput[type='button']:last-child{
margin-left:-4px;
}
.cart-goodtdinput[type='text']{
width:30px;
height:20px;
outline:none;
border:none;
text-align:center;
}
.table-footer{
display:flex;
justify-content:space-between;
line-height:40px;
}
.table-footerdiv{
font-size:1.2em;
}
.table-footerdivbutton{
background:red;
width:120px;
height:40px;
color:white;
}
</style>
</head>
<body>
<divclass="container">
<header></header>
<sectionclass="main">
<divclass="cart-container">
<tablecellspacing="0">
<trclass="table-header">
<td><inputtype="checkbox"id="chk_alla"></td>
<td>聚美優品發貨</td>
<td>聚美價</td>
<td>數量</td>
<td>小計</td>
<td>操作</td>
</tr>
<!--<trclass="cart-good">-->
<!--<td><inputtype="checkbox"id="001"></td>-->
<!--<td>-->
<!--<imgsrc="https://p2.jmstatic.com/proct/001/293/1293263_std/1293263_60_60.jpg"alt="">-->
<!--<p>[極速免稅]PITTAMASK口罩3枚入</p>-->
<!--<p>型號:新版防曬款容量:3枚入</p>-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td>-->
<!--<inputtype="button"value="-">-->
<!--<inputtype="text"value="1">-->
<!--<inputtype="button"value="+">-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td><ahref="#">刪除</a></td>-->
<!--</tr>-->
</table>
<divclass="table-footer">
<div>
<inputtype="checkbox"id="chk_allb"><labelfor="chk_allb">全選</label>
<spanstyle="margin-left:20px">繼續購物|清空選中商品</span>
</div>
<div>
共<spanid="good_count">5</span>件商品商品應付總額:<spanid="goods_total">¥229.00</span>
<buttonclass="btn_menu">去結算</button>
</div>
</div>
</div>
</section>
</div>
<script>
(function(){
varskin_procts=[
{
"id":"002",
"title":"EsteeLauder多效智妍精華霜15ml",
"img_url":"http://p0.jmstatic.com/proct/003/565/3565880_std/3565880_350_350.jpg",
"price":249.0,
"number":6,
"acount":"520",
"ischecked":true
},
{
"id":"004",
"title":"EsteeLauder肌透修護潔面乳30ml",
"img_url":"http://p4.jmstatic.com/proct/003/155/3155764_std/3155764_350_350.jpg",
"price":49.9,
"number":1,
"acount":"5911",
"ischecked":false
},
{
"id":"008",
"title":"雅詩蘭黛無痕持妝粉底液",
"img_url":"http://p3.jmstatic.com/proct/003/662/3662318_std/3662318_350_350.jpg",
"price":69.9,
"number":2,
"acount":"3972",
"ischecked":true
},
{
"id":"0012",
"title":"EsteeLauder肌初賦活原生液30ml",
"img_url":"http://p4.jmstatic.com/proct/003/565/3565914_std/3565914_350_350.jpg",
"price":159.0,
"number":1,
"acount":"2338"
},
{
"id":"001",
"title":"雅詩蘭黛無痕持妝粉底液30ml",
"img_url":"http://p2.jmstatic.com/proct/001/648/1648502_std/1648502_350_350.jpg",
"price":298.0,
"number":4,
"acount":"5071",
"ischecked":false
},
{
"id":"009",
"title":"雅詩蘭黛眼部精華霜15ml",
"img_url":"http://p1.jmstatic.com/proct/001/049/1049746_std/1049746_350_350.jpg",
"price":399.0,
"number":1,
"acount":"4022",
"ischecked":false
}
]
//添加商品
functionload(){
vartbody=document.querySelector('.cart-containertabletbody');
for(letgoodofskin_procts){
tbody.innerHTML+=`<trclass="cart-good"id="${good.id}">
<td><inputtype="checkbox"class="good-check"${good.ischecked?"checked":''}></td>
<td>
<imgsrc="${good.img_url}"alt="">
<p>[極速免稅]PITTAMASK口罩3枚入</p>
<p>型號:新版防曬款容量:3枚入</p>
</td>
<td>${good.price}</td>
<td>
<inputtype="button"value="-"${good.number<=1?"disabled":''}>
<inputtype="text"value="${good.number}">
<inputtype="button"value="+">
</td>
<td>${good.price*good.number}</td>
<td><ahref="#">刪除</a></td>
</tr>`
}
totalAcount();
}
load();
//endall..........
//1.為table注冊單擊事件
vartable01=document.querySelector('.cart-containertable');
table01.onclick=function(event){
varnode=event.target
if(node.getAttribute('type')=='button'){
//alert(event.target.value);
changeNumber(event);
subtotal(event);
checkedRow(event);
checkedAllRows();
}elseif(node.className=='good-check'){
checkedAllRows();
}elseif(node.id=='chk_alla'){
varf=event.target.checked;
varchks=document.querySelectorAll('.good-check');
for(varckofchks){
ck.checked=f;
}
for(vargoodofskin_procts){
good.ischecked=f;
}
}elseif(node.nodeName.toLowerCase()=='a'){
vartr=event.target.parentNode.parentNode;
for(vari=0;i<skin_procts.length;i++){
if(skin_procts[i].id==tr.id){
skin_procts.splice(i,1);
console.log(skin_procts);
}
}
tr.parentNode.removeChild(tr);
}
totalAcount();
};
//單擊增加或減少按鈕的方法
functionchangeNumber(event){
varnode=event&&event.target;
varv=0;
if(node.value&&node.value=='+'){
//node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
node.previousElementSibling.value++;
v=node.previousElementSibling.value;
node.previousElementSibling.previousElementSibling.disabled=false;
}else{
//if(node.value&&node.value=='+')
if(node.nextElementSibling.value>1){
node.nextElementSibling.value--;
v=node.nextElementSibling.value;
if(v==1){
node.disabled=true;
}
}
}
//存儲商品數量
varid=node.parentNode.parentNode.id;
for(vargoodofskin_procts){
if(id==good.id){
good.number=v;
}
}
}
//每個商品小計的方法
functionsubtotal(event){
varnode=event&&event.target;
//varid=node.parentNode.parentNode.id;
//for(vargofskin_procts){
//if(g.id==id){
//alert(g.price);
//}
//}
//varprice=;
varprice=node.parentNode.previousElementSibling.innerText;
varnum=node.parentNode.children[1].value;
node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
}
//檢驗該商品是否選中
functioncheckedRow(event){
event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
//event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;
//vartbody=event.target.parentNode.parentNode.parentNode;
//event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;
}
//檢查是否全選
functioncheckedAllRows(){
varchks=document.querySelectorAll('.good-check');
varflag=true;
for(varckofchks){
if(!ck.checked){
flag=false;
break;
}
}
document.querySelector('#chk_alla').checked=flag;
}
//統計商品總量和總價格
functiontotalAcount(){
vartotal=0;
vartotal_price=0;
varchks=document.querySelectorAll('.good-check');
for(varckofchks){
if(ck.checked){
id=ck.parentNode.parentNode.id;
for(vargoodofskin_procts){
if(id==good.id){
total+=~~good.number;
total_price=total_price+(good.number*good.price);
good.ischecked=true;
}
}
}
}
document.querySelector('#good_count').innerText=total;
document.querySelector('#goods_total').innerText=total_price;
}
})();
</script>
</body>
</html>
❹ java中寫商品購物車怎麼實現每種商品總價都隨商品數量變化而變化
一般就是你在頁面增加監聽事件,每次修改商品數量就重新計算總價
❺ 請幫我修改一下購物車的代碼!
我剛實訓完做了個網上書城的小項目 ,用的是jsp
你的代碼我沒看懂
購物車中商品數量我設置的默認值是1 ,修改數量我是用先表單提交到另一頁面進行數量修改,然後再返回到購物車頁面的
不知道你購物車中的商品是如何存的 我是存在一個容器中然後,然後我把容器存進session中 數量的存儲也一樣
我是個菜鳥 咱們可以交流交流
❻ jquery實現的購物車商品數量變化,價格隨之變動,但是總價格怎麼跟著變啊
這個很簡單吧,,,寫一個統計總價的方法。數量變動或價錢變動的時候重新執行一下總價的方法。
❼ jquery js實現的購物車商品數量變化,價格隨之變動,但是總價格怎麼跟著變啊
按照你的公式計算並更新一下不行嗎?
如果你不會寫,貼出你的代碼。。。
❽ ASP如何更改購物車中商品數量和計算總價
這是因為當購物車有兩種或以上的商品時,你的actionid的值就會變成形如"12, 22, 25"的形式,成了字元串,而不是數值型,所以會出錯,
我幫你修改了一下,就是把那個form表單位置改改就行了,改成每個商品都在自己的一個form表單里,這樣就不會出錯了!!
<%
Set conn = Server.CreateObject("ADODB.Connection")
conn.open mallDSN
set rs=server.createobject("ADODB.Recordset")
rs.open "select actionid,id,cpsl,yunfei,proctnum,goods,style,state,paid from orders1 where username='"&username&"' and yunfei=0 ",conn,1,3
do while not rs.eof%>
<form name="form" method="post" action="add.asp?action=cpsl&actionid=<%=rs("actionid")%>">
<tr bgcolor="#FFFFFF">
<td width="7%" height="89" align="center" style='PADDING-LEFT: 5px'><input name="id" type="checkbox" checked="checked" value="<% = rs("id") %>" />
</td>
<td align="left" style='PADDING-LEFT: 5px' width="16%"><div align="center"><img src="<% = rs("goods")%>" width="75" height="75" border="0" /></div></td>
<td align="center" width="13%"><a class="a5" href="proct.asp?id=<% = rs("id") %>" target="_blank">
<% = rs("proctnum") %>
</a></td>
<td align="center" width="13%"><font color="#FF0000"> <%=rs("paid")%></font> 元</td>
<td align="center" width="13%"><font color="#FF0000">
<input name="cpsl" type="text" id="cpsl" style="font-size:12px" value="<% = rs("cpsl")%>" size=3 maxlength=20>
</font></td>
<td align="center" width="13%">
<input type="submit" name="Submit4" value="修改"></td>
<td align="center">
<%
response.Write "<a href=add.asp?action=del&actionid="&rs("actionid")&">"
response.Write "<img src=images/trash.gif border=0></a></td></tr></form>"
rs.movenext
loop
rs.close
set rs=nothing
response.write "<tr><td height=36 colspan=6 bgcolor=#FFFFFF ><div align=center> "
if action<>"addtocart" then
%>
<input name="Submit22" type="button" onclick="MM_goToURL('parent','proct.asp');return document.MM_returnValue" value="繼續購物" />
<input name="Submit23" type="button" value="去收銀台" onclick="this.form.action='zxoderok.asp';this.form.submit()" />
<%
end if
%>
</td>
</tr>
</table>
試試看,還有問題就給我在網路里留言!
❾ 無刷新修改購物車產品數量得總金額的js代碼
用你給的代碼基礎上用了一個最簡單的js計算,數量是鍵盤輸入,也可以在左右兩側加上自增減的操作,望採納!
<table width="500" border="0" cellpadding="5" cellspacing="0">
<tr><td>數量</td><td>單價</td></tr>
<tr>
<td><input type="text" id="num" value="1" size="5" onchange="setTotal();"/></td>
<td><span id="fare">6.00</span>元</td>
</tr>
<tr>
<td> </td>
<td>總金額:¥:<span id="total_Price">6</span>.00</td>
</tr>
</table>
<p>數量那裡最好能鍵盤輸入,不然買100件就有的點了。麻煩再給看看哈</p>
<script type="text/JavaScript">
function setTotal(){
var fare=document.getElementById("fare").innerHTML;
//alert(fare);
var num=document.getElementById("num").value;
if(/\D/.test(num)){//檢查用戶輸入的值是否是數字
alert("請您輸入正確的數量!");
document.getElementById("total_Price").innerHTML="0"
}else{
document.getElementById("total_Price").innerHTML=parseFloat(fare*num);
}
}
</script>
❿ asp怎麼實現購物車中用戶修改數量的時候,進行實時的計算總價。
你好? 首先來在添加購物車源的時候、、將 商品信息++預購數量 存入資料庫中購物車表
後面可以這樣做
<% ss=rs("商品單價欄位名")*rs("預購數量欄位名") %>
後面可以顯示該商品總價 <%=ss%>也可以直接<%=rs("商品單價欄位名")*rs("預購數量欄位名") %>
算總價的時候
<% s=s+rs("商品單價欄位名")*rs("預購數量欄位名") %>後面用<%=s%>顯示輸出就可以了
關於折扣、、你就直接舉一反三吧、純手打!!!!