在HTML里用javascript做一個(gè)簡(jiǎn)單購(gòu)物車(chē)部分

給樓主做了一個(gè)，JS實(shí)現(xiàn)商品計(jì)數(shù)的加和減，最少不能少于1，最多不大于99，代碼里面有注釋?zhuān)矫鏄侵鞑榭春褪褂谩?/p>

創(chuàng)新互聯(lián)建站于2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元黑河做網(wǎng)站,已為上家服務(wù),為黑河各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18982081108

請(qǐng)教JavaScript中 怎么讓購(gòu)物車(chē)的總計(jì)價(jià)格變化？

一般有兩種做法。

一種是

在頁(yè)面加載完畢后，先初始化一次總金額。

在調(diào)用添加、減少方法時(shí)，獲取總金額的值然后加上或減去物品*數(shù)量的值

另一種就是

同樣先初始化總金額

在調(diào)用添加、減少方法后，直接重新計(jì)算所有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 實(shí)現(xiàn)加入購(gòu)物車(chē)功能

參考以下代碼：

注意需要導(dǎo)入jquery.js.

!DOCTYPE?html??

html??

head??

title購(gòu)物車(chē)----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對(duì)象??

//先獲取商品名字和單價(jià)還有庫(kù)存以備后面使用??

var?$tds?=?$(btn).parent().siblings();??

//$tds.eq(0)是jQuery對(duì)象??$tds[0]是DOM對(duì)象??

var?name?=?$tds.eq(0).html();//string??

var?price?=?$tds.eq(1).html();//string??

var?stock?=?$tds.eq(3).html();//string??

//查看庫(kù)存是否還有=0??

if(stock?=?0){??

return;?????

}??

//無(wú)論購(gòu)物車(chē)中是否有該商品,庫(kù)存都要-1??

$tds.eq(3).html(--stock);??

//在添加之前確定該商品在購(gòu)物車(chē)中是否存在,若存在,則數(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??

//金額從新計(jì)算??

$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));??

//總計(jì)功能??

total();??

}??

//輔助方法--單擊購(gòu)物車(chē)中的"+"??"-"??"x"按鈕是找到相關(guān)商品所在td,以jQuery對(duì)象返回??

function?findStock(btn){??

var?name?=?$(btn).parent().siblings().eq(0).html();//獲取商品名字??

//注意table默認(rèn)有行分組,若此處使用?$("#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){??

//獲取該商品庫(kù)存看是否=0??

var?$stock?=?findStock(btn);??

var?stock?=?$stock.html();??

if(stock?=?0){??

return;??

}??

//庫(kù)存-1????

$stock.html(--stock);??

//購(gòu)物車(chē)數(shù)據(jù)改變??

var?$td?=?$(btn).prev();??

var?num?=?parseInt($td.val());//number??

//num此時(shí)為number類(lèi)型(在計(jì)算時(shí)會(huì)自動(dòng)轉(zhuǎn)換為number類(lèi)型)??

$td.val(++num);??

//獲取單價(jià),再加計(jì)算前要先轉(zhuǎn)換為number類(lèi)型??

var?price?=?parseInt($(btn).parent().prev().html());??

$(btn).parent().next().html(num*price);??

//總計(jì)功能??

total();??

}??

//減少"-"功能??

function?decrease(btn){??

//該商品數(shù)量=1時(shí)候不能再減少??

var?num?=?parseInt($(btn).next().val());??

if(num?=?1){??

return;?????

}??

var?$stock?=?findStock(btn);??

//庫(kù)存+1??

var?stock?=?$stock.html();??

$stock.html(++stock);??

//商品數(shù)量-1??

$(btn).next().val(--num);??

//從新計(jì)算金額??

var?price?=?parseInt($(btn).parent().prev().html());??

$(btn).parent().next().html(price*num);??

//總計(jì)功能??

total();??

}??

//"x"刪除按鈕功能??

function?del(btn){??

//將商品數(shù)量歸還庫(kù)存??

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();??

//總計(jì)功能??

total();??

}??

//總計(jì)功能??

function?total(){??

//獲取所有購(gòu)物車(chē)中的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;??

}??

//寫(xiě)入總計(jì)欄??

$("#total").html(amount);??

}??

/script??

/head??

body??

h1真劃算/h1??

table?id="table1"??

tr??

th商品/th??

th單價(jià)(元)/th??

th顏色/th??

th庫(kù)存/th??

th好評(píng)率/th??

th操作/th??

/tr?????

tr??

td羅技M185鼠標(biāo)/td??

td80/td??

td黑色/td??

td5/td??

td98%/td??

td?align="center"??

input?type="button"?value="加入購(gòu)物車(chē)"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td微軟X470鍵盤(pán)/td??

td150/td??

td黑色/td??

td9028/td??

td96%/td??

td?align="center"??

input?type="button"?value="加入購(gòu)物車(chē)"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td洛克iphone6手機(jī)殼/td??

td60/td??

td透明/td??

td672/td??

td99%/td??

td?align="center"??

input?type="button"?value="加入購(gòu)物車(chē)"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td藍(lán)牙耳機(jī)/td??

td100/td??

td藍(lán)色/td??

td8937/td??

td95%/td??

td?align="center"??

input?type="button"?value="加入購(gòu)物車(chē)"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

tr??

td金士頓U盤(pán)/td??

td70/td??

td紅色/td??

td482/td??

td100%/td??

td?align="center"??

input?type="button"?value="加入購(gòu)物車(chē)"?onclick="add_shoppingcart(this);"/??

/td??

/tr??

/table??

h1購(gòu)物車(chē)/h1??

table??

thead??

tr??

th商品/th??

th單價(jià)(元)/th??

th數(shù)量/th??

th金額(元)/th??

th刪除/th??

/tr??

/thead??

tbody?id="goods"??

/tbody??

tfoot??

tr??

td?colspan="3"?align="right"總計(jì)/td??

td?id="total"/td??

td/td??

/tr??

/tfoot??

/table??????

/body??

/html

最終效果圖:

放入購(gòu)物車(chē)

樓上說(shuō)的有一點(diǎn)錯(cuò)誤，%=id%不是jsp小腳本，而是是java的寫(xiě)法，目的是當(dāng)你點(diǎn)擊這個(gè)超連接的時(shí)候得到這個(gè)商品的id。

說(shuō)的通俗一點(diǎn)就是 ： 你在頁(yè)面上會(huì)看到“放入購(gòu)物車(chē)”幾個(gè)字，這是個(gè)超連接，當(dāng)你點(diǎn)擊的時(shí)候會(huì)調(diào)用一個(gè)javascript的方法，這個(gè)方法名是addshopcart，需要的參數(shù)是商品的id。

用javascript怎樣計(jì)算購(gòu)物車(chē)價(jià)格

/*計(jì)算總價(jià)格*/

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;

}

/*取出購(gòu)物車(chē)的所有商品的價(jià)格總和*/

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"

商品名稱(chēng)

/td

td style="WIDTH: 60px"

圖片

/td

td style="WIDTH: 170px"

數(shù)量

/td

td style="WIDTH: 170px"

價(jià)格

/td

td style="WIDTH: 250px"

小計(jì)

/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"總計(jì):/spanspan id="total"/span 元

/td

/tr

/tbody

/table

/body

/html

javascript+jsp實(shí)現(xiàn)在1.html把商品放購(gòu)物車(chē),在2.html顯示購(gòu)物車(chē)內(nèi)的信息.看問(wèn)題補(bǔ)充

一般來(lái)說(shuō)，購(gòu)物車(chē)信息是放在數(shù)據(jù)庫(kù)的。不建議放在session。添加購(gòu)物車(chē)就向數(shù)據(jù)庫(kù)添加一條數(shù)據(jù)，另外一個(gè)頁(yè)面刷新自然就可以獲取數(shù)據(jù)

分享文章：javascript購(gòu)物車(chē),JavaScript購(gòu)物車(chē)功能代碼及效果
網(wǎng)站URL：http://chinadenli.net/article31/dsgiesd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、定制開(kāi)發(fā)、微信公眾號(hào)、品牌網(wǎng)站設(shè)計(jì)、小程序開(kāi)發(fā)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)