当当网上书店购物车——JS源码
2021/6/1 22:22:22
本文主要是介绍当当网上书店购物车——JS源码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
$(function($){ //根据您挑选的商品,当当为您推荐部分的显示和隐藏 $("#shopping_commend_arrow").click(function(){ if($("#shopping_commend_sort").css("display")=="none"){ $(this).attr("src","images/shopping_arrow_up.gif"); }else{ $(this).attr("src","images/shopping_arrow_down.gif"); } $("#shopping_commend_sort").toggle(); }); //商品隔行变色 $("#myTableProduct").find("tr:odd").css("backgroundColor","#ffebcd"); //商品变色 $("#myTableProduct").find("tr").mouseover(function(){ $(this).css("backgroundColor","#fff"); }).mouseout(function(){ if($("#myTableProduct").find("tr").index($(this))%2==1) {//判断是否奇数行 $(this).css("backgroundColor","#ffebcd"); }else{ $(this).css("backgroundColor","#fefbf2"); } }); //计算总价 function totalPrice(){ var percents= 0,prePrices= 0,prices=0;//积分,原价,现价 $("#myTableProduct").find("tr").each(function(i,ele){ var num=$(ele).find(".shopping_product_list_5").find("input").val();//数量 percents+=parseInt($(ele).find(".shopping_product_list_2").text())*num; //解决下js中浮点数的bug问题,因此建议浮点数的运算不要放在前台,这里是指粗略的解决了一下 var price=parseInt($(ele).find(".shopping_product_list_4").find("label").text().replace(".",""))*num; prices+=price; var prePrice=parseInt($(ele).find(".shopping_product_list_3").find("label").text().replace(".",""))*num; prePrices+=prePrice; }); $("#product_integral").text(percents); $("#product_total").text(prices/100); $("#product_save").text((prePrices-prices)/100); return prices/100; } totalPrice(); //删除商品 $("#myTableProduct").find(".shopping_product_list_6").children("a").click(function(){ if(confirm("您确定要删除商品么?")){ $(this).parent().parent().remove(); totalPrice(); } }); //修改数量 $("#myTableProduct").find(".shopping_product_list_5").children("input").change(function(){ var value=$(this).val(); if((value == "")||!(/^[0-9]*[1-9][0-9]*$/.test(value))){ alert("数量不能为空,且只能为正整数"); $(this).val(1); } var t =totalPrice(); alert("修改成功!,您的商品总金额是"+t+"元"); }); //清空购物车 $("#removeAllProduct").click(function(){ //注意清除的先后顺序 $("#myTableProduct").next().remove(); $("#myTableProduct").remove(); $(".shopping_list_border").append("<div class='empty_product'><div>您还没有挑选商品,<a href='index.html'>去挑选看看>></a></div></div>"); }); });
这篇关于当当网上书店购物车——JS源码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Vue CLI多环境配置学习:从入门到实践
- 2024-11-24Vue CLI多环境配置学习:新手入门教程
- 2024-11-24Vue CLI学习:初学者指南
- 2024-11-24Vue CLI学习:从入门到上手的简单教程
- 2024-11-24Vue3+Vite学习:从零开始的前端开发之旅
- 2024-11-24Vue3阿里系UI组件学习入门教程
- 2024-11-24Vue3的阿里系UI组件学习入门指南
- 2024-11-24Vue3公共组件学习:新手入门教程
- 2024-11-24Vue3公共组件学习入门指南
- 2024-11-24vue3核心功能响应式变量学习