京东登录

HTML文件

    
        
        
        
        
        
        
        
    
    
        
        

            
            

                
京东首页
                
                

                    

                        北京
                    
                    

                        
                    
                
            
            
            

                
你好,请登录
                
免费注册|
                
我的订单|
                
我的京东|
                
京东会员|
                
企业采购|
                
客户服务|
                
网站导航|
                
手机京东
            
        
        
        
        

            

            

                

                    
                    购物车内暂时没有商品，登录后将显示您之前加入的商品
                
            
            

                

                    

                        

                            
                            全选
                        
                        
商品
                        
单价
                        
数量
                        
小计
                        
操作
                    
                
                

                    删除选中商品
                    
                    结算
                    
总共选中了0件商品 总计:￥0.00
                    
                
            
        
        
        
        

    

js文件

1.购物车js

$(function(){
    //=====================添加城市=====================
    var citysNode = $('#citys')
    for(cityName in cities){
        //创建城市节点
        var cityNode = $('
'+cityName+'
')
        //添加
        citysNode.append(cityNode)
    }
    //默认第一个是白色
    $('#citys font:first').css({
        'color':'white',
        'background-color': 'red'
    })
    
    $seletedFontNode = $('#citys font:first')
    //添加点击事件
    $('#citys').on('click', 'div font', function(){
        //更新背景和字体颜色
        $(this).css({
            'color':'white',
            'background-color': 'red'
        })
        $seletedFontNode.css({
            'color':'#999999',
            'background-color': 'rgba(0,0,0,0)'
        })
        $seletedFontNode = $(this)
        //更新选中的城市
        $('#selcted-city font').text(this.innerText)
        //隐藏城市选项
        $('#citys').css('display','none')
    })
    
    $('#li2').on('mouseover', function(){
        $('#citys').css('display','block')
    })
    $('#li2').on('mouseleave', function(){
        $('#citys').css('display','none')
    })
    
    
    //=====================购物车商品=====================
    //1.请求商品数据
    allGoods = [
        {
            big_img:'img/a1.jpg',
            price: 245,
            description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
        },
        {
            big_img:'img/a2.jpg',
            price: 123,
            description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
        },
        {
            big_img:'img/a3.jpg',
            price: 67,
            description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
        }
    ]
    
    
    
    //2.创建商品对应的标签
    for(var i=0; i')
        $td2 = $('
'+goodsObj['description']+'
')
        $td3 = $('￥'+goodsObj['price']+'.00')
        $td4 = $('-+')
        $td5 = $('￥'+goodsObj['price']+'.00')
        $td6 = $('删除')
        $trNode = $('')
        $trNode.append($td1)
        $trNode.append($td2)
        $trNode.append($td3)
        $trNode.append($td4)
        $trNode.append($td5)
        $trNode.append($td6)
        //插入表格
        $('#goods table').append($trNode)
    }
    
    //绑定事件
    $('.td4 #down').on('click', function(){
        var inputNode = $(this).parent().children()[1]
        var num = $(inputNode).val()
        if(num == 1){
            alert('商品至少一个!')
            return
        }
        //数量减1
        num--
        $(inputNode).val(num)
        //重新计算小计
        var $totalNode = $(this).parent().next()   //总计
        var $priceNode = $(this).parent().prev()   //单价
        var total = Number($priceNode.text().slice(1,10000))*num
        $totalNode.text('￥'+ total+'.00')
        
        
    })
    $('.td4 #up').on('click', function(){
        var inputNode = $(this).parent().children()[1]
        var num = $(inputNode).val()
    
        //数量减1
        num++
        $(inputNode).val(num)
        //重新计算小计
        var $totalNode = $(this).parent().next()   //总计
        var $priceNode = $(this).parent().prev()   //单价
        var total = Number($priceNode.text().slice(1,10000))*num
        $totalNode.text('￥'+ total+'.00')
    })  
})

image.png