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


Posted in Javascript onMarch 25, 2015

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

目的

实现在html界面修改购物车的件数,购物车商品价格的小计和总计要修改。

实现思路

1.当点击进入界面,刷新的时候触发body内的onload=""方法,跳转到JS代码。这样做的原因是在数据库内我们只会存储某客户的准备购买的商品件数,而不会存储每类商品价格的小计和购物车内所有物品的商品总价格,初始化的目的就是为将这些数字计算出来后显示在前台界面上。

2.当更改数量输入框中每个商品的数量时,整个购物表商品的价格,商品的小计和总计会根据数量发生变化。

成品样图展示

全部代码(火狐浏览器)

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

<!DOCTYPE HTML>
<html>
 <head>
  <title>cart</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!-- 要把jquery-1.9.1.min.js导进去,不导出不来 -->
  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script language="javascript">
$(function(){
var size=3.0*$('#image1').width();
$("#image1").mouseover(function(event) {
var $target=$(event.target);
if($target.is('img'))
{
$("<img id='tip' src='"+$target.attr("src")+"'>").css({
"height":size,
"width":size,
}).appendTo($("#imgtest"));/*将当前所有匹配元素追加到指定元素内部的末尾位置。*/
}
}).mouseout(function() {
$("#tip").remove();/*移除元素*/
})

})
</script>
  <script type="text/javascript">
function total(id)
{
/*计算单个的价格*/
var quantity=document.getElementById("quantity"+id).value;
var price=document.getElementById("price"+id).value;
var smallTotal=quantity*price;
var smallT=document.getElementById("smallTotal"+id);
smallT.innerHTML=smallTotal;

/*计算总价格*/
var totalPrice=0;
for(var a=1;a<3;a++){
var quantity=document.getElementById("quantity"+a).value;
var price=document.getElementById("price"+a).value;
var smallTotal=quantity*price;
totalPrice=totalPrice+smallTotal;
}
var total=document.getElementById("total");
total.innerHTML=totalPrice;
}
</script>
  <script type="text/javascript">
function initialize()
{
var totalPrice=0;
for(var a=1;a<3;a++){
var quantity=document.getElementById("quantity"+a).value;
var price=document.getElementById("price"+a).value;
var smallTotal=quantity*price;
totalPrice=totalPrice+smallTotal;
/*alert(smallTotal);*/
var smallT=document.getElementById("smallTotal"+a);
smallT.innerHTML=smallTotal;
}
/*取出购物车的所有商品的价格总和*/
var total=document.getElementById("total");
total.innerHTML=totalPrice;
}
</script>
  <style type="text/css">
#imgtest {
 position: absolute;
 top: 100px;
 left: 400px;
 z-index: 1;
}
table {
 left: 100px;
 font-size: 20px;
}
</style>
 </head>
 <body onload="initialize()">
  <div id="imgtest"></div>
  <br />
  <br />
  <table border="1" style="text-align: center;" align="center">
   <thead style="height: 50">
    <td style="WIDTH: 300px">
     商品名称
    </td>
    <td style="WIDTH: 60px">
     图片
    </td>
    <td style="WIDTH: 170px">
     数量
    </td>
    <td style="WIDTH: 170px">
     价格
    </td>
    <td style="WIDTH: 250px">
     小计
    </td>
   </thead>
   <tbody>
    <tr>
     <td class="name">商品1</td>
     <td class="image">
      <img src="1.jpg" width="40px" height="40px" id="image1"/>
     </td>
     <td class="quantity">
      <input id="quantity1" value="1" onblur="total(1);"/>
     </td>
     <td class="price">
      <input type="hidden" id="price1" value="20"/>
      20
     </td>
     <td class="total">
      <span id="smallTotal1"></span> 元
     </td>
    </tr>
    <tr>
     <td class="name">商品2</td>
     <td class="image">
      <img src="1.jpg" width="40px" height="40px" id="image1"/>
     </td>
     <td class="quantity">
      <input id="quantity2" value="2" onblur="total(2);"/>
     </td>
     <td class="price">
      <input type="hidden" id="price2" value="30"/>
      30
     </td>
     <td class="total">
      <span id="smallTotal2"></span> 元
     </td>
    </tr>
    <tr>
     <td colspan="4" class="cart_total">
      <br>
     </td>
     <td>
      <span class="red">总计:</span><span id="total"></span>  元
     </td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
npm的lock机制解析
Jun 20 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 #Javascript
JS实现简易图片轮播效果的方法
Mar 25 #Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 #Javascript
JavaScript动态添加列的方法
Mar 25 #Javascript
javascript实现复选框选中属性
Mar 25 #Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 #Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 #Javascript
You might like
十大“创意”战术!
2020/03/04 星际争霸
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python随机数random模块使用指南
2016/09/09 Python
用Django写天气预报查询网站
2018/10/21 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
高中美术教学反思
2014/01/19 职场文书
实习鉴定评语
2014/01/19 职场文书
教学器材管理制度
2014/01/26 职场文书
个人借款担保书
2014/04/02 职场文书
安全环保标语
2014/06/09 职场文书
市场营销策划方案
2014/06/11 职场文书
好的促销活动方案
2014/08/21 职场文书
给老婆的道歉信
2015/01/20 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
校运会班级霸气口号
2015/12/24 职场文书