分享用一下周末做的购物车案例

其他 2018-09-10 18:53:33 阅读次数: 0

嘛，先上代码：
html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css/buybuybuy.css" type="text/css" rel="stylesheet">
    <script src="js/common.js"></script>
</head>
<body>
<div>
    <div class="logo">
        <img src="images/taobao_logo.gif">
    </div>
    <div class="location">
        您的位置：<a href="javascript:void(0)">首页</a> > <a href="javascript:void(0)">我的淘宝</a> > 我的购物车
    </div>
    <div class="course">
        <div class="courseEdge leftEdge-selected"></div>
        <div class="courses-selected">1.查看购物车</div>
        <div class="between betweenLeft-selected">
            <div class="between betweenRight"></div>
        </div>
        <div class="courses">2.确认订单信息</div>
        <div class="between betweenLeft">
            <div class="between betweenRight"></div>
        </div>
        <div class="courses">3.付款到支付宝</div>
        <div class="between betweenLeft">
            <div class="between betweenRight"></div>
        </div>
        <div class="courses">4.确认收货</div>
        <div class="between betweenLeft">
            <div class="between betweenRight"></div>
        </div>
        <div class="courses">5.评价</div>
        <div class="courseEdge rightEdge"></div>
    </div>
    <table>
        <thead>
        <tr>
            <td width="49"><input type="checkbox" id="checkAll">全选</td>
            <td width="349">店铺宝贝</td>
            <td width="79">单件积分</td>
            <td width="79">单价（元）</td>
            <td width="99">数量</td>
            <td width="79">小计（元）</td>
            <td width="59">操作</td>
        </tr>
        <tr>
            <td colspan="7">
                <hr color="#a5c3e6" size="3">
            </td>
        </tr>
        </thead>
        <tbody>
        <tr class="shop">
            <td colspan="7">
                店铺：<a href="javascript:void(0)">纤巧百媚时尚鞋纺</a>
                卖家：<a href="javascript:void(0)">纤巧百媚</a>
                <a href="javascript:void(0)" class="relation"></a>
            </td>
        </tr>
        <tr class="content">
            <td><input type="checkbox"></td>
            <td>
                <div class="good">
                    <div class="goodPic">
                        <img src="images/taobao_cart_01.jpg">
                    </div>
                    <div class="goodInfo">
                        <div>
                            <div class="goodName"><a href="javascript:void(0)">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></div>
                            <div>颜色：棕色 尺码：37</div>
                            <div>保障：<img src="images/taobao_icon_01.jpg"></div>
                        </div>
                    </div>
                </div>
            </td>
            <td class="point">5</td>
            <td class="price">138.00</td>
            <td class="amount">
                <img src="images/taobao_minus.jpg">
                <input type="text" value="1">
                <img src="images/taobao_adding.jpg">
            </td>
            <td class="goodPrice">138</td>
            <td class="delete"><a href="javascript:void(0)">删除</a></td>
        </tr>
        <tr class="shop">
            <td colspan="7">
                店铺：<a href="javascript:void(0)">香港我的美丽日记</a>
                卖家：<a href="javascript:void(0)">lokemick2009</a>
                <a href="javascript:void(0)" class="relation"></a>
            </td>
        </tr>
        <tr class="content">
            <td><input type="checkbox"></td>
            <td>
                <div class="good">
                    <div class="goodPic"><img src="images/taobao_cart_02.jpg"></div>
                    <div class="goodInfo">
                        <div>
                            <div class="goodName"><a href="javascript:void(0)">chanel/香奈尔/香奈尔炫亮美丽唇膏3.5g</a></div>
                            <div>保障：<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></div>
                        </div>
                    </div>
                </div>
            </td>
            <td class="point">12</td>
            <td class="price">265.00</td>
            <td class="amount">
                <img src="images/taobao_minus.jpg">
                <input type="text" value="1">
                <img src="images/taobao_adding.jpg">
            </td>
            <td class="goodPrice">265</td>
            <td class="delete"><a href="javascript:void(0)">删除</a></td>
        </tr>
        <tr class="shop">
            <td colspan="7">
                店铺：<a href="javascript:void(0)">实体经营</a>
                卖家：<a href="javascript:void(0)">林颜店铺</a>
                <a href="javascript:void(0)" class="relation"></a>
            </td>
        </tr>
        <tr class="content">
            <td><input type="checkbox"></td>
            <td>
                <div class="good">
                    <div class="goodPic"><img src="images/taobao_cart_03.jpg"></div>
                    <div class="goodInfo">
                        <div>
                            <div class="goodName"><a href="javascript:void(0)">蝶妆海皙蓝清滢粉底液10#（象牙白）</a></div>
                            <div>保障：<img src="images/taobao_icon_01.jpg"><img src="images/taobao_icon_02.jpg"></div>
                        </div>
                    </div>
                </div>
            </td>
            <td class="point">3</td>
            <td class="price">85.00</td>
            <td class="amount">
                <img src="images/taobao_minus.jpg">
                <input type="text" value="1">
                <img src="images/taobao_adding.jpg">
            </td>
            <td class="goodPrice">85</td>
            <td class="delete"><a href="javascript:void(0)">删除</a></td>
        </tr>
        <tr class="shop">
            <td colspan="7">
                店铺：<a href="javascript:void(0)">红豆豆的小屋</a>
                卖家：<a href="javascript:void(0)">taobao豆豆</a>
                <a href="javascript:void(0)" class="relation"></a>
            </td>
        </tr>
        <tr class="content">
            <td><input type="checkbox"></td>
            <td>
                <div class="good">
                    <div class="goodPic"><img src="images/taobao_cart_04.jpg"></div>
                    <div class="goodInfo">
                        <div>
                            <div class="goodName"><a href="javascript:void(0)">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></div>
                            <div>保障：<img src="images/taobao_icon_01.jpg"></div>
                        </div>
                    </div>
                </div>
            </td>
            <td class="point">12</td>
            <td class="price">12.00</td>
            <td class="amount">
                <img src="images/taobao_minus.jpg">
                <input type="text" value="1">
                <img src="images/taobao_adding.jpg">
            </td>
            <td class="goodPrice">12</td>
            <td class="delete"><a href="javascript:void(0)">删除</a></td>
        </tr>
        </tbody>
    </table>
    <div class="totalPrice">
        商品总价（不含运费）：<span id="totalPrice">0</span>元
    </div>
    <div class="totalPoint">
        <img src="images/taobao_del.jpg" id="delSelected">
        可获积分：<span id="totalPoint">0</span>点
    </div>
    <div class="buy">
        <img src="images/taobao_subtn.jpg">
    </div>
</div>
</body>
</html>
<script src="js/buybuybuy.js"></script>

js部分：

var ckAll = my$("checkAll");
//获取复选框所在tr
var tr = document.getElementsByClassName('content');
//cks用于存储tr
var cks = new Array();
//获取删除按钮所在
var del = document.getElementsByClassName('delete');
//dels用于存储删除按钮
var dels = new Array();

//获取复选框和删除按钮
function getItems() {
    tr = document.getElementsByClassName('content');
    cks = [];
    //存储复选框
    for (var i = 0; i < tr.length; i++) {
        cks.push(tr[i].firstElementChild.firstElementChild);
    }
    del = document.getElementsByClassName('delete');
    dels = [];
    for (var i = 0; i < del.length; i++) {
        dels.push(del[i].firstElementChild);
    }
}

getItems();

//全选功能
ckAll.onclick = function () {
    for (var i = 0; i < cks.length; i++) {
        cks[i].checked = this.checked;
    }
    calculate();
}
for (var i = 0; i < cks.length; i++) {
    cks[i].onclick = function () {
        var flag = true;
        for (var i = 0; i < cks.length; i++) {
            if (!cks[i].checked) {
                flag = false;
                break;
            }
        }
        ckAll.checked = flag;
        calculate();
    }
}

//计算价格、积分
function calculate() {
    var totalPrice = 0;
    var totalPoint = 0;
    for (var i = 0; i < tr.length; i++) {
        if (cks[i].checked) {
            tr[i].getElementsByClassName('goodPrice')[0].innerText =
                tr[i].getElementsByClassName('price')[0].innerText *
                tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value;
            totalPrice += parseInt(tr[i].getElementsByClassName('goodPrice')[0].innerText);
            totalPoint += parseInt(tr[i].getElementsByClassName('point')[0].innerText) *
                tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value;
        }
    }
    my$('totalPrice').innerText = totalPrice;
    my$('totalPoint').innerText = totalPoint;
}

calculate();

//删除商品函数
function delEle(good) {
    console.log('别呀客官！！！！');
    var parent = good.parentNode.parentNode.parentNode;
    var child1 = good.parentNode.parentNode;
    var child2 = good.parentNode.parentNode.previousElementSibling;
    parent.removeChild(child1);
    parent.removeChild(child2);
}

//给单个按钮设置删除事件
for (var i = 0; i < dels.length; i++) {
    dels[i].onclick = function () {
        var r=confirm("你确定删除吗？");
        if (r==true){
            delEle(this);
            getItems();
            calculate();
        }
    };
}
//删除所选
my$('delSelected').onclick = function () {
    var r=confirm("你确定删除吗？");
    if (r==true){
        for (var i = 0; i < cks.length; i++) {
            if (cks[i].checked) {
                delEle(cks[i]);
            }
        }
        getItems();
        calculate();
    }
}

//改变商品数量后重新进行计算
for (let i = 0; i < tr.length; i++) {
    tr[i].getElementsByClassName('amount')[0].getElementsByTagName('img')[0].onclick = function () {
        if (tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value != 1) {
            tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value -= 1;
        } else {
            alert('商品数量不能小于1');
        }
        calculate();
    }
    tr[i].getElementsByClassName('amount')[0].getElementsByTagName('img')[1].onclick = function () {
        tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value =
            parseInt(tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].value) + 1;
        calculate();
    }
    tr[i].getElementsByClassName('amount')[0].getElementsByTagName('input')[0].onkeyup = function () {
        if (this.value < 1 || isNaN(this.value)) {
            this.value = 1
        }
        calculate();
    }
}

css部分：

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

body > div {
    margin: 0 auto;
    width: 800px;
}

.logo {
    margin: 10px 0;
}

.location {
    margin: 10px 0;
    font-size: 12px;
}

.course {
    margin: 10px 0;
    height: 23px;
    overflow: hidden;
}

.course > div {
    float: left;
    text-align: center;
    line-height: 23px;
    font-weight: bold;
    font-size: 12px;
}

.courseEdge {
    width: 3px;
    height: 23px;
    background: url("../images/taobao_bg.png") no-repeat;
}

.leftEdge {
    background-position: -12px -69px;
}

.leftEdge-selected {
    background-position: -12px -92px;
}

.rightEdge {
    background-position: -12px -138px;
}

.rightEdge-selected {
    background-position: -12px -161px;
}

.courses-selected {
    width: 146px;
    height: 23px;
    background-color: #ff6600;
    color: white;
}

.courses {
    width: 147px;
    height: 23px;
    background-color: #e4e4e4;
}

.between {
    width: 15px;
    height: 23px;
    background: url("../images/taobao_bg.png") no-repeat;
}

.betweenLeft {
    background-color: #e4e4e4;
}

.betweenLeft-selected {
    background-color: #ff6600;
}

.betweenRight {
    background-position: 0px 0px;
}

.between-right-selected {
    background-position: 0px -23px;
}

table td {
    border-right: 1px solid white;
}

thead td {
    text-align: center;
}

table * {
    font-size: 12px;
}

a.relation {
    width: 69px;
    height: 21px;
    background-image: url("../images/taobao_relation.jpg");
    display: inline-block;
    position: relative;
    top: 3px;
}

tr.shop {
    height: 30px;
}

tr.content td {
    background-color: #d1ecff;
    height: 80px;
    padding: 6px;
    line-height: 80px;
    text-align: center;
}

.good {
    overflow: hidden;
}

.good > div {
    float: left;
}

.goodPic img {
    vertical-align: middle;
}

.goodInfo {
    width: 240px;
    height: 80px;
    overflow: hidden;
    line-height: 20px;
    text-align: left;
    padding: auto 0px;
    margin-left: 9px;
    position: relative;
    display: table;
}

.goodInfo > div {
    display: table-cell;
    vertical-align: middle;
}

.goodName {
    color: -webkit-link;
}

.point {
    font-weight: bold;
}

.amount input {
    width: 27px;
}

.goodPrice {
    font-weight: bold;
    color: #ff6600;
}

.amount img {
    cursor: pointer;
}

.amount input {
    text-align: center;
}

.totalPrice {
    text-align: right;
    font-size: 12px;
    padding: 10px;
}

span {
    font-size: 15px;
    font-weight: bold;
    color: #ff6600;
}

.totalPoint {
    text-align: right;
    font-size: 12px;
    padding: 10px 10px 10px 0;
    position: relative;
}

.totalPoint img {
    cursor: pointer;
    position: absolute;
    left: 0;
}

.buy {
    text-align: right;
    padding: 10px;
    cursor: pointer;
}

主要时间花在了js部分，在点击各种按钮后，要进行不同的操作，并且还要追加相同的，对商品所在的部分进行重新统计，然后再次计算价格，以及积分，所以计算部分单独写了个函数。

猜你喜欢

转载自blog.csdn.net/qq_42926749/article/details/81836041
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022