js购物车功能php,javascript如何实现购物车的功能（代码）

本篇文章给大家带来的内容是关于javascript如何实现购物车的功能(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

table{

width: 600px;

margin: 0 auto;

border-collapse: collapse;

}

td{

border: 1px solid silver;

line-height: 40px;

text-align: center;

}

.btnl,.btnr{

border-style: none;

outline: none;

color: deeppink;

}

.txt{

width: 30px;

height: 30px;

border-style: none;

outline: none;

text-align: center;

}

//获取左右的按钮集合

var btnleft=document.getElementsByClassName("btnl");

var btnright=document.getElementsByClassName("btnr");

//获取表示数量的class名为txt的input元素集合

var txt=document.getElementsByClassName("txt");

//获取表示单价的class名为price的span元素集合

var price=document.getElementsByClassName("price");

//获取表示小计的class名为smallprice的span元素集合

var small=document.getElementsByClassName("smallprice");

//获取表示总价的class名为totle的span元素

var totle=document.getElementsByClassName("totle")[0];

//获取全选反选按钮和选择框

var btna=document.getElementById("btna");

var btnf=document.getElementById("btnf");

var box=document.getElementsByClassName("ckbox");

//获取删除按钮

var btndelete=document.getElementsByClassName("btndelete");

var trlist=document.getElementsByClassName("trinfo");

var totleprice=0; //定义全局变量totleprice的初值为0

//给数量左右两边的+-添加点击事件

for(var i=0;i

{

btnleft[i].index=i; //把i的值赋给btnleft[i]的index

btnleft[i].onclick=function (){ //获取当前对应的文本框的值

var val=txt[this.index].value;

val--; //控制其数量的值不能小于1

if(val<=1)

{

val=1;

}

txt[this.index].value=val; //把更新了的val值再赋给txt[this.index].value

addprice(this.index); //调用一下addprice()使其在当前变化下执行

}

btnright[i].index=i; //把i的值赋给btnright[i]的index

btnright[i].onclick=function (){

var val=txt[this.index].value;

val++;

txt[this.index].value=val;

addprice(this.index);

}

//给checkbox添加点击事件

box[i].onclick=function (){

showtotleprice();

}

//给删除添加点击事件

btndelete[i].index=i;

btndelete[i].onclick=function (){

totleprice-=parseFloat(small[this.index].innerText); //将总计里面对应的价格也减掉

totle.innerText=totleprice;

trlist[this.index].remove(); //去掉对应的那一行元素

//重新更新索引 防止其他操作出错

for(var k=0;k

{

trlist[k].index=k;

btndelete[k].index=k;

btnleft[k].index=k;

btnright[k].index=k;

}

}

} //计算小计

function addprice(index){

small[index].innerText=(price[index].innerText*txt[index].value);

} //计算总计

function showtotleprice(){

totleprice=0;

for(var i=0;i

{

if(box[i].checked)

{

totleprice+=parseFloat(small[i].innerText);

}

}

totle.innerText=totleprice;

}

//全选

btna.onclick=function (){

for(var i=0;i

{

box[i].checked=true;

}

showtotleprice();

}

//反选

btnf.onclick=function (){

for(var i=0;i

{

box[i].checked=!box[i].checked;

}

showtotleprice();

}

相关推荐：