美文网首页
day10 京东购物车

day10 京东购物车

作者: Gary134 | 来源:发表于2018-12-15 15:43 被阅读0次

index：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>京东购物车商城</title>
        <link rel="icon" type="img/ico" href="img/jd_logo.ico"/>
        <link rel="stylesheet" type="text/css" href="css/购物车.css"/>
        <link rel="stylesheet" type="text/css" href="css/商品列表.css"/>
        
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/top.js"></script>
        <script type="text/javascript" src="js/goods.js"></script>
    </head>
    <body>
        <!--===========顶部===============-->
        <div id="top">
            <ul class="left_nav">
                <li class="img_box"><img src="img/yt_home.png"/><a href="">京东首页</a></li>
                <li class="seleted_li">
                    <div class="menu_top">
                        <img src="img/yt_address.png"/>
                        <font>北京</font>
                    </div>
                    <div class="menu_bottom">
                    </div>                  
                </li>
            </ul>
            <ul class="right_nav">
                <li>京东首页</li><span>|</span>
                <li>免费注册</li><span>|</span>
                <li>我的订单</li><span>|</span>
                <li>我的京东</li><span>|</span>
                <li>京东会员</li><span>|</span>
                <li>企业采购</li><span>|</span>
                <li>客户服务</li><span>|</span>
                <li>网站导航</li><span>|</span>
                <li>手机京东</li>
            </ul>
        </div>
        <!--============中部==============-->
        <div id="middle">
            <table id="goods" cellspacing="0">
                <tr class="header">
                    <td class="td1"><input type="checkbox" />全选</td>
                    <td class="td2">商品</td>
                    <td class="td3">单价</td>
                    <td class="td3">数量</td>
                    <td class="td3">小计</td>
                    <td class="td3">操作</td>
                </tr>
            </table>
            
            <div id="balance">
                    
            </div>
        </div>
        
        <!--=============底部==============-->
        <div id="bottom"></div>
        
    </body>
</html>

购物车.css


/*========通用================*/
*{
    margin: 0;
    padding: 0;
    /*position: relative;*/
}

/*========顶部==============*/
#top{
    height: 35px;
    position: relative;
    background-color: #e5e5e5;
    /*内容居中*/
    line-height: 35px;
    
}
/*==导航条===*/
#top .left_nav, #top .right_nav{
    /*去掉列表前的符号*/
    list-style: none;
}
#top li{
    /*同时设置左右margin值是20px*/
    margin: 0 10px;    
    font-size: 10px;
    color: #a0a0a0;
    font-weight: 100;
}
.left_nav img{
    /*图片在内容垂直方向居中*/
    height: 20px;
    vertical-align: middle;
}

#top a, #top font{
    /*垂直方向居中*/
    vertical-align: middle;
    color: #a0a0a0;
    font-weight: 100;
    text-decoration: none;
    
}
/*====导航条效果====*/
#top .seleted_li{
    width: 80px;
    height: 35px;
    padding-left: 10px;
    margin: 0;
    position: relative;
    
}
#top .seleted_li .menu_top{
    position: absolute;
    height: 35px;
    width: 80px;
    padding-left: 5px;
}
#top .seleted_li .menu_bottom{
    position: absolute;
    background-color: white;
    height: 220px;
    width: 350px;
    top: 35px;
    border-left: 1px solid #cccc;
    border-right: 1px solid #cccc;
    border-bottom: 1px solid #cccc;
    display: none;
}

.seleted_li:hover .menu_top{
    background-color: white;
    border-left: 1px solid #cccc;
    border-right: 1px solid #cccc;
}

#top .seleted_li:hover .menu_bottom{
    /*background-color: white;*/
    display: block;
}
/*城市标签样式*/
.city{
    margin: 0 10px;
    float: left;
    width: 50px;
    height: 30px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
}
#top .city:hover{
    color: red;
    background-color: whitesmoke;
}

/*鼠标悬停在a上*/
#top a:hover{
    color: red;
    /*border-left: 1px solid #cccc;
    border-right: 1px solid #cccc;*/
}


/*竖线*/
#top span{
    float: left;
    font-size: 8px;
    font-weight: 100;
    color: #cccc;
}

/*===左边导航条====*/
#top .left_nav{
    position: absolute;
    left: 150px;
}
#top .left_nav li{
    float: left;
}


/*===右边导航条====*/
#top .right_nav{
    position: absolute;
    right: 150px;
}
#top .right_nav li{
    float: left;
}

/*=========中部==============*/
#middle{
    height: 500px;
    /*background-color: hotpink;*/
    
}


/*==========底部=============*/
#bottom{
    height: 700px;
    background-color: dodgerblue;
}

商品列表.css

#goods{
    width: 70%;
    margin: 0 auto;
    /*background-color: salmon;*/
    margin-top: 50px;
}
#goods .header{
    background-color: #E5E5E5;
    height: 40px;
}
#goods .td1{
    width: 50px;
}
#goods .td2{
    width: 250px;
}
#goods .td3{
    width: 100px;
}
#goods td{
    padding-left: 10px;
}
/*商品行*/
#goods .after{
    height: 110px;
    
    
}
#goods .td_goods img{
    width: 70px;
    height: 100px;
    vertical-align: middle;
    float: left;
}
#goods .td_goods p{
    font-size: 12px;
    vertical-align: middle;
}
/*数量*/
#goods .num button{
    float: left;
    width: 20px;
    height: 24px;
    border: none;
    
}
#goods .num input{
    float: left;
    width: 25px;
    height: 20px;
    text-align: center;
    margin: 0 5px;
}
/*线行*/
#goods .line{
    height: 1px;
    background-color: black;
}

#balance{
    width: 70%;
    margin: 0 auto;
    height: 100px;
    /*background-color: skyblue;*/
    
}

goods.js

$(function(){
    
    //1.请求商品数据
    $.get('http://rap2api.taobao.org/app/mock/121189/goods',function(result){
        var goodArray = result['goods'];
        for (var x in goodArray) {
            var goods = goodArray[x];
            //创建标签
            var trNode = $('<tr class="after"></tr>');
            //按钮
            trNode.append($('<td><input type="checkbox" /></td>'));
            //商品
            trNode.append($("<td class='td_goods'><img src='"+goods["img"]+"'/><p>"+goods['desc']+"</p></td>"));
            //单价
            trNode.append($('<td>'+'￥'+goods['price']+'</td>'));
            //数量
            trNode.append($('<td class="num"><button class="sub_btn">-</button><input type="text" value="'+goods['num']+'"/><button class="add_btn">+</button></td>'));
            //总计
            var total = Number(goods['price'])*Number(goods['num']);
            trNode.append($('<td>'+'￥'+total+'</td>'));
            //操作
            trNode.append($('<td>删除</td>'))
            
            $('#goods').append(trNode);
            $('#goods').append($('<tr class="line"><td colspan="6"></td></tr>'))    
        }
    
        //2.绑定事件
        $('#goods .num').on('click', '.sub_btn', function(){
            //数量
            var inputNode = $(this).next()
            //总计
            var totalNode = $(this).parent().next();
            //原数量
            var oldNum = parseInt(inputNode.val());
            //单价
            var priceStr = $(this).parent().prev().text();
            var price = Number(priceStr.slice(1, priceStr.length));
            //数量
            oldNum--;
            oldNum = oldNum<=0?1:oldNum;
            //总计
            inputNode.val(oldNum);
            totalNode.text('￥'+price*oldNum);
            
        });
        $('#goods .num').on('click', '.add_btn', function(){
            //数量
            var inputNode = $(this).prev()
            //总计
            var totalNode = $(this).parent().next();
            //原数量
            var oldNum = parseInt(inputNode.val());
            //单价
            var priceStr = $(this).parent().prev().text();
            var price = Number(priceStr.slice(1, priceStr.length));
            //数量
            oldNum++;
            oldNum = oldNum<=0?1:oldNum;
            //总计
            inputNode.val(oldNum);
            totalNode.text('￥'+price*oldNum);
        });
    })
});

top.js

var cityArray = ['北京','上海','天津','重庆','河北','山西','河南','辽宁',
'吉林','黑龙江','内蒙古','江苏','山东','安徽','浙江','福建',
'湖北','湖南','广东','广西','江西','四川','海南','贵州','云南',
'西藏','陕西','甘肃','青海','宁夏','新疆','港澳','台湾','钓鱼岛','海外'];
$(function(){
    //城市对应的大盒子
    var cityBoxNode = $('.menu_bottom');
    //遍历所有城市
    for (var x in cityArray) {
        var cityName = cityArray[x];
        //创建城市对应节点
        var cityNode = $('<font class="city"></font>');
        //设置内容
        cityNode.text(cityName);
        //添加
        cityBoxNode.append(cityNode);
    }
    //保存当前选中的城市
    var currentCityNode = $('.menu_bottom font:first');
    currentCityNode.css({'background-color': 'red','color':'white'});
    
    
    //添加事件
    cityBoxNode.on('click', '.city',function(){
        //修改当前城市名字
        var cityName = $(this).text();
        $('.menu_top font').text(cityName);
        
        //修改样式
        currentCityNode.css({'background-color':'rgba(0,0,0,0)','color':'#a0a0a0'})
        currentCityNode = $(this);
        currentCityNode.css({'background-color':'red','color':'white'})
        //让大盒子消失
//      cityBoxNode.css('display', 'none');
        cityBoxNode.fadeOut();
    })
    //鼠标悬停事件
    cityBoxNode.parent().on('mouseover', function(){
        cityBoxNode.css('display', 'block');
    })
    cityBoxNode.parent().on('mouseleave', function(){
        //cityBoxNode.css('display', 'none');
        cityBoxNode.fadeOut();
    })
})

相关文章

网友评论

      本文标题：day10 京东购物车

      本文链接：https://www.haomeiwen.com/subject/fcsahqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|day10 京东购物车|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！