Day_10-京東購物車

京東購物車網(wǎng)頁內(nèi)容代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的購物車-京東商城</title>
        <!--=============js代碼==============-->
        <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/city.js"></script>
        <script type="text/javascript" src="js/購物車.js"></script>
    </head>
    <body>
        <!--頂部導(dǎo)航條
        ======================================================-->
        <div id="nav">
            <!--左邊-->
            <ul id="nav-left">
                <li id="li1"><img src="img/yt_home.png"/><a href="#">京東首頁</a></li>
                <!--<li id="li2"><img src="img/yt_address.png"/><font>北京</font></li>-->
                <li id="li2">
                    <div id="selcted-city">
                        <img src="img/yt_address.png"/><font>北京</font>
                    </div>
                    <div id="citys">
                        
                    </div>
                </li>
            </ul>
            <!--右邊-->
            <ul id="nav-right">
                <li><a href="#">你好,請登錄</a></li>
                <li><a href="#" class="line" style="color: red;">免費(fèi)注冊</a>|</li>
                <li><a href="#" class="line">我的訂單</a>|</li>
                <li><a href="#" class="line">我的京東</a>|</li>
                <li><a href="#" class="line">京東會員</a>|</li>
                <li><a href="#" class="line">企業(yè)采購</a>|</li>
                <li><font class="line">客戶服務(wù)</font>|</li>
                <li><font class="line">網(wǎng)站導(dǎo)航</font>|</li>
                <li><a href="#">手機(jī)京東</a></li>
            </ul>
        </div>
        
        <!--中間購物車內(nèi)容
        ======================================================-->
        <div id="content">
            <div id="search"></div>
            <div id="no-goods">
                <div id="">
                    <img src="img/yt_car.png"/>
                    <font>購物車內(nèi)暫時(shí)沒有商品，登錄后將顯示您之前加入的商品</font>
                </div>
            </div>
            <div id="goods">
                <table cellspacing="0">
                    <tr height="40px" bgcolor="#cccccc" >
                        <td class="td1">
                            <input type="checkbox" name="check-all" id="check-all" value="" />
                            <label for="check-all">全選</label>
                        </td>
                        <td class="td2">商品</td>
                        <td class="td3">單價(jià)</td>
                        <td class="td4">數(shù)量</td>
                        <td class="td5">小計(jì)</td>
                        <td class="td6">操作</td>
                    </tr>
                </table>
                <div id="account">
                    <a id="del" href="">刪除選中商品</a>
                    
                    <button>結(jié)算</button>
                    <p>總共選中了<a href="">0</a>件商品 總計(jì):<a href="">￥0.00</a></p>
                    
                </div>
            </div>
        </div>
        
        <!--底部
        ======================================================-->
        <div id="bottom"></div>
    </body>
</html>

京東購物車內(nèi)容樣式代碼


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

/*導(dǎo)航條
 ============================================*/
#nav{
    /*設(shè)置頭部導(dǎo)航條的寬度*/
    height: 40px;
    /*設(shè)置導(dǎo)航條的背景顏色*/
    background-color: #dddddd;
    /*讓子標(biāo)簽的內(nèi)容居中*/
    line-height: 40px;
    /*讓子標(biāo)簽相對于父標(biāo)簽定位*/
    position: relative;
    
}

/*導(dǎo)航條上所有的li標(biāo)簽*/
#nav li{
    /*標(biāo)簽浮動靠左*/
    float: left;
    /*讓內(nèi)容垂直方向居中*/
    vertical-align: middle;
    /*讓子標(biāo)簽相對于父標(biāo)簽定位*/
    position: relative;
    /*設(shè)置字體大小*/
    font-size: 13px;
    /*設(shè)置字體顏色*/
    color: #999999;
}

#nav a{
    /*標(biāo)簽內(nèi)容顏色*/
    color: #999999;
    /*去掉前面的黑點(diǎn)*/
    text-decoration: none;
}
#nav a:hover{
    /*鼠標(biāo)懸停的樣式*/
    color: red;
}

#nav ul{
    /*去掉列表前的符號*/
    list-style: none;
}

/*=======導(dǎo)航條左邊=======*/
#nav-left{
    position: absolute;
    left: 30px;
}

#selcted-city{
    height: 40px;
    position: relative;
    float: left;
}
#nav-left img{
    position: absolute;
    width: 25px;
    height: 25px;
    top: 50%;
    margin-top: -12px;
}
#nav-left a{
    margin-left: 25px;
}
#nav-left font{
    margin-left: 25px;
}

#nav-left #li1{
    margin-right: 10px;
}

/*城市標(biāo)簽*/
#citys{
    width: 400px;
    /*height: 200px;*/
    background-color: white;
    display: none;
    margin-top: 40px;
}
#selcted-city{
    padding-right: 20px;
}
#li2:hover #selcted-city{
    background-color: white;
    border: 1px solid #d1d1d1;
    border-bottom: none;
}
#li2:hover #citys{
    display: block;
    border: 1px solid #d1d1d1;
    border-top: none;
    
}

#citys{
    /*清除浮動*/
    overflow: hidden;
    position: absolute;
    left: 0px;
    /*padding-right: 10px;*/
}

#citys div{
    float: left;
    width: 60px;
    padding-left:20px;
    /*background-color: seagreen;*/
    
}
#citys div font{
    margin-left: 0px;
    padding: 3px;
    cursor: pointer;
    /*background-color: khaki;*/
}

#citys div font:hover{
    color: red;
    background-color: #dfdfdf;
}


/*=======導(dǎo)航條右邊========*/
#nav-right{
    position: absolute;
    right: 30px;
}
#nav-right li{
    margin-left: 10px;
}
.line{
    margin-right: 10px;
}




/*內(nèi)容
 ============================================*/
#content{
    /*height: 500px;*/
    /*background-color: sandybrown;*/
}

/*=======搜索=====*/
#content #search{
    height: 120px;
    background-color: lightsalmon;
}

/*=======沒有商品=====*/
#content #no-goods{
    height: 400px;
    background-color: white;
    line-height: 400px;
}
#content #no-goods div{
    text-align: center;
    position: relative;
}
#content #no-goods img{
    width: 100px;
    height: 100px;

    vertical-align: middle;
}
#content #no-goods font{
    color: #505050;
}

/*=======有商品=====*/
#goods{
    /*background-color: skyblue;*/
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/*=====商品表格*/
#goods table{
    margin-bottom: 20px;
}

td{
    text-align: center;
}
.td1{
    width: 80px;
    
}
.td2{
    width: 300px;
}
.td3{
    width: 140px;
}
.td4{
    width: 140px;
}
.td5{
    width: 160px;
}
.td6{
    width: 80px;
}

/*商品信息*/
#goods .goods-pic{
    width: 80px;
    height: 100px;
    
    vertical-align: middle;
    float: left;
}

#goods .goodsInfo{
    position: relative;
}
#goods table p{
    text-align: left;
    float: left;
    width: 220px;
    font-size: 12px;
    height: 40px;
    
    position: absolute;
    top: 50%;
    margin-top: -20px;
    margin-left: 80px;
}

/*數(shù)量*/
.td4 button{
    width: 20px;
    height: 20px;
}
.td4 input{
    width: 20px;
    height: 20px;
    
    text-align: center;
}

.td6-del{
    color: #999999;
    cursor: pointer;
}



/*=====商品底部*/
#account #del{
    float: left;
}

#account button{
    float: right;
}

#account p{
    float:  right;
    margin-right: 100px;
}

#account{
    overflow: hidden;
}




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

京東購物車內(nèi)容動態(tài)布局代碼

$(function(){
    //=====================添加城市=====================
    var citysNode = $('#citys')
    for(cityName in cities){
        //創(chuàng)建城市節(jié)點(diǎn)
        var cityNode = $('<div><font>'+cityName+'</font></div>')
        //添加
        citysNode.append(cityNode)
    }
    //默認(rèn)第一個(gè)是白色
    $('#citys font:first').css({
        'color':'white',
        'background-color': 'red'
    })
    
    $seletedFontNode = $('#citys font:first')
    //添加點(diǎn)擊事件
    $('#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)
        //隱藏城市選項(xiàng)
        $('#citys').css('display','none')
    })
    
    $('#li2').on('mouseover', function(){
        $('#citys').css('display','block')
    })
    $('#li2').on('mouseleave', function(){
        $('#citys').css('display','none')
    })
    
    
    //=====================購物車商品=====================
    //1.請求商品數(shù)據(jù)
    allGoods = [
        {
            big_img:'img/a1.jpg',
            price: 245,
            description:'海瀾之家/Heilan Home春裝商務(wù)白襯衫男修身HNCAD3A067Y 漂白(69) 漂'
        },
        {
            big_img:'img/a2.jpg',
            price: 123,
            description:'海瀾之家/Heilan Home春裝商務(wù)白襯衫男修身HNCAD3A067Y 漂白(69) 漂'
        },
        {
            big_img:'img/a3.jpg',
            price: 67,
            description:'海瀾之家/Heilan Home春裝商務(wù)白襯衫男修身HNCAD3A067Y 漂白(69) 漂'
        }
    ]
    
    
    
    //2.創(chuàng)建商品對應(yīng)的標(biāo)簽
    for(var i=0; i<allGoods.length;i++){
        //拿到每個(gè)商品數(shù)據(jù)
        goodsObj = allGoods[i]  
        //給商品創(chuàng)建對應(yīng)的節(jié)點(diǎn)
        $td1 = $('<td class="td1"><input type="checkbox"/></td>')
        $td2 = $('<td class="td2 goodsInfo"><img class="goods-pic" src='+goodsObj['big_img']+'/><p>'+goodsObj['description']+'</p></td>')
        $td3 = $('<td class="td3">￥'+goodsObj['price']+'.00</td>')
        $td4 = $('<td class="td4"><button id="down">-</button><input value="1"/><button id="up">+</button></td>')
        $td5 = $('<td class="td5">￥'+goodsObj['price']+'.00</td>')
        $td6 = $('<td class="td6 td6-del">刪除</td>')
        $trNode = $('<tr></tr>')
        $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('商品至少一個(gè)!')
            return
        }
        //數(shù)量減1
        num--
        $(inputNode).val(num)
        //重新計(jì)算小計(jì)
        var $totalNode = $(this).parent().next()   //總計(jì)
        var $priceNode = $(this).parent().prev()   //單價(jià)
        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()
    
        //數(shù)量減1
        num++
        $(inputNode).val(num)
        //重新計(jì)算小計(jì)
        var $totalNode = $(this).parent().next()   //總計(jì)
        var $priceNode = $(this).parent().prev()   //單價(jià)
        var total = Number($priceNode.text().slice(1,10000))*num
        $totalNode.text('￥'+ total+'.00')
    })
    
    
    
    
    
})

隨機(jī)顏色代碼

//隨機(jī)顏色
function randomColor(){
    var r = parseInt(Math.random()*255)
    var g = parseInt(Math.random()*255)
    var b = parseInt(Math.random()*255)
    //'rgb(23, 45, 89)'
    return 'rgb('+r+','+g+','+b+')'
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,427評論 4贊 61
  • 景色秀美青城山， 空氣清新水纏綿。 仰望山似云霧里， 山路奇曲扶手攀。 站高山頂似仙境， 伏身環(huán)視在云瑞。 游人來...
    深知綠葉閱讀 567評論 2贊 4
  • 一、supervisor 或者nodemon重啟node進(jìn)程 如果你有 PHP 開發(fā)經(jīng)驗(yàn)，會習(xí)慣在修改 PHP 腳...
    合肥黑閱讀 2,867評論 0贊 0
  • 不惦念紅塵，不懊惱得失，不憂愁飽暖，不畏懼生死。心靜，是不是就是這個(gè)樣子？ 人是思想動物，一般來說...
    意心意揚(yáng)閱讀 302評論 0贊 4
  • 我們常用“無價(jià)”，“上天的恩賜”，“金錢無法衡量”來形容愛情。 此種愛情觀是錯誤的！ 無價(jià)，意味著沒有價(jià)格，沒有價(jià)...
    請叫我Michael閱讀 534評論 0贊 0

友情鏈接更多精彩內(nèi)容