基于JavaScript实现购物车功能


Posted in Javascript onFebruary 07, 2017

本文实例为大家分享了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" >×</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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
js实现类bootstrap模态框动画
Feb 07 #Javascript
canvas实现探照灯效果
Feb 07 #Javascript
javascript数据类型详解
Feb 07 #Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 #Javascript
vuejs指令详解
Feb 07 #Javascript
fullCalendar中文API官方文档
Feb 07 #Javascript
JS常用倒计时代码实例总结
Feb 07 #Javascript
You might like
mysql5写入和读出乱码解决
2006/11/25 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python中求对数方法总结
2020/03/10 Python
python实现最短路径的实例方法
2020/07/19 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
风险评估实施方案
2014/03/09 职场文书
员工工作表现评语
2014/04/26 职场文书
如何写好闭幕词
2019/04/02 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS