jQuery实现购物车计算价格功能的方法

本文实例讲述了jQuery实现购物车计算价格功能的简易方法,做的比较简单,现分享给大家供大家参考。具体如下:

目的:

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>jQuery实现的购物车功能</title>
 8 <!-- 使用绝对路径引入 jQuery库文件 -->
 9 <script type="text/javascript"
10     src="${pageContext.request.contextPath }/js/jquery-1.11.2.js"></script>
11 <script type="text/javascript">
12     $(function() {
13         //根据类选择器,当点击 添加商品按钮的时候触发,为加号按钮注册click事件处理函数
14         $(".add").click(function() {
15             var t = $(this).parent().find(‘input[class*=text_box]‘);
16             //每点击添加 按钮1次,商品数量加1
17             t.val(parseInt(t.val()) + 1);
18             //再调用计算商品总价方法
19             setTotal();
20         });
21
22         //根据类选择器,当点击 减号 按钮的时候触发
23         $(".min").click(function() {
24             var t = $(this).parent().find(‘input[class*=text_box]‘);
25             //每点击减少按钮1次,商品数量减1
26             t.val(parseInt(t.val()) - 1);
27             //当文本框的值为减少到小于等于1时候,取值1
28             if (parseInt(t.val()) < 0) {
29                 t.val(0);
30             }
31             //再调用计算商品总价方法
32             setTotal();
33         });
34
35         //计算总价格的函数
36         function setTotal() {
37             var s = 0;
38             //each 遍历
39             $("#tab td").each(
40                     function() {
41                     //find()方法 遍历input标签中的后代, class名为 text_box中 文本框 中的值,即:商品的数量,乘以商品的价格
42                         s += parseInt($(this).find(‘input[class*=text_box]‘).val())*
43                                 parseFloat($(this).find(‘span[class*=price]‘).text());
44                     });
45             //将计算的结果通过 jQuery的 html()方法赋予给 总价,并通过 toFixed()进行取舍
46             $("#total").html(s.toFixed(2));
47         }
48         //再调用计算商品总价方法
49         setTotal();
50     });
51 </script>
52 </head>
53 <body>
54     <table id="tab">
55         <tr>
56             <td><span>商品单价:</span><span class="price">2.50(元)</span> <input
57                 class="min" name="" type="button" value="-" /> <input
58                 class="text_box" name="" type="text" value="1" /> <input
59                 class="add" name="" type="button" value="+" /></td>
60         </tr>
61         <tr>
62             <td><span>商品单价:</span><span class="price">7.50(元)</span> <input
63                 class="min" name="" type="button" value="-" /> <input
64                 class="text_box" name="" type="text" value="1" /> <input
65                 class="add" name="" type="button" value="+" /></td>
66         </tr>
67     </table>
68     <p>
69         总价:<label id="total"></label>(元)
70     </p>
71 </body>
72 </html>

项目源码

实现在jsp界面修改购物车商品的件数,点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格。

实现思路:

文件中的代码实现了简单的购物车根据数量,计算总价的功能,源码可以直接导入运行,下面详细介绍一下它的实现过程。

1、引入jQuery的库文件

<!-- 使用绝对路径引入 jQuery库文件 -->

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.2.js"></script>

2、编写一个 table,搭建主体内容

3、编写jQuery代码

①、$(function(){}),当文档结构完全加载完毕再去执行函数中的代码;
②、$(".add").click(function(){}),为加号按钮注册click事件处理函数;

③、点击加号按钮的时候执行的代码

④、var t=$(this).parent().find(‘input[class*=text_box]‘),获取文本框,这个文本中显示的是要购买商品的数目;
⑤、t.val(parseInt(t.val())+1),点击一次商品数量加1;
⑥、setTotal(),执行此函数可以计算出总的价格并且显示;
⑦、$(".min").click(function(){}),为减号按钮注册click事件处理函数;

⑧、计算总价格的函数

⑨、var s=0,声明一个变量,此变量用来存储总价格。
⑩、$("#tab td").each(function(){ 
  s+=parseInt($(this).find(‘input[class*=text_box]‘).val())*parseFloat($(this).find(‘span[class*=price]‘).text()); 
}); 
可以遍历文本框并乘以单价,然后进行累加,最后计算出来的总价格。

4、运行效果展示:

以上是一个jQuery实现购物车计算价格功能的方法,写的比较简单,可以作为jQuery初学者的入门学习素材,以强化jQuery基本语法的学习。

原文地址:https://www.cnblogs.com/2018-fyj/p/8646257.html

时间: 2024-10-29 05:45:54

jQuery实现购物车计算价格功能的方法的相关文章

String转换成float并且保留两位小数,购物车计算价格

方法1: 用DecimalFormat 返回的是String格式的.该类对十进制进行全面的封装.像%号,千分位,小数精度.科学计算. float perPrice=Float.parseFloat(textView_price_shopCar.getText().toString()) * count;//String类型转换成float类型 DecimalFormat decimalFormat=new DecimalFormat(".00");//构造方法的字符格式这里如果小数不足

js购物车计算价格

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>购物车</title> <script src="js/jquery-1.8.3.min.js">

Android中购物车的全选、反选、问题和计算价格

此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //-----------一下为main的布局----------------------- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http

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

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="textml; charset=utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <meta name="viewpo

jquery实现购物车数量加减,价格计算功能

HTML代码: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <meta http-equiv="X-UA-Co

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

<?php session_start(); ?> <!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"> <meta http-e

用JQuery仿造QQ头像裁剪功能

原文:用JQuery仿造QQ头像裁剪功能 最近工作真心忙碌,几乎没时间写博客.今天趁周末来仿一个QQ头像裁剪功能插件.效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了9个HTML文件,每个步骤文件里的注释都写的很清楚,故在本博客内不赘述. 原理: 主要是通过css的clip来裁剪图片可视区域,拖动剪裁窗口这里使用了JQ-UI的draggable插件(但是缩放没有,贪方便可以使用Resizable插件,但都用插件的话就没有研究的意义了). 缩放功能原理其实很简单,不

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

基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的.本款效果除了加减功能外,还可以自动计算价格. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c