`
mxx_1111
  • 浏览: 60645 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

当当网上书店购物车——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>");

    });
});

分享到:
评论

相关推荐

    当当购物车页面_当当购物车页面_html网页购物车_js当当购物车_

    在构建一个像“当当购物车页面”这样的电商网站功能时,HTML网页购物车和JavaScript起着至关重要的作用。下面将详细阐述这两个技术在实现购物车功能中的应用及其相关知识点。 1. HTML(超文本标记语言):HTML是...

    当当网上书店案例代码+css+js+images

    当当网上书店案例代码是一个综合性的项目,涵盖了前端开发中的多个关键知识点,主要涉及CSS、JavaScript和图片处理。下面将详细解析这些知识点。 首先,**购物车案例** 是电商网站的核心功能之一,它涉及到数据存储...

    JQuery特效项目案例:当当网上书店.rar

    当当网上书店作为一个典型的电子商务平台,其用户体验与交互设计至关重要,而这背后离不开JQuery这一强大的JavaScript库的支持。本项目案例旨在展示如何运用JQuery实现一系列丰富的特效,为用户提供更加流畅、便捷的...

    当当网——客户端——服务端

    标题 "当当网——客户端——服务端" 暗示了我们要探讨的是关于当当网的客户端和服务端架构以及它们之间的交互。当当网是中国知名的在线图书、电子商品零售平台,其客户端通常指的是用户使用的应用程序,如手机APP或...

    完整版:当当网上书店

    【当当网上书店】作为全球知名的综合性网上购物平台,它为消费者提供了丰富的商品选择和便捷的购物体验。这个“完整版”可能指的是当当网的全方位服务和全面的商品分类,涵盖了从图书到电子书,从童书到服装,再到...

    java简单当当网书店系统

    "当当网"是指该系统在功能设计上参考了知名的在线书店——当当网,力求提供类似的购书体验。"书店"表明系统专注于图书销售服务,可能包括书籍搜索、分类浏览、价格显示等功能。"系统"则涵盖了整个应用的架构和组成...

    当当网上书店

    标题中的“当当网上书店”指的是中国知名的在线图书销售平台,它为用户提供广泛的图书资源、电子书、音像制品以及各类商品的购买服务。在这个数字化的时代,当当网以其便捷的购书体验和丰富的图书种类成为了许多读者...

    用SSH1+2仿照当当网的购物车做的一个简易购物车

    4. **持久化**:为了防止会话过期导致购物车数据丢失,系统需要将购物车内容存储到数据库中,以便用户下次登录时恢复。 【SSH框架在购物车系统中的应用】 1. **Spring**:在购物车系统中,Spring负责管理对象的...

    作业:完善当当购物车页面.zip_js_mud6y7_site:www.pudn.com_完善当当网页_完善当当购物

    新的文化文化部vwasxwerhrd撒擦SaaS

    网上书店系统,购物车完善,界面优美

    购物车功能是网上书店系统的关键部分。它需要实现用户可以将想要购买的书籍添加到购物车,同时支持修改购物车中的书籍数量、删除单个书籍,以及清空整个购物车。此外,购物车还需要能持久化存储,即使用户关闭浏览器...

    一个简单的当当网购物车页面,可以实现简单购物

    【标题】:“一个简单的当当网购物车页面”是指一种基于网页技术实现的模拟当当网购物车功能的示例项目。这个项目旨在帮助初学者理解购物车逻辑以及相关前端和后端技术的运用。 【描述】:这个简单购物车页面能够...

    仿当当网的购物车全部代码

    在构建一个类似当当网的在线购物车系统时,我们需要考虑多个关键的技术点。这个"仿当当网的购物车全部代码"项目可能涵盖了以下几个重要的IT知识点: 1. **前端技术**:通常,购物车功能的用户界面由前端技术实现,...

    一个仿当当网的JSP网上书店源码.rar

    该资源是一个基于JSP技术构建的仿当当网网上书店的源码,旨在提供一个学习平台,让开发者能够深入理解并实践Web应用开发中的关键功能模块。以下将详细阐述其中涉及的技术点和功能实现。 首先,JSP(JavaServer ...

    购物车源码

    购物车源码是一种常见的网页应用,它用于模拟在线购物过程中的商品添加、删除以及数量调整等操作。在本实例中,我们看到的是一款基于HTML和JavaScript实现的简单购物车源码。HTML是超文本标记语言,负责构建网页的...

    JSP网上书店(完美仿当当网)

    jsp+JavaScript+struts+hibernate+css+mysql的网上书店(源码完整直接运行,高仿真数据库记录,身临其境网上购书吧!) 和国内最好的网上书店-------当当网的框架相同,包括顾客的购物车、订单管理和留言板,支持...

    期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页

    该项目为一次典型的期末前端web大作业,旨在通过构建一个在线书店的界面,使学生能够实践并掌握HTML、CSS以及JavaScript的基本用法。本项目的主题是“基于HTML的当当图书网项目”,通过一系列的设计与实现过程,学生...

    网上书城当当网书店_Java实现网上书城项目_

    【标题】"网上书城当当网书店"项目是基于Java技术实现的一个电子商务平台,它模拟了真实的在线购书流程,旨在提供一个完整的网上购物体验。这个项目涵盖了从用户注册、登录、浏览书籍、搜索书籍、加入购物车、结算到...

    类似当当网(网上书店)的需求分析

    ### 类似当当网(网上书店)的需求分析 #### 一、系统需求 随着互联网技术的不断进步,电子商务已经成为一种主流的商业模式。当当网作为一家知名的网上书店,结合了图书销售与电子商务的优势,提供了便捷的购书...

Global site tag (gtag.js) - Google Analytics