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

时间：2021-05-26

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

目的

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

实现思路

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

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

成品样图展示

全部代码（火狐浏览器）

<!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;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>&nbsp;&nbsp;元 </td> </tr> </tbody> </table> </body></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章