建站
咨詢
售后
建站咨詢
新聞中心
在HTML里用javascript做一個簡單購物車部分
給樓主做了一個，JS實現(xiàn)商品計數(shù)的加和減，最少不能少于1，最多不大于99，代碼里面有注釋，方面樓主查看和使用。
創(chuàng)新互聯(lián)建站于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務公司，擁有項目成都網(wǎng)站設計、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元黑河做網(wǎng)站,已為上家服務,為黑河各地企業(yè)和個人服務,聯(lián)系電話:18982081108
請教JavaScript中 怎么讓購物車的總計價格變化？
一般有兩種做法。
一種是
在頁面加載完畢后，先初始化一次總金額。
在調(diào)用添加、減少方法時，獲取總金額的值然后加上或減去物品*數(shù)量的值
另一種就是
同樣先初始化總金額
在調(diào)用添加、減少方法后，直接重新計算所有price的值然后給總金額賦值。
```js
function?updateTotalPrice()?{
let?count=?0
const?priceNodes?=?document.querySelectorAll("li?input[name='price']")
priceNodes.forEach(node?=?{
count+=?parseFloat(node.value)?*?100
})
document.querySelector("#totalPrice").innerHTML?=?count/?100
}
```
jquery 實現(xiàn)加入購物車功能
參考以下代碼：
注意需要導入jquery.js.
!DOCTYPE?html??
html??
head??
title購物車----jQuery/title??
meta?charset="utf-8"?/??
style?type="text/css"??
h1?{??
text-align:center;??
}??
table?{??
margin:0?auto;??
width:60%;??
border:2px?solid?#aaa;??
border-collapse:collapse;??
}??
table?th,?table?td?{??
border:2px?solid?#aaa;??
padding:5px;??
}??
th?{??
background-color:#eee;??
}??
/style??
script?type="text/javascript"?src="./js/jquery.js"/script??
script?type="text/javascript"??
function?add_shoppingcart(btn){//將btn(dom)轉(zhuǎn)換為jQuery對象??
//先獲取商品名字和單價還有庫存以備后面使用??
var?$tds?=?$(btn).parent().siblings();??
//$tds.eq(0)是jQuery對象??$tds[0]是DOM對象??
var?name?=?$tds.eq(0).html();//string??
var?price?=?$tds.eq(1).html();//string??
var?stock?=?$tds.eq(3).html();//string??
//查看庫存是否還有=0??
if(stock?=?0){??
return;?????
}??
//無論購物車中是否有該商品,庫存都要-1??
$tds.eq(3).html(--stock);??
//在添加之前確定該商品在購物車中是否存在,若存在,則數(shù)量+1,若不存在則創(chuàng)建行??
var?$trs?=?$("#goodstr");??
for(var?i=0;i$trs.length;i++){??
var?$gtds?=?$trs.eq(i).children();??
var?gName?=?$gtds.eq(0).html();??
if(name?==?gName){//若存在??
var?num?=?parseInt($gtds.eq(2).children().eq(1).val());??
$gtds.eq(2).children().eq(1).val(++num);//數(shù)量+1??
//金額從新計算??
$gtds.eq(3).html(price*num);??
return;//后面代碼不再執(zhí)行??
}??
}??
//若不存在,創(chuàng)建后追加??
var?li?=??
"tr"+??
"td"+name+"/td"+??
"td"+price+"/td"+??
"td?align='center'"+??
"input?type='button'?value='-'?onclick='decrease(this);'/?"+??
"input?type='text'?size='3'?readonly?value='1'/?"+??
"input?type='button'?value='+'?onclick='increase(this);'/"+??
"/td"+??
"td"+price+"/td"+??
"td?align='center'"+??
"input?type='button'?value='x'?onclick='del(this);'/"+??
"/td"+??
"/tr";??
//追加到#goods后面??
$("#goods").append($(li));??
//總計功能??
total();??
}??
//輔助方法--單擊購物車中的"+"??"-"??"x"按鈕是找到相關商品所在td,以jQuery對象返回??
function?findStock(btn){??
var?name?=?$(btn).parent().siblings().eq(0).html();//獲取商品名字??
//注意table默認有行分組,若此處使用?$("#table1tr:gt(0)")則找不到任何tr??
var?$trs?=?$("#table1tbodytr:gt(0)");??
for(var?i=0;i$trs.length;i++){??
var?fName?=?$trs.eq(i).children().eq(0).html();??
if(name?==?fName){//找到匹配的商品??
return?$trs.eq(i).children().eq(3);??
}??
}??
}??
//增加"+"功能??
function?increase(btn){??
//獲取該商品庫存看是否=0??
var?$stock?=?findStock(btn);??
var?stock?=?$stock.html();??
if(stock?=?0){??
return;??
}??
//庫存-1????
$stock.html(--stock);??
//購物車數(shù)據(jù)改變??
var?$td?=?$(btn).prev();??
var?num?=?parseInt($td.val());//number??
//num此時為number類型(在計算時會自動轉(zhuǎn)換為number類型)??
$td.val(++num);??
//獲取單價,再加計算前要先轉(zhuǎn)換為number類型??
var?price?=?parseInt($(btn).parent().prev().html());??
$(btn).parent().next().html(num*price);??
//總計功能??
total();??
}??
//減少"-"功能??
function?decrease(btn){??
//該商品數(shù)量=1時候不能再減少??
var?num?=?parseInt($(btn).next().val());??
if(num?=?1){??
return;?????
}??
var?$stock?=?findStock(btn);??
//庫存+1??
var?stock?=?$stock.html();??
$stock.html(++stock);??
//商品數(shù)量-1??
$(btn).next().val(--num);??
//從新計算金額??
var?price?=?parseInt($(btn).parent().prev().html());??
$(btn).parent().next().html(price*num);??
//總計功能??
total();??
}??
//"x"刪除按鈕功能??
function?del(btn){??
//將商品數(shù)量歸還庫存??
var?$stock?=?findStock(btn);??
var?stock?=?parseInt($stock.html());??
var?num?=?parseInt($(btn).parent().prev().prev().children().eq(1).val());??
$stock.html(num?+?stock);??
//清空改行商品列表??
$(btn).parent().parent().remove();??
//總計功能??
total();??
}??
//總計功能??
function?total(){??
//獲取所有購物車中的trs??
var?$trs?=?$("#goods?tr");??
var?amount?=?0;??
for(var?i=0;i$trs.length;i++){??
var?money?=?parseInt($trs.eq(i).children().eq(3).html());??
amount?+=?money;??
}??
//寫入總計欄??
$("#total").html(amount);??
}??
/script??
/head??
body??
h1真劃算/h1??
table?id="table1"??
tr??
th商品/th??
th單價(元)/th??
th顏色/th??
th庫存/th??
th好評率/th??
th操作/th??
/tr?????
tr??
td羅技M185鼠標/td??
td80/td??
td黑色/td??
td5/td??
td98%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
tr??
td微軟X470鍵盤/td??
td150/td??
td黑色/td??
td9028/td??
td96%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
tr??
td洛克iphone6手機殼/td??
td60/td??
td透明/td??
td672/td??
td99%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
tr??
td藍牙耳機/td??
td100/td??
td藍色/td??
td8937/td??
td95%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
tr??
td金士頓U盤/td??
td70/td??
td紅色/td??
td482/td??
td100%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
/table??
h1購物車/h1??
table??
thead??
tr??
th商品/th??
th單價(元)/th??
th數(shù)量/th??
th金額(元)/th??
th刪除/th??
/tr??
/thead??
tbody?id="goods"??
/tbody??
tfoot??
tr??
td?colspan="3"?align="right"總計/td??
td?id="total"/td??
td/td??
/tr??
/tfoot??
/table??????
/body??
/html
最終效果圖:
放入購物車
樓上說的有一點錯誤，%=id%不是jsp小腳本，而是是java的寫法，目的是當你點擊這個超連接的時候得到這個商品的id。
說的通俗一點就是 ： 你在頁面上會看到“放入購物車”幾個字，這是個超連接，當你點擊的時候會調(diào)用一個javascript的方法，這個方法名是addshopcart，需要的參數(shù)是商品的id。
用javascript怎樣計算購物車價格
/*計算總價格*/
var totalPrice=0;
for(var a=1;a3;a++){
var quantity=document.getElementById("quantity"+a).value;
var price=document.getElementById("price"+a).value;
var smallTotal=quantity*price;
totalPrice=totalPrice+smallTotal;
}
var total=document.getElementById("total");
total.innerHTML=totalPrice;
}
/script
script type="text/javascript"
function initialize()
{
var totalPrice=0;
for(var a=1;a3;a++){
var quantity=document.getElementById("quantity"+a).value;
var price=document.getElementById("price"+a).value;
var smallTotal=quantity*price;
totalPrice=totalPrice+smallTotal;
/*alert(smallTotal);*/
var smallT=document.getElementById("smallTotal"+a);
smallT.innerHTML=smallTotal;
}
/*取出購物車的所有商品的價格總和*/
var total=document.getElementById("total");
total.innerHTML=totalPrice;
}
/script
style type="text/css"
#imgtest {
position: absolute;
top: 100px;
left: 400px;
z-index: 1;
}
table {
left: 100px;
font-size: 20px;
}
/style
/head
body onload="initialize()"
div id="imgtest"/div
br /
br /
table border="1" style="text-align: center;" align="center"
thead style="height: 50"
td style="WIDTH: 300px"
商品名稱
/td
td style="WIDTH: 60px"
圖片
/td
td style="WIDTH: 170px"
數(shù)量
/td
td style="WIDTH: 170px"
價格
/td
td style="WIDTH: 250px"
小計
/td
/thead
tbody
tr
td class="name"商品1/td
td class="image"
img src="1.jpg" width="40px" height="40px" id="image1" /
/td
td class="quantity"
input id="quantity1" value="1" onblur="total(1);" /
/td
td class="price"
input type="hidden" id="price1" value="20" /
20
/td
td class="total"
span id="smallTotal1"/span 元
/td
/tr
tr
td class="name"商品2/td
td class="image"
img src="1.jpg" width="40px" height="40px" id="image1" /
/td
td class="quantity"
input id="quantity2" value="2" onblur="total(2);" /
/td
td class="price"
input type="hidden" id="price2" value="30" /
30
/td
td class="total"
span id="smallTotal2"/span 元
/td
/tr
tr
td colspan="4" class="cart_total"
br
/td
td
span class="red"總計:/spanspan id="total"/span 元
/td
/tr
/tbody
/table
/body
/html
javascript+jsp實現(xiàn)在1.html把商品放購物車,在2.html顯示購物車內(nèi)的信息.看問題補充
一般來說，購物車信息是放在數(shù)據(jù)庫的。不建議放在session。添加購物車就向數(shù)據(jù)庫添加一條數(shù)據(jù)，另外一個頁面刷新自然就可以獲取數(shù)據(jù)
文章題目：javascript購物車,JavaScript購物車功能代碼及效果
瀏覽地址：http://www.dlmjj.cn/article/dsgiesd.html
