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

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jQuery实现购物车物品数量的加减</title>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

 <script>

 $(function(){

     var t = $("#text_box");

     $("#add").click(function(){

         t.val(parseInt(t.val())+1)

         setTotal();

     })

     $("#min").click(function(){

         t.val(parseInt(t.val())-1)

         setTotal();

     })

     function setTotal(){

         $("#total").html((parseInt(t.val())*3.95).toFixed(2));

     }

     setTotal();

 })

 </script>

 </head>

 <body>

 <p>单价：3.95</p>

 <input id="min" name="" type="button" value="-" />

 <input id="text_box" name="" type="text" value="4" />

 <input id="add" name="" type="button" value="+" />

 <p>总价：<label id="total"></label></p>

 </body>

 </html>

jQuery实现购物车物品数量的加减的更多相关文章

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

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

  2. jQuery实现购物车多物品数量的加减+总价计算

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

  3. jQuery实现购物车多物品数量的加减+总价+删除计算

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. JQuery购物车多物品数量的加减+总价计算

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

  5. Jquery实现表单动态加减、ajax表单提交

    一直在搞Java后台开发,记得刚工作那一两年时间搞过前后端交互开发,用的东西也是五花八门,当时觉得做页面展示给别人看,是很有成就的事情,不过现在感觉自己跟纯前端开发比起来弱爆了,不过如果你的目标是作为 ...

  6. js 购物车的数量加减，对应的总价也随机变化

    html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...

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

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

  8. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

  9. Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

随机推荐

  1. Linux 相关术语_002

    Linux(Linux is not unix)是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. 它能运行主要的UNIX工 ...

  2. PXE（preboot execution environment）：【网络】预启动执行环节：引导 live光盘 ubuntu livecd 18.04+：成功

    比较艰难的成功了. 艰难在于:吱吱吱吱(知知知知知):就是歌init启动参数而已! 最最艰难在于:这个nfs服务器软件有很大的关系.很多时候不是你不行,而是条件不具备 or 条件看似具备但其实有问题 ...

  3. 使用 Sublime Text 将含下划线的字符串批量替换为驼峰命名法格式的字符串

    本文版权归cxun所有,如有转载请注明出处与本文链接,谢谢!原文地址:http://www.cnblogs.com/cxun/p/7762984.html For indexing: Convert ...

  4. 【Static Program Analysis - Chapter 3】Type Analysis

    类型分析,个人理解就是(通过静态分析技术)分析出代码中,哪些地方只能是某种或某几种数据类型,这是一种约束.   例如,给定一个程序: 其中,我们可以很直接地得到一些约束: 最后,经过简化可以得到: 对 ...

  5. 【Zookeeper系列】Zookeeper命令操作（转）

    原文链接:https://www.cnblogs.com/sunddenly/p/4031881.html 一.Zookeeper的四字命令 Zookeeper支持某些特定的四字命令字母与其的交互.他 ...

  6. HTTPS 通讯流程

    原文地址 https://blog.csdn.net/wangweilica6/article/details/50171457 一.简介 前一篇文章,我总结了下,如何部署https服务,开通ssl通 ...

  7. 队列Queue、栈LifoQueue、优先级队列PriorityQueue

    队列:队列是先进先出. import queue q = queue.Queue() q.put(1) q.put(2) q.put(3) q.put(4) print(q.get()) print( ...

  8. 已知两点的经度和纬度，计算两点间的距离(php，javascript)

    php代码:转载 http://www.cnblogs.com/caichenghui/p/5977431.html /** * 求两个已知经纬度之间的距离,单位为米 * * @param lng1 ...

  9. centos7邮件服务器SSL配置

    在上篇文章centos7搭建postfix邮件服务器的搭建中我们没有配置SSL,接下来我们在这篇文章中讲讲centos7邮件服务器SSL配置. 1. 创建SSL证书 [root@www ~]# cd ...

  10. js运用4

    ---恢复内容开始--- 1.函数    关键字function 复习 var  是js的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. var可以在内存模块提前(js代码执行 ...