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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
AngularJS手动表单验证
Feb 01 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
Laravel 5框架学习之环境与配置
2015/04/08 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
视光学毕业生自荐书范文
2014/02/13 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
大学生创业项目方案
2014/03/08 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
优秀员工演讲稿
2019/06/21 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
详解Vue的sync修饰符
2021/05/15 Vue.js
Java使用HttpClient实现文件下载
2022/08/14 Java/Android