javascript购物车,JavaScript购物车功能代码及效果

在HTML里用javascript做一个简单购物车部分

给楼主做了一个，JS实现商品计数的加和减，最少不能少于1，最多不大于99，代码里面有注释，方面楼主查看和使用。

创新互联建站于2013年开始，是专业互联网技术服务公司，拥有项目成都网站设计、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元黑河做网站,已为上家服务,为黑河各地企业和个人服务,联系电话:18982081108

请教JavaScript中 怎么让购物车的总计价格变化？

一般有两种做法。

一种是

在页面加载完毕后，先初始化一次总金额。

在调用添加、减少方法时，获取总金额的值然后加上或减去物品*数量的值

另一种就是

同样先初始化总金额

在调用添加、减少方法后，直接重新计算所有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 实现加入购物车功能

参考以下代码：

注意需要导入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)转换为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);  

//在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行  

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);//数量+1  

//金额从新计算  

$gtds.eq(3).html(price*num);  

return;//后面代码不再执行  

}  

}  

//若不存在,创建后追加  

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

//购物车数据改变  

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

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

//num此时为number类型(在计算时会自动转换为number类型)  

$td.val(++num);  

//获取单价,再加计算前要先转换为number类型  

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

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

//总计功能  

total();  

}  

//减少"-"功能  

function decrease(btn){  

//该商品数量=1时候不能再减少  

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

if(num = 1){  

return;     

}  

var $stock = findStock(btn);  

//库存+1  

var stock = $stock.html();  

$stock.html(++stock);  

//商品数量-1  

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

//从新计算金额  

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

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

//总计功能  

total();  

}  

//"x"删除按钮功能  

function del(btn){  

//将商品数量归还库存  

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数量/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。

说的通俗一点就是 ： 你在页面上会看到“放入购物车”几个字，这是个超连接，当你点击的时候会调用一个javascript的方法，这个方法名是addshopcart，需要的参数是商品的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"

数量

/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实现在1.html把商品放购物车,在2.html显示购物车内的信息.看问题补充

一般来说，购物车信息是放在数据库的。不建议放在session。添加购物车就向数据库添加一条数据，另外一个页面刷新自然就可以获取数据