❶ 網頁購物車的數量添加和更新怎麼實現
在新增 的頁面 設置一個 令牌 然後到配置文件中 加上 一個返回令牌的result
❷ 用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>
❸ 求html購物車代碼，，效果如圖顯示
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>修改訂單</title>
<styletype="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top:1pxsolid#333;
border-left:1pxsolid#333;
width:400px;
}
td{
border-right:1pxsolid#333;
border-bottom:1pxsolid#333;
text-align:center;
}
.title{
font-weight:bold;
background-color:#cccccc;
}
inputtext{
width:100px;
}
</style>
<scripttype="text/javascript">
functionaddRow(){
//行的長度
varrowlength=document.getElementById("order").rows.length;
//得到整個表格對象
varorder=document.getElementById("order").insertRow(rowlength-1);
order.id=rowlength-1;
//插入列
varcel1=order.insertCell(0).innerHTML="游戲光碟";
varcel2=order.insertCell(1).innerHTML="34";
varcel3=order.insertCell(2).innerHTML="¥58.40";
varcel4=order.insertCell(3).innerHTML="<inputtype="button"value="刪除"onclick="delRow('"+(rowlength-1)+"')"/>"+"<inputtype="button"value="修改"onclick="editRow('"+(rowlength-1)+"')"/>"
}
functiondelRow(qwe){
=document.getElementById(qwe).rowIndex;
document.getElementById("order").deleteRow(ewq);
}
functioneditRow(rowID){
varrow=document.getElementById(rowID);
varcel=row.cells;
vartext=cel[1].innerHTML;
cel[1].innerHTML="<inputtype='text'value='"+text+"'style='width:40px;'>"
cel[3].lastChild.value="確定";
cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')");
}
functionupdate(qwe){
varrow=document.getElementById(qwe);
varcel=row.cells;
vartext=cel[1].lastChild.value;
cel[1].innerHTML=text;
cel[3].lastChild.value="修改";
cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')");
}
/*
functionadd(){
vara=document.getElementById("order").rows.length;
varb=document.getElementById("order").insertRow(a-1);
varone1=b.insertCell(0).innerHTML="123";
}
*/
</script>
</head>
<body>
<tableborder="0"cellspacing="0"cellpadding="0"id="order">
<trclass="title">
<td>商品名稱</td>
<td>數量</td>
<td>價格</td>
<td>操作</td>
</tr>
<trid="1">
<td>防滑真皮休閑鞋</td>
<td>12</td>
<td>¥568.50</td>
<td><inputname="rowdel"type="button"value="刪除"onclick='delRow("1")'/>
<inputid="edit1"type="button"value="修改"onclick='editRow("1")'/></td>
</tr>
<tr>
<tdcolspan="4"style="height:30px;">
<inputname="addOrder"type="button"value="增加訂單"onclick="addRow()"/></td>
</tr>
</table>
</body>
</html>
這個是我原來上學的時候練習的代碼，練習的是基礎的jsDOM操作，不過建議以後用Jquery 比較方便 有什麼不懂得可以問我
❹ .net在html中實現購物車的功能如何實現根據不同數量的購物品種，生成多個『+』『-』的文本框格式怎麼控制
這個好像不是用for循環做的吧，我怎麼覺得是js做的呢，這邊是數量改變，價格跟著改變
❺ 如何用jquery寫多個購物車的數量曾減，我用jquery寫了但只第一個購物車增減有用，其它的無效，代碼如下：
這個時候就像前面大哥說的 不能用來表示了 可以用class
還有你的這個結構是不規范的 id一個頁面只能是唯一的
為了不同時改變 其他的購物車的數量 可以來找到相對的
這個結構：
<div>
<p>單價：3.95</p>
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="" type="text" value="4" />
<inputclass="add" name="" type="button" value="+" />
<p>總價：<label class="total"></label></p>
</div>
<div>
<p>單價：3.95</p>
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="" type="text" value="4" />
<input class="add" name="" type="button" value="+" />
<p>總價：<label class="total"></label></p>
</div>
把每個購物車用一個div包起來
js:
$(function(){
//var t = $("#text_box");
$(".add").click(function(){
var t= $(this).parent().find(".text_box"); //根據這個來找到它相對的元素 當然也可以直接 //$(this).prev(); 這個直接來找到
t.val(parseint(t.val()+1);
setTotal($(this),t.val());
})
$(".min").click(function(){
var t= $(this).parent().find(".text_box"); //根據這個來找到它相對的元素 當然也可以直接 //$(this).next(); 這個直接來找到
t.val(parseint(t.val()-1);
setTotal($(this),t.val());
})
function setTotal(obj,number){
var total=number*$(obj).parent().find("p:first").text(); //這里算出總價
$(obj)).parent().find("total").html(total.toFixed(2));
}
// setTotal();
})
給一個建議 以後要想做好東西 布局一定要好
一個好的結構 才能讓你任意操作
❻ jsp購物車計算數量的問題！
總計只能是每次改動要更新一次咯。沒次算完小計後，再吧所有小計加起來得總計。
❼ 該如何寫購物車數量效果代碼
代碼我先不貼了，我提供下思路，具體的寫法你自己會的。分數你看回著給啦
首先得到該產品答的數量最大值
獲取文本框的onchange事件，在此事件中，比較文本值和最大值，如果小於最大值，就不做任何操作，如果大於最大值，就彈出對話框，已經超過了最大數量，或者在頁面上設置一個顯示提示信息的文本框。
❽ 購物車數量超過庫存，文本框如何跳出js提示，謝謝高手
<script language='javascript'>
function checkSum()
{
var sum = 0;
for(var i=0;i<document.form1.elements["writer"].length;i++)
{
if(document.form1.elements["writer"][i].checked)
{
sum = sum +parseInt(document.form1.elements["writer"][i].value);
}
}
totalprice.innerText = sum +" 元";
}
</script>
<form method=post name=form1>
<input type="checkbox" name=writer value="34" onclick="checkSum()">韓國耳飾tm56（34元）<br>
<input type="checkbox" name=writer value="46" onclick="checkSum()">純銀吊墜tc34（46元）<br>
<input type="checkbox" name=writer value="30" onclick="checkSum()">黃鶯手鐲ta345（30元）<br>
<input type="checkbox" name=writer value="40" onclick="checkSum()">翡翠玉鐲1346（40元）<br>
<input type="checkbox" name=writer value="50" onclick="checkSum()">天涯耳飾1233（50元）<br>
<br>
總價為：<span id="totalprice">0 元</span>
</form>
❾ 網頁製作中像電商購物車中的商品數量改變是怎麼做的
這個用javascript實現啊.貌似不難啊
❿ struts中jquery如何實現購物車中多個商品數量的增減
$("#btn").click(function(){
var txtvalue=$("商品數量input").val();
$("商品數量input").val(txtvalue+1);
});
你需要這個？還是對選擇器不熟，只能選到內地一條記錄？容