JavaScript(二十一）淘宝购物车demo

最新推荐文章于 2022-03-12 17:51:28 发布

We_jia

最新推荐文章于 2022-03-12 17:51:28 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：淘宝购物车

本文链接：https://blog.youkuaiyun.com/We_jia/article/details/87890556

效果图展示

思路分析

本案例有一个重要的知识点就是索引对索引通过搭建桥梁

1.实现点击按钮框
2.实现商品数量的加减
3.算每一件商品的总金额小数点保留俩位 ().toFixed (2)
4.算所有选中商品的总金额以及点+ -时的总金额
5.只选某几个商品的总金额加单独事件
6.处理全选的问题
7.已选商品个数

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="./style.css "/>
</head>
<body>
<div class="shopping">
    <div class="header">
        <div class="logo">
            <img src="./img/捕获.PNG " alt="加载失败"/>
        </div>
        <div class="search">
            <input type="text"/>

            <div class="search_right">搜 索</div>
        </div>
    </div>
    <div class="content">
        <div class="quanxuan">
            <input class="ckbox" type="checkbox"/>
            <span class="cktext">全选</span>
        </div>
        <div class="shangping">商品信息</div>
        <div class="danjia">单价</div>
        <div class="shuliang">数量</div>
        <div class="shuliang">金额</div>
        <div class="shuliang">操作</div>
    </div>
    <div class="dianpu">
        <input class="ckbtn" type="checkbox"/>
        <span>店铺：lims店铺</span>
    </div>
    <ul class="order_content">
        <li class="first"><input class="ckbtn" type="checkbox"/></li>
        <li class="second">
            <div>
                <div class="second_left"><img src="./img/O1CN01kaVOV622Vkr4dRlBH_!!0-item_pic.jpg_80x80.jpg "
                                              alt="加载失败"/></div>
                <div class="second_right">
                    <div class="second_right_top">送杯勺 马来西亚进口LIMS蓝山风味速溶咖啡粉共80袋袋装三合一</div>
                    <div class="second_right_bottom">
                        <img src="./img/T1BCidFrNlXXaSQP_X-16-16.png" alt="加载失败"/>
                        <img src="./img/T1Vyl6FCBlXXaSQP_X-16-16.png" alt="加载失败"/>
                        <img src="./img/xcard.png" alt="加载失败"/>
                    </div>
                </div>
            </div>
        </li>
        <li class="third">
            <del>￥119.00</del>
            <span class="spdanjia" data-price="59.9">￥59.90</span>
        </li>
        <li class="fourth">
            <button class="fourth_left">-</button><input class="text" type="text" value="1"/><button class="fourth_right">+</button>
        </li>
        <li class="fifth"><span class="total_price" data-total="59.90">￥59.90</