当前位置:首页 » 网购平台 » 购物车的加减代码怎写
扩展阅读
宁波奥德赛优惠价格 2021-03-15 14:26:02
丹尼斯购物卡能挂失么 2021-03-15 14:25:58
淘宝购物指纹验证失败 2021-03-15 14:24:44

购物车的加减代码怎写

发布时间: 2021-03-03 03:37:51

『壹』 jquery问题购物车加减按钮

因为一个页面中只能存在一个 id 为 add 的元素,根据你现在的代码,如果有10行记录,那就会有10个 id 为 add 的 input。

所以你要把这些 input 的 id 都改为 class,text_box 的值也要根据每次点击来判断

<input class="min" name="" type="button" value="-" />
<input class="text_box" name="goodnum" type="text" value="${item.value.quantity }" style="width:25px;" />
<input class="add" name="" type="button" value="+" />

$(".add").click(function() {
// $(this).prev() 就是当前元素的前一个元素,即 text_box
$(this).prev().val(parseInt($(this).prev().val()) + 1);
setTotal();
});

$(".min").click(function() {
// $(this).next() 就是当前元素的下一个元素,即 text_box
$(this).next().val(parseInt($(this).next().val()) - 1);
setTotal();
});

『贰』 网上购物系统里面的购物车部分代码怎么写(要求用ASP)

这个是很复杂的东西,没法给你三言两语讲清楚。
可以去 aspx类的学习论坛看下,一般都有现成的代码!

『叁』 java web中购物车功能的实现。如何实现上面的加减删 操作

如果不使用 Ajax 技术,可以在后台做三个 action 分别是 add(),sub() 和 delete() 分别表示加、减、删。
然后前台针对这三专个属操作做三个链接:
youproject/add?id=1
youproject/sub?id=1
youproject/delete?id=1
如果是要做 REST 风格的链接,可以这样:
youproject/add/1
youproject/sub/1
youproject/delete/1
后台 action 接收到请求后,处理购物车数据,处理完成后返回前台,刷新页面。

『肆』 求php增加购物车数量的加减,

伪代码:
前端:在你页面上数量那栏增加

<div class="quantity-form"><a href="javascript:void(0);" clstag="cart_num_down" class="decrement disabled" id="decrement_8888_526830_1_1">-</a>
<input autocomplete="off" type="text" class="itxt" value="1" id="changeQuantity_8888_526830_1_1_0" minnum="1">
<a href="javascript:void(0);" clstag="cart_num_up" class="increment" id="increment_8888_526830_1_1_0">+</a>
</div>
你的购物车是个循环列表,可以去得到,每个商品的信息:id是商品
function cart_num_up(id,uid){
$.ajax({
type: "POST",
url: "CART_num.PHP",
data: {id:id, num:-1,uid:uid},
dataType: "json",
success: function(data){
if(data.status==1){

});
});

}
function cart_num_down(id,uid){
$.ajax({
type: "POST",
url: "CART_num.PHP",
data: {id:id, num:1,uid:uid},
dataType: "json",
success: function(data){
if(data.status==1){

});
});
}
点一次 加或减按钮,触发js向后端发起ajax请求:返回的是增加成功和失败状态和剩余数量;
CART_num.PHP
$id = (int)$_POST['id'];
$num = (int)$_POST['num'];
$uid =(int)$_POST['uid']; //有封装获取post或get函数更好
//查库看库存
$sort = get_kucun_num();
//查看购物车目前数量
$cart_num = get_cart_num(uid,id);
//判断库存
if($sort >$cart_num){
}else{
}

if($num<0){
//减法 $sql =“update cart set cart_num = cart_num-1 where uid =uid and id =id ”
if(($cart_num-1)>1){
}else{
}){
//加法 $sql =“update cart set cart_num = cart_num+1 where uid =uid and id =id ”
}else{
//不正确的请求
}

『伍』 手机端点击弹窗处的“加入购物车”后,”购物车“处的数字变化怎么在html写

就是简单的数字加减,点击加入购物车后,将购物车的数字内容提取出来加一再回赋值到内容里。一般答数字部分会单独给一个标签来写入变量给js进行操作,
购物车还有加减按钮,也是将标签内容的数字加一减一就行了
数字的改变需要用到 js 或者其他js框架来进行操作

『陆』 eclipse购物车如何加减累加编程,如何界面更改设计,添加新功能

看你的购物车在哪里存储,是不是存在表里了,如果是表里,添加前,商品id、用户ID(和状态位)进行一次查询,如果有,做数量处理。没有则是新增。

『柒』 如何用jquery实现购物车加减

直接删除就是了。不过现在都在赛客宝贝街购物。正品,选择多。

『捌』 用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>

『玖』 php购物车点击加减的时候在不刷新页面的时候,价格相对增加或减少该怎么实现

页面只是一个复效果,可以通过制js直接计算出价格后,再替换原来的价格‘价格对应元素的对象.text('新的价格')’显示出来;
如果结算方式比较复杂,建议通过Ajax传值到后台进行计算后,再替换原来的价格‘价格对应元素的对象.text('新的价格')’显示出来;
obj.prev.val(++num);
之后加入下行(如果class='number'的元素是价格显示区域的话)
obj.closest('.btn-numbox').find('.number').text(num*单价);

『拾』 ecshop购物车加减css样式代码怎么样添加

在style.css里添加下面样式


.goods_cut{
background:url("../images/plus.gif")no-repeatscroll00transparent;
border:0none;
cursor:pointer;
display:block;
float:left;
font-size:0;
height:15px;
line-height:0;margin:8px3px0;
width:15px;
}
input.goodsBuyBox,input.number{
border:1pxsolid#DDDDDD;
float:left;
font-size:10px;
height:18px;
line-height:18px;
margin:5px6px0;
padding:0;
text-align:center;
width:32px;
}
.goods_add{
background:url("../images/plus.gif")no-repeatscroll0-15pxtransparent;
border:0none;
cursor:pointer;
display:block;
float:left;
font-size:0;
height:15px;
line-height:0;
margin:8px3px0;
width:15px;
}

在flow.dwt里,看各自的模板去修改,总之要找到这串代码:
<input type="text" name="goods_number[{$goods.rec_id}]" ……


下面是脚本,放进flow.dwt里

<scriptlanguage="javascript"type="text/javascript">
functiongoods_cut($val){
varnum_val=document.getElementById('number'+$val);
varnew_num=num_val.value;
if(isNaN(new_num)){alert('请输入数字');returnfalse}
varNum=parseInt(new_num);
if(Num>1)Num=Num-1;
num_val.value=Num;
document.getElementById('updatecart').click();
}
functiongoods_add($val){
varnum_val=document.getElementById('number'+$val);
varnew_num=num_val.value;
if(isNaN(new_num)){alert('请输入数字');returnfalse}
varNum=parseInt(new_num);
Num=Num+1;
num_val.value=Num;
document.getElementById('updatecart').click();
}
</script>


找到
<input type="text" name="goods_number[{$goods.rec_id}]"
搜索不到你就搜goods_number就行了
替换为:


<spanclass="goods_cut"onclick="goods_cut('{$goods.rec_id}');"></span>
<inputtype="text"name="goods_number[{$goods.rec_id}]"id="number{$goods.rec_id}"value="{$goods.goods_number}"size="4"class="number"onblur="if(isNaN(this.value)){alert('请输入数字');returnfalse}else{document.getElementById('updatecart').click();}"title="{$lang.goods_number_tip}"/>
<spanclass="goods_add"onclick="goods_add('{$goods.rec_id}');"></span>




找到

<input name="submit" type="submit" value="{$lang.update_cart}" class="btn_s3"/>



其实就是更新购物车的按钮
添加一个id=“updatecart”

<input name="submit" type="submit" id="updatecart" value="{$lang.update_cart}" class="btn_s3"/>