1. 编程号首页

模仿淘宝购物车

编程小号 • • 未分类

模仿淘宝购物车效果图样式*{margin:0;padding:0;}.main{width:850px;height:780px;margin:10pxauto;}p{font-size:13px;margin:20px0px;}li{list-style:none;}a{tex…

效果图
在这里插入图片描述

样式

*{
    margin: 0;
    padding: 0;
}
.main{
    width: 850px;
    height: 780px;
    margin: 10px auto;
}
p{
    font-size: 13px;
    margin: 20px 0px;
}
li{
    list-style: none;
}
a {
    text-decoration: none;
    color: #1991db;
}
a:hover{
    color: blue;
    text-decoration: underline !important;
}
.main_menu{
    width: 820px;
    height: 23px;
}
.main_menu span{
    display: block;
    height: 23px;
    line-height: 23px;
    float: left;
}
.main_menu .s1{
    width:3px;
    height: 23px;
    background: url("images/taobao_bg.png") no-repeat -12px -92px;
}
.main_menu .s2{
    width:146px;
    height: 23px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: white;
    cursor: pointer;
    background-color: #ff6600;
}
.main_menu .s3{
    width:15px;
    height: 23px;
    background: url("images/taobao_bg.png") no-repeat;
    background-color: #ff6600;
}
.main_menu .s4{
    width:146px;
    height: 23px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    background-color: #e4e4e4;
    color: #333333;
}
.main_menu .s5{
    width:15px;
    height: 23px;
    background: url("images/taobao_bg.png") no-repeat;
    background-color: #e4e4e4;
}
.main_menu .s6{
    width:3px;
    height: 23px;
    background: url("images/taobao_bg.png") no-repeat -12px -138px;
}
.main_center{
    width: 850px;
    height: 630px;
    margin-top: 10px;
}

.main_center  td{
    text-align: center;
    font-size: 13px;
}
.main_center .tr1 .tt1,.tr4 .td1{
    width: 49px;
}
.main_center .tr1 .tt2,.tr4 .td2{
    width: 349px;
}
.main_center .tr1 .tt3,.tr4 .td3{
    width: 79px;
}
.main_center .tr1 .tt4,.tr4 .td4{
    width: 79px;
}
.main_center .tr1 .tt5,.tr4 .td5{
    width: 99px;
}
.main_center .tr1 .tt6,.tr4 .td6{
    width: 50px;
}
.main_center .tr1 .tt7,.tr4 .td7{
    width: 79px;
}
.tr2 {
    width: 850px;
    height: 3px;
    background-color: #a7cbff;
}
.tr3{
    height: 35px;
    padding: 0px;
}
.tr3 td{
    text-align: left;
    padding-top: 15px;
    height: 20px;
    line-height: 0px;
}
.tr3 td img {
    vertical-align: middle;
    margin-left: 4px;
}
.tr4 td{
    height: 92px;
    background-color: #e2f2ff;
}
.td2{
    height: 92px;
    line-height: 92px;
}
.td2 .ul1{
    padding-top: 20px;
}
.td2 .ul2{
    padding-top: 10px;
}
.td2 ul{
    width: 250px;
    height: 60px;
    float: right;
    margin-top: 6px;
    margin-right: 8px;
}
.td2 ul li{
    text-align: left;
    line-height: 20px;
}
.td2 ul li img,.td2 img{
    vertical-align: middle;
}
.td3{
    font-weight: bold;
}
.td5 div {
    width: 74px;
    height: 26px;
    line-height: 26px;
    margin: 0 auto;
}
.td5 div .bn1,.td5 div .bn2{
    width: 14px;
    height: 12px;
    line-height: 10px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: white;
    outline: none;
}
.td5 div input{
    width: 32px;
    outline: none;
    text-align: center;
}
.td6{
    font-weight: bold;
    color: #fe6400;
}
.tr5 td,.tr6 td,.tr7 td{
    text-align: right;
}
.tr5 span,tr6,span{
    font-size: 15px;
    font-weight: bold;
    color: #fe6400;
}
.tr5 td{
    height: 20px;
    padding-top: 5px;
    padding-right: 8px;
}
.tr6 td{
    height: 20px;
    padding-top: 15px;
    padding-right: 8px;
}
.tr7 td{
    height: 20px;
    padding-top: 5px;
    padding-right: 8px;
}
.tr6 td input{
    width: 110px;
    height: 26px;
    background-color: #e4e4e4;
    color: #130101;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    letter-spacing: 2px;
    outline: none;
    cursor: pointer;
}
.tr7 td input{
    width: 95px;
    height: 28px;
    background-color: #fd6600;
    color: white;
    font-weight: bold;
    border: 1px solid #fd6600;
    border-radius: 4px;
    letter-spacing: 2px;
    outline: none;
    cursor: pointer;
}

内容部分

<div class="main">
    <img src="images/taobao_logo.gif">
    <p>你的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</p>
    <div class="main_menu">
        <span class="s1"></span>
        <span class="s2">1.查看购物车</span>
        <span class="s3"></span>
        <span class="s4">2.确认订单信息</span>
        <span class="s5"></span>
        <span class="s4">3.付款到支付宝</span>
        <span class="s5"></span>
        <span class="s4">4.确认收货</span>
        <span class="s5"></span>
        <span class="s4">5.评价</span>
        <span class="s6"></span>
    </div>
    <div class="main_center">
        <table>
            <tbody id="tbd" class="tbd">
                <tr class="tr1">
                    <td class="tt1"><input id="td_inp" type="checkbox" >全选</td>
                    <td class="tt2">店铺宝贝</td>
                    <td class="tt3">获积分</td>
                    <td class="tt4">单价(元)</td>
                    <td class="tt5">数量</td>
                    <td class="tt6">小计(元)</td>
                    <td class="tt7">操作</td>
                </tr>
                <tr class="tr2">
                    <td calss="td2" colspan="7"></td>
                </tr>
                <tr class="tr3">
                    <td colspan="7">
                        店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：
                        <a href="#">纤巧百媚</a><img src="images/taobao_relation.jpg"></td>
                </tr>
                <tr class="tr4">
                    <td class="td1"><input class="check1" type="checkbox" ></td>
                    <td class="td2">
                        <img src="images/taobao_cart_01.jpg" >
                        <ul>
                            <li><a href="#" >日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></li>
                            <li>颜色：棕色 尺码：37</li>
                            <li>保障：<img src="images/taobao_icon_01.jpg"></li>
                        </ul>
                    </td>
                    <td class="td3">5</td>
                    <td class="td4">138.00</td>
                    <td class="td5">
                        <div>
                            <input  class="bn1" type="button" value="-">
                            <input class="inpp1" type="text" value="1" >
                            <input class="bn2"  type="button" value="+">
                        </div>
                    </td>
                    <td class="td6">138</td>
                    <td class="td7"><a class="aa1" href="#">删除</a></td>
                </tr>
                <tr class="tr3">
                    <td colspan="7">
                        店铺：<a href="#">香港我的美丽日记</a> 卖家：
                        <a href="#">lokemick2009</a><img src="images/taobao_relation.jpg"></td>
                </tr>
                <tr class="tr4">
                    <td class="td1"><input class="check1" type="checkbox" ></td>
                    <td class="td2">
                        <img src="images/taobao_cart_02.jpg" >
                        <ul class="ul1">
                            <li><a href="#" >chanel/香奈儿/香奈儿炫亮魅力唇膏3.5g</a></li>
                            <li>保障：<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></li>
                        </ul>
                    </td>
                    <td class="td3">12</td>
                    <td class="td4">265.00</td>
                    <td class="td5">
                        <div>
                            <input  class="bn1" type="button" value="-">
                            <input class="inpp1" type="text" value="1" >
                            <input class="bn2"  type="button" value="+">
                        </div>
                    </td>
                    <td class="td6">265</td>
                    <td class="td7"><a class="aa1" href="#">删除</a></td>
                </tr>
                <tr class="tr3">
                    <td colspan="7">
                        店铺：<a href="#">实体经营</a> 卖家：
                        <a href="#">林颜店铺</a><img src="images/taobao_relation.jpg"></td>
                </tr>
                <tr class="tr4">
                    <td class="td1"><input class="check1" type="checkbox" ></td>
                    <td class="td2">
                        <img src="images/taobao_cart_03.jpg" >
                        <ul class="ul1">
                            <li><a href="#" >蝶妆海暂蓝清滢粉底液10#（象牙白）</a></li>
                            <li>保障：<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></li>
                        </ul>
                    </td>
                    <td class="td3">3</td>
                    <td class="td4">85.00</td>
                    <td class="td5">
                        <div>
                            <input  class="bn1" type="button" value="-">
                            <input class="inpp1" type="text" value="1" >
                            <input class="bn2"  type="button" value="+">
                        </div>
                    </td>
                    <td class="td6">85</td>
                    <td class="td7"><a class="aa1" href="#">删除</a></td>
                </tr>
                <tr class="tr3">
                    <td colspan="7">
                        店铺：<a href="#">红豆豆的小屋</a> 卖家：
                        <a href="#">taobao豆豆</a><img src="images/taobao_relation.jpg"></td>
                </tr>
                <tr class="tr4">
                    <td class="td1"><input class="check1" type="checkbox" ></td>
                    <td class="td2">
                        <img src="images/taobao_cart_04.jpg" >
                        <ul class="ul2">
                            <li><a href="#" >相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></li>
                            <li>保障：<img src="images/taobao_icon_01.jpg"></li>
                        </ul>
                    </td>
                    <td class="td3">12</td>
                    <td class="td4">12.00</td>
                    <td class="td5">
                        <div>
                            <input  class="bn1" type="button" value="-">
                            <input class="inpp1" type="text" value="2" >
                            <input class="bn2"  type="button" value="+">
                        </div>
                    </td>
                    <td class="td6">24</td>
                    <td class="td7"><a class="aa1" href="#">删除</a></td>
                </tr>
                <tr class="tr5">
                    <td colspan="7">商品总价（不含运费）：
                        <span id="ss1">0</span>元</td>
                </tr>
                <tr class="tr6">
                    <td>
                        <input id="btn2" type="button" value="删除所选" >
                    </td>
                    <td colspan="6">
                        可用积分：<span id="ss2">0</span>分
                    </td>
                </tr>
                <tr class="tr7">
                    <td colspan="7">
                        <input  id="btn1" type="button" value="立即购买" >
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

实现效果的js代码

function my$(id){
    return document.getElementById(id);
}


//全选
    var inps = document.getElementsByClassName("check1");
    var inp = my$("td_inp");
    inp.onclick = function () {
        for (var i = 0; i < inps.length; i++){
            inps[i].checked = inp.checked;
            shopCount();
        }
    }
    for ( var j = 0; j < inps.length; j++){
        inps[j].onclick = function () {
            var flag = true;
            for ( var k = 0; k < inps.length; k++){
                if (!inps[k].checked) {
                    flag = false;
                    break;
                }
            }
            inp.checked = flag;
            shopCount();
        }
    }

    //数量加一和减一
    var btnns1 = document.getElementsByClassName("bn1");        //减号
    var btnns2 = document.getElementsByClassName("bn2");        //加号
    var inpps = document.getElementsByClassName("inpp1");       //数量
    var price = document.getElementsByClassName("td4");         //单价
    var scores = document.getElementsByClassName("td3");        //积分
    var moneys = document.getElementsByClassName("td6");        //小计
    var aas = document.getElementsByClassName("aa1");           //删除
    for ( var i = 0; i < btnns1.length; i++){
        btnns1[i].style.cursor = "pointer";
        btnns2[i].style.cursor = "pointer";
        //减号
        btnns1[i].onclick = function () {
            var minus = this.nextElementSibling;
                if (minus.value == 1 ){
                    alert("商品数量最少为1");
                }else {
                    minus.value --;
                    getMoney();
                    shopCount();
                }

        }
        //加号
        btnns2[i].onclick = function () {

            var add = this.previousElementSibling;
            add.value ++;
            getMoney();
            shopCount();
        }
        //删除
        aas[i].onclick = function(){
            var remove = confirm("你确定要删除吗？");
            if (remove) {
                my$("tbd").removeChild(this.parentElement.parentElement.previousElementSibling);
                my$("tbd").removeChild(this.parentElement.parentElement);
            }
            shopCount();
        }
    }

    //删除所选
    my$("btn2").onclick = function () {
        for ( var i = inps.length - 1; i >= 0; i--){
                 if(inps[i].checked == true){
                    my$("tbd").removeChild(inps[i].parentElement.parentElement.previousElementSibling);
                    my$("tbd").removeChild(inps[i].parentElement.parentElement);
                     shopCount();
                }
        }
    }

    var spanCount = my$("ss1");                                 //显示总价
    var spanScore = my$("ss2");                                 //显示总积分
    var arrScore = [5,12,3,6];                                  //储存每一个的单积分

    //小计积分和价格
    function getMoney() {
        for ( var j = 0;j < price.length;j++){
            moneys[j].innerText = inpps[j].value * parseInt(price[j].innerText);
            scores[j].innerText = inpps[j].value * arrScore[j];
        }
    }

    //计算总积分和总价格
    function shopCount() {
        var moneysCount = 0;                                        //储存总价
        var scoreCount = 0;                                         //储存总积分
        for ( var j = 0;j < moneys.length; j++){
            if (inps[j].checked) {
                moneysCount = moneysCount + parseInt(moneys[j].innerText);
                scoreCount = scoreCount + parseInt(scores[j].innerText);
            }
        }
        spanCount.innerText = moneysCount;
        spanScore.innerText = scoreCount;
    }

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/38034.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注