基于JavaScript实现购物车功能

本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="shop">
  <button id="btAdd">我的购物车</button><br><br>

  <table id="cart">
    <thead>
    <tr>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
    <tfoot>
    <tr>
      <td colspan="4">购物车总金额：<span id="total">0.00</span></td>
    </tr>
    </tfoot>
  </table>
</div>
<div id="footer"></div>
<script>
  $('#read .page li a').click(function(){
    var n=$(this).html();

    $(this).parent().parent().next().children('p:nth-child('+n+')').slideDown(2000);
    $(this).parent().parent().next().children('p:nth-child('+n+')').siblings().css('display','none');
  })

  $('#btAdd').click(function(){
    var p = randPrice();
    var c = randCount();
    $('#cart tbody').append('<tr>'+
      '<td>'+p+'</td>'+
      '<td><input type="text" value="'+c+'"></td>'+
      '<td>'+parseFloat((p*c).toFixed(2))+'</td>'+
      '<td><a href="#" rel="external nofollow" >&times;</a></td>'+
      '</tr>');
    $('#total').html( getTotal() );
  });

  //为“删除”按钮(即X号)绑定事件监听函数，注意：X是后添加的，很多X执行的行为是一样的——使用事件代理
  $('#cart tbody').delegate('td > a', 'click',function(event){
    event.preventDefault();
    var a = event.target;
    $(a).parent().parent().remove();

  });
  //为“购买数量”输入框做事件绑定——使用事件代理
  $('#cart tbody').delegate('td > input','change', function(event){

    var input = event.target;
    var count = input.value;
    var price = $(input).parent().prev().html();
    $(input).parent().next().html( price*count );
    $('#total').html( getTotal() );
  })
  //计算购物车的总金额
  function getTotal(){
    var sum = 0;
    $('#cart tbody tr td:nth-child(3)').each(function(i, td){
      sum += parseInt(td.innerHTML);
    })
    return sum;
  }


  function randPrice(){
    var p = Math.random()*100;
    p = p.toFixed(2);
    p = parseFloat(p);
    return p;
  }
  function randCount() {
    var c = Math.floor(Math.random() * 10 + 1);
    return c;

  }
  $('#header').load('php/header.php');
  $('#footer').load('php/footer.php');
  var theme=localStorage.getItem('ChoseTheme');
  applyTheme(theme)

</script>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js # 购物车 # js购物车实现思路及代码(个人感觉不错) # Javascript操纵Cookie实现购物车程序 # 简单的前端js+ajax 购物车框架(入门篇) # js实现简单的购物车有图有代码 # 原生js模拟淘宝购物车项目实战 # js+cookies实现悬浮购物车的方法 # JavaScript编写一个简易购物车功能 # 利用Angularjs和bootstrap实现购物车功能 # 基于Vuejs实现购物车功能 # 小计 # 绑定 # 总金额 # 大家分享 # 具体内容 # 大家多多 # 输入框 # 是一样的 # btAdd # br # thead # cart # table # div # body # button # shop # id # total

返回目录在线咨询

上一篇：建德网站建设,建德灵栖洞票价多少？灵栖洞好玩吗？
下一篇：从零开始：2025年新手指南到建立自己的开源网站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

基于JavaScript实现购物车功能

您的项目需求