购物车html代码（HTML购物车代码）

本篇文章给大家谈谈购物车html代码，以及HTML购物车代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、手机端点击弹窗处的“加入购物车”后，”购物车“处的数字变化怎么在html写
• 2、jquery 实现加入购物车功能
• 3、在HTML里用javascript做一个简单购物车部分
• 4、求html购物车代码，，效果如图显示
• 5、asp 购物车

手机端点击弹窗处的“加入购物车”后，”购物车“处的数字变化怎么在html写

就是简单的数字加减，点击加入购物车后，将购物车的数字内容提取出来加一再赋值到内容里。一般数字部分会单独给一个标签来写入变量给js进行操作，

购物车还有加减按钮，也是将标签内容的数字加一减一就行了

数字的改变需要用到 js 或者其他js框架来进行操作

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

最终效果图:

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

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

求html购物车代码，，效果如图显示

html xmlns=""    

head    

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /    

title修改订单/title    

style type="text/css"    

body{    

font-size:13px;    

line-height:25px;    

}    

table{    

border-top: 1px solid #333;    

border-left: 1px solid #333;    

width:400px;    

}    

td{    

border-right: 1px solid #333;    

border-bottom: 1px solid #333;    

text-align:center;    

}    

.title{

font-weight:bold;    

background-color: #cccccc;    

}    

input text{    

width:100px;    

}    

/style    

script type="text/javascript"    

function addRow(){    

//行的长度    

var rowlength=document.getElementById("order").rows.length;    

//得到整个表格对象    

var order = document.getElementById("order").insertRow(rowlength-1);    

order.id=rowlength-1;    

//插入列    

var cel1=order.insertCell(0).innerHTML="游戏光盘";    

var cel2=order.insertCell(1).innerHTML="34";    

var cel3=order.insertCell(2).innerHTML="yen;58.40";    

var cel4=order.insertCell(3).innerHTML="input type=\"button\"value=\"删除\" onclick=\"delRow('"+(rowlength-1)+"')\"/"+ "input type=\"button\"value=\"修改\" onclick=\"editRow('"+(rowlength-1)+"')\"/"    

}    

function delRow(qwe){    

var ewq=document.getElementById(qwe).rowIndex;    

document.getElementById("order").deleteRow(ewq);    

}    

function editRow(rowID){    

var row=document.getElementById(rowID);    

var cel=row.cells;    

var text=cel[1].innerHTML;    

cel[1].innerHTML="input type='text' value='"+text+"' style='width:40px;'"    

cel[3].lastChild.value="确定";    

cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')");    

}    

function update(qwe){    

var row=document.getElementById(qwe);    

var cel=row.cells;    

var text=cel[1].lastChild.value;    

cel[1].innerHTML=text;    

cel[3].lastChild.value="修改";    

cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')");    

}    

/*

function add(){    

var a = document.getElementById("order").rows.length;    

var b = document.getElementById("order").insertRow(a-1);    

var one1 = b.insertCell(0).innerHTML="123";    

}    

*/    

/script    

/head    

body    

table border="0" cellspacing="0" cellpadding="0" id="order"    

 tr class="title"    

   td商品名称/td    

   td数量/td    

   td价格/td    

   td操作/td    

 /tr    

 tr id="1"    

   td防滑真皮休闲鞋/td    

   td12/td    

   tdyen;568.50/td    

   tdinput name="rowdel" type="button" value="删除" onclick='delRow("1")' /    

   input id="edit1" type="button" value="修改" onclick='editRow("1")' //td    

 /tr    

 tr    

   td colspan="4" style="height:30px;"    

   input name="addOrder" type="button" value="增加订单" onclick="addRow()" //td    

 /tr    

/table    

/body    

/html

这个是我原来上学的时候练习的代码，练习的是基础的jsDOM操作，不过建议以后用Jquery 比较方便  有什么不懂得可以问我

asp 购物车

arrCart = Session("myCart")

CartIndex = Session("cartIndex")

count=0

for i=0 to CartIndex

if arrCart(i,2)"" then

if arrCart(i,2)0 then

count=count+1

end if

end if

next

idbook = request.form("idbook")

bookname = request.form("bookname")

purchase = request.form("purchase")

availstock = request.form("availstock")

if purchase "" then

purchase=Cint(purchase)

availstock=availstock

if purchaseavailstock then

htmlcode="你购买的数量超过了库存图书的数量！ a href=""viewitem.asp?idbook="idbook"bookname="bookname"""返回/a"

response.write htmlcode

else

if purchase0 then

call openDB()

sql="select price,discount from books where idbook="idbook" and bookname='"bookname"'"

set rs=conn.execute(sql)

nowprice=rs("price")*(100-rs("discount"))/100

arrCart(CartIndex,0) = idbook

arrCart(CartIndex,1) = bookname

arrCart(CartIndex,2) = purchase

arrCart(CartIndex,3) = nowprice

session("myCart") = arrCart

CartIndex = CartIndex + 1

Session("cartIndex") = CartIndex

call closeDB()

end if

response.redirect "showcart.asp"

end if

else

response.write"你没有选择图书数量！"

end if

%

在global.asa里面有：

SUB Session_OnStart

Session("idcustomer") = ""

Session("adminname") = ""

Session("cartIndex") = Cint(0)

ReDim arrcart(50,3)

Session("myCart") = arrcart

END SUB

SUB Session_OnEnd

set Session("idCustomer") = Nothing

set Session("adminname") = Nothing

set Session("cartIndex") = Nothing

set Session("myCart") = Nothing

END SUB

重点是arrCart，myCart，cartIndex。

各代表什么。添加商品入购物车的来龙去脉。详细的可以再加分。

其中purchase＝要购买的数量

availstock＝可销售的数量

bookname＝书籍名称

解释！！！！！！！！！！！！！！！！！！！

arrCart = Session("myCart") '/// 赋值arrCart 等于 myCart 这个服务器变量

CartIndex = Session("cartIndex") '/// 赋值 CartIndex 等于 CartIndex 这个服务器变量

count=0 '/// 赋值 count = 0

for i=0 to CartIndex '/// 一个循环开始，起点为i=0，终点为i=CartIndex

if arrCart(i,2)"" then '/// 如果arrCart这个二维数组中的第i,2项的值不为空，那么。。。

if arrCart(i,2)0 then '/// 如果 arrCart这个二维数组中的第i,2项的值大于0，那么。。。

count=count+1 '/// 重新赋值count为原count再加上1

end if '/// 结束一个判断

end if '/// 同上

next '/// 结束一个循环

idbook = request.form("idbook") '/// 赋值 idbook 等于 idbook 这个表单值

bookname = request.form("bookname") '/// 类上

purchase = request.form("purchase") '/// 类上

availstock = request.form("availstock") '/// 类上

if purchase "" then '/// 如果purchase不为空，那么。。。

purchase=Cint(purchase) '/// 把purchase强制转换为整型变量

availstock=availstock '/// 变量传递（同名变量，不知这步有什么意义@@!）

if purchaseavailstock then '/// 如果 purchase 大于 availstock 那么。。。

htmlcode="你购买的数量超过了库存图书的数量！ a href=""viewitem.asp?idbook="idbook"bookname="bookname"""返回/a"

'/// 赋值 htmlcode

response.write htmlcode '/// 输出htmlcode这个值到页面上

else '/// 否则（不满足上面 purchaseavailstock的时候）

if purchase0 then '/// 如果 purchase0 那么。。。

call openDB() '/// 调用 openDB 这个过程（貌似是一个打开记录集的过程）

sql="select price,discount from books where idbook="idbook" and bookname='"bookname"'"

'/// 定义一个sql语句

set rs=conn.execute(sql) '/// 调用一个sql（这里是一个查询sql）

nowprice=rs("price")*(100-rs("discount"))/100

arrCart(CartIndex,0) = idbook

arrCart(CartIndex,1) = bookname

arrCart(CartIndex,2) = purchase

arrCart(CartIndex,3) = nowprice

session("myCart") = arrCart

CartIndex = CartIndex + 1

Session("cartIndex") = CartIndex

'/// 上面这几句都是变量传递，没什么好解释的

call closeDB() '/// 调用 closeDB这个过程（应该是关闭记录集的过程吧）

end if '/// 结束一个判断

response.redirect "showcart.asp" '/// 转向到 showcart.asp 这个页面

end if

else 否则（这里比较远，是不满足那个purchase""的时候）

response.write"你没有选择图书数量！" '/// 输出“你没有。。。”到页面

end if

%

【其实你的问题的重点在下面这里】

在global.asa里面有：

SUB Session_OnStart '/// 一个会话开始的时候

Session("idcustomer") = "" '/// 置空该值

Session("adminname") = "" '/// 置空该值

Session("cartIndex") = Cint(0) '/// 赋值服务器变量cartIndex为整型的数字0

ReDim arrcart(50,3) '/// 定义一个二维数组arrcart

Session("myCart") = arrcart '/// 赋值服务器变量myCart等于arrcart这个二维数组

END SUB

SUB Session_OnEnd '/// 一个会话结束的时候（后面都是清空服务器变量的，没什么好解释）

set Session("idCustomer") = Nothing

set Session("adminname") = Nothing

set Session("cartIndex") = Nothing

set Session("myCart") = Nothing

END SUB

arrCart，myCart其实都是用来存贮一个东西：购物车里的货物的信息（用二维数组来存贮）

cartIndex，其实就是你购物车里的货物数量，用来当做上面这个二维数组的游标的

关于购物车html代码和HTML购物车代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。