超详细购物车案例js实现购物车上【2021.10.10】

最新推荐文章于 2024-05-28 18:30:26 发布

轻盈的风

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量1k

点赞数 3

分类专栏： javascript_笔记专栏文章标签： html5 javascript css

本文链接：https://blog.csdn.net/masierty/article/details/120683084

版权

javascript_笔记专栏专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、前言

本文所用的代码是之前看一个大大所写的，忘记大大名字了，侵权立删。实现购物车的方法有很多，我们不应该把重心放在代码上，而是应该放在功能上和逻辑上，这样再复杂的项目，也能从众多功能中一步一步下手。不会代码我们可以去查，直到实现功能为止。

二、功能

1.全选按钮

点击后反选按钮的状态改为未选中状态
判断点击后是否为选中状态，是则选中所有单选按钮并通过改变classname从而改变背景颜色，否则取消所有单选按钮

2.反选按钮

点击后通过逻辑运算符！改变单选按钮的选中状态
判断点击后否为选中状态，是则改背景，否则让全选按钮为非选中状态且改回背景

3.单选按钮

点击后是选中状态则改变背景色
非选中状态则改回背景色，并取消全选按钮的选中状态

4.数量文本框

可以用键盘上的数字和删除按钮backsp进行操作，其它按钮显示NaN（不是数值）
当文本框值为0或空值时，让文本框的值改为1
文本框中的值为大于1的数字时，计算小计的值，刷新总价格的值

5.控制数量的加减按钮

点击减少按钮，先判断是否为1，为1则提示不能减了1，不为1则做自减计算小计刷新总价
点击加按钮，做自加，计算小计刷新总价

6.删除按钮

使对应的商品从列表中删除
重新给所有对象加索引值
刷新总价

7.小计

设置形参，通过价格=单价*数量得到小计

8.总价

.遍历所有的小计，挨个相加得到总价

三、代码部分

.今天先放上部分代码，下章奉上所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-size: 14px;
    }
    .html{
        height: 100%;
        width: 100%;
    }
    .body{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #content{
        width: 60%;
        height: 50%;
        min-width: 414px;
        min-height: 516px;
        background-color: rgb(230, 239, 243);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 10% auto;
    }
    #info{
        width: 100%;
        height: 30px;
        background-color: rgb(74, 189, 218);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(248, 252, 200);
    }
    #settlementDiv button{
        background-color: rgb(230, 80, 43);
        width: 100px;
        height: 40px;
        color: rgb(255, 255, 255);
        border: none;
    }
    </style>
</head>
<body>
    <div id="content">
        <div id="info">
            <div id="checkdiv">
                <input type="checkbox" id="checkAll"/>全选
            </div>
            <p>商品名称</p>
            <p>图片</p>
            <p>单价</p>
            <p>数量</p>
            <p>小记</p>
            <p>操作</p>
        </div>

        <div id="list">

        </div>

        <div id="bottom">
            <div id="reverseDiv">
                <input type="checkbox" id="reverseCheck"/>反选
            </div>
            <div id="priceDiv">
                总结：<span id="allPrice">0￥</span>
            </div>
            <div id="settlementDiv">
                <button>去结算></button>
            </div>
        </div>
        
    </div>


</body>
<script>
var cart = [
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "iphone 13",
            "src": "../images/iphone 13.jpg",
            "price": "1499",
            "totle": "1499",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "iphone 13",
            "src": "../images/iphone 13.jpg",
            "price": "1599",
            "totle": "1599",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "iphone 13",
            "src": "../images/iphone 13.jpg",
            "price": "1699",
            "totle": "1699",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "iphone 13",
            "src": "../images/iphone 13.jpg",
            "price": "1799",
            "totle": "1799",
            "num": 1
        }
    ];



</script>
</html>

轻盈的风

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
超详细购物车案例js实现购物车上【2021.10.10】

一、前言本文所用的代码是之前看一个大大所写的，忘记大大名字了，侵权立删。实现购物车的方法有很多，我们不应该把重心放在代码上，而是应该放在功能上和逻辑上，这样再复杂的项目，也能从众多功能中一步一步下手。不会代码我们可以去查，直到实现功能为止。二、功能1.全选按钮点击后反选按钮的状态改为未选中状态判断点击后是否为选中状态，是则选中所有单选按钮并通过改变classname从而改变背景颜色，否则取消所有单选按钮2.反选按钮点击后通过逻辑运算符！改变单选按钮的选中状态判断...
复制链接

扫一扫