html相关的源码:

  1. <div class="goods_num clearfix">
  2. <div class="num_name fl">数 量:</div>
  3. <div class="num_add fl">
  4. <input type="text" name="num" class="num_show fl" value="1">
  5. <a href="javascript:;" class="add fr">+</a>
  6. <a href="javascript:;" class="minus fr">-</a>
  7. </div>
  8. </div>
  9. <div class="total">总价:<em id="price">{{ good.price }}</em></div>

相应的js部分:

  1. <script>
  2. $(function () {
  3. //加号
  4. var price1 = parseFloat($('#price').text());
  5. var num = parseInt($('input[name="num"]').attr('value'));
  6. $('.add').click(function(){
  7. num++;
  8. $('input[name="num"]').attr('value',num);
  9. var total = num * price1;
  10. $('#price').html(total.toFixed(2));
  11. });
  12. //减号
  13. $('.minus').click(function () {
  14. if(num>1){
  15. num--;
  16. $('input[name="num"]').attr('value',num);
  17. console.log(num)
  18. var total = num * price1;
  19. $('#price').text(total.toFixed(2));
  20. }
  21.  
  22. });
  23. });
  24. </script>

js 购物车的数量加减,对应的总价也随机变化的更多相关文章

  1. js实现输入框数量加减【转】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js实现购买数量加减效果

    写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...

  3. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  4. 自己动手丰衣足食之 jQuery 数量加减插件

    引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...

  5. Jquery实现购物车物品数量的加减特效

    今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...

  6. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  7. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  8. vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  9. 用js进行日期的加减

    如题,开始查了查js的使用文档,但没发现可以直接用的函数,于是就想自己写函数来着,这就要涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,虽然不复杂但我想js应该不会这么低级,于是查了下 ...

随机推荐

  1. 关于KiCAD

    关于KiCAD 使用背景 一直以来公司都在用AD作为EDA软件,但是最近公司频繁收到律师函,所以决定找一款开源的软件来代替AD,目前市场上开源的只找到了KiCAD和Easy EDA(中文版立创EDA) ...

  2. 历史上最详细的SpringCloud搭建微服务的过程。(包括注册中心,服务提供者和服务消费者)

    首先搭建注册中心,创建一个springboot的maven工程. 工程创建完成之后,先在资源文件中的application.properties中写配置文件. server.port= spring. ...

  3. date -d 对于时间的控制

    [root@ ~]# date "+%Y"2019[root@ ~]# date "+%Y%m%d"20190826 [root@localhost ~]# d ...

  4. Ubuntu下终端命令安装sublime

    Ubuntu下终端命令安装sublime出现软件包无法定位 sublime-text-install 且多次换源不成功 建议采用离线安装 安装教程如下 用Ubuntu上的浏览器下载一个 Sublime ...

  5. Android中的Service的使用详解

    按运行地点分类: 类别 区别 优点 缺点 应用 本地服务(Local) 该服务依附在主进程上, 服务依附在主进程上而不是独立的进程,这样在一定程度上节约了资源,另外Local服务因为是在同一进程因此不 ...

  6. php编译安装增加pdo扩展

    首先查看mysql版本和位置 mysql --version whereis mysql 去php安装目录安装扩展 cd /usr/local/src/php-5.4.25/ext/pdo_mysql ...

  7. Rubber Ducky简介

    USB Rubber Ducky是一款模仿人工键盘输入的设备,外形和U盘一样,模拟键盘输入速度可达到1000个字符每分钟,并且适合任何操作系统,包括安卓等移动OS,它使用的是它特定的脚本语言,用记事本 ...

  8. Linux环境进程间通信----信号与管道

    一.信号: 信号主要用来通知进程异步事件的发生.可以使用“kill -l ”命令来显示系统中的信号.进程可以忽略大部分信号,但是有两个是不能忽略的: (1)SIGSTOP:这个信号将中断进程的执行. ...

  9. 1242 斐波那契数列的第N项

    1242 斐波那契数列的第N项  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题   斐波那契数列的定义如下:   F(0) = 0 F(1) = 1 F(n) = F( ...

  10. Java的poi技术遍历Excel时进行空Cell,空row,判断

    /** * 导入信息 */ @Override public List<Object> add(HttpServletRequest request) { // TODO Auto-gen ...