基于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 在firebug调试时用console.log的方法
May 10 Javascript
javascript解析json数据的3种方式
May 08 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
详谈javascript异步编程
Feb 21 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
JavaScript 异步调用
Oct 25 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
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
PHP 魔术函数使用说明
2010/05/14 PHP
php中常用的预定义变量小结
2012/05/09 PHP
Js中sort()方法的用法
2006/11/04 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
python xlsxwriter模块的使用
2020/12/24 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
.net开发工程师面试题
2014/02/25 面试题
Ruby如何创建一个线程
2013/03/10 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
高中校园广播稿
2014/01/11 职场文书
学校安全工作制度
2014/01/19 职场文书
列车长先进事迹材料
2014/01/25 职场文书
联欢晚会主持词
2014/03/25 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
2019各种保证书范文
2019/06/24 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis