前端JavaScript购物车模块

小白村第一深情
已于 2023-01-05 21:19:44 修改
阅读量557
点赞数 1
分类专栏： demo 文章标签：前端 javascript html
于 2022-10-03 21:01:25 首次发布
本文链接：https://blog.csdn.net/ceike/article/details/127156048
版权
demo 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
效果

主要功能：

左侧滚动条

购物车加减功能

麦当劳购物车

分析结构

本次任务重点是非轮播图部分；轮播图估计会单独做一期js原生版本讲解

购物车部分

左上角细节圆角

css圆角_hello_xujj的博客-CSDN博客_css圆角^v51^control,201^v3^control&utm_term=%E5%9C%86%E8%A7%92&spm=1018.2226.3001.4187
分析结构

不多说，上代码

<!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">
    <title>Document</title>
    <style>
        *{
            margin: auto;
            padding: auto;
            list-style: none;
            /*对应消除li标签固定样式 */
            box-sizing: border-box;
            /* 正常情况下为了方便我们都用怪异盒子；
            因为标准盒子要计算padding和border；
            不方便我们接到设计稿后的开发（你要单独量取这些东西，是不准确的，误差最后可能导致很大的布局变动）
             */
        } 
        html{
            font-size:62.5% ;
            /* 一般的，各大主流浏览器的font-size默认值为 16px，此时 1rem = 16px（所以 12px = 0.75rem）；

把 html 设置成 font-size: 62.5%，此时 1rem = 16px*62.5% = 10px（所以 12px = 1.2rem）；（1：10的比例更好换算）

html{
  font-size: 62.5%;  
}

注：rem 是 css3 中新增加的一个单位属性，是相对长度单位。相对于根元素(即html元素) font-size计算值的倍数
 */
        }
        main{
            height: 100vh;
            padding-bottom: 60px;
            display: flex;
        }
        main aside{
            width:100px;
            height: 100% ;
             /* 滚动 */
             overflow: scroll;
        }
        
        main aside .item{
            /* 改回正常盒模型 */
            /* 想想为什么这里改回正常盒模型了 */
            /* 因为不需要弹性即可达成效果... */
            /* bug 空格 */
            
            box-sizing: content-box;
            font-size: 1.2rem;
            padding: 2rem 0;
            /* 上下有间距，左右没有 */
            text-align: center;
           background-color: #ffffff;
           
             
        }
        main  .info{
            /* bug */
            width: 0;
            height: 100%;
            flex-grow: 1;
            /* 剩余的空间占满 */
            /* 仅仅对弹性盒子有用 */
            /* 所以这里上面的思考，可能对应这里 */
           
        }
        main .info li{
            height: 120px;
            display: flex;
        }
        main .info li img{
            /* margin-left: 0; */
            width: 75px;
            height: 75px;
            /* background-image: url(./图片2/Snipaste_2022-09-19_18-22-04.png); */
            /* 原因是下面的div里image里的url空着忘记加了 */
            /* float: left; */
            margin: 15px;
            margin-right: 15px;
        }

        main .info li div {
            width: 0;

            height: 95px;
           flex-grow: 1;
           height: 95px;
            margin: 5px;
        
            /* bug */
            /* background-image: url(./图片2//Snipaste_2022-09-19_18-22-04.png); */
        }
        /* 图片右边的4列文字 */
        main .info li div p:nth-of-type(1){
            font-size: 1.6rem;
            line-height: 20px;
        }
        main .info li div p:nth-of-type(2){
            font-size: 1.4rem;
            line-height: 20px;
        }
        main .info li div p:nth-of-type(3){
            font-size: 1.4rem;
            line-height: 20px;
        }
        main .info li div p:nth-of-type(4) .price{
            font-size: 1.8rem;
            line-height: 25px;
            color: #ff544b;
            float: left;
        }
        main .info li div p:nth-of-type(4) .add{
          float: right;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background-color: #fdbd4e;
        }
        main .info li div p:nth-of-type(4) .num{
            float: right;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
            
        }
        main .info li div p:nth-of-type(4) .sub{
          float: right;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          /* 浅灰色 */
          border:1px solid lightgray;
          border-radius: 50%;
          font-size: large;

            
        }

    
        /* 底部导航栏 */

        nav{
            width: 100%;
            height: 60px;
            background-color: #39393a;
            position: fixed;
            /* 固定定位 */
            bottom: 0%;
        }
        nav img{
            float: left;
            width: 50px;
            margin-left: 20px;
            /* 突出 */
            margin-top: -30px;
        }
        nav .all_money{
            font-size: 2.4rem;
            line-height: 60px;
            float: left ;
            margin-left:20px ;
            color: white;

        }
        nav div{
            width: 80px;
            height: 60px;
            line-height: 60px;
            background-color: #fdbd4e;
            float: right;
            font-size: 1.2rem;
            text-align: center; 
        }
    </style>
</head>
<body>
    <div class="container">
        <main>
            <!-- 侧边栏 -->
            <!-- https://blog.csdn.net/weixin_45587319/article/details/105492156?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166358802316800192278013%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166358802316800192278013&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-105492156-null-null.142^v47^pc_rank_34_ecpm25,201^v3^add_ask&utm_term=aside标签&spm=1018.2226.3001.4187 -->
           <!-- 关于其样式的改变，建议用element-ui
            https://blog.csdn.net/lijiabin102/article/details/109718609?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166359185516781432994979%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=166359185516781432994979&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~pc_rank_34-2-109718609-null-null.142^v47^pc_rank_34_ecpm25,201^v3^add_ask&utm_term=aside样式&spm=1018.2226.3001.4187 -->
            <aside>
               <!-- div.item{item$}*10 -->
                <div class="item">item1</div>
                <div class="item">item2</div>
                <div class="item">item3</div>
                <div class="item">item4</div>
                <div class="item">item5</div>
                <div class="item">item6</div>
                <div class="item">item7</div>
                <div class="item">item8</div>
                <div class="item">item9</div>
                <div class="item">item10</div>
            </aside>
            <ul class="info">
                <li>
                    <img src="./image/hanbao.png" alt="">
                    <div>
                        <p>汉堡</p>
                        <p>巴拉巴拉</p>
                        <p>多少钱呢</p>
                        <p>
                            <!-- 当我们写了price的变量后，实际起作用的是price里的number -->
                            <span class="price" price="22">￥22起</span>
                            <span class="add">+</span>
                            <span class="num">0</span>
                            <span class="sub">-</span>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="./image/hanbao.png" alt="">
                    <div>
                        <p>汉堡</p>
                        <p>巴拉巴拉</p>
                        <p>多少钱呢</p>
                        <p>
                            <span class="price" price="24">￥24起</span>
                            <span class="add">+</span>
                            <span class="num">0</span>
                            <span class="sub">-</span>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="./image/hanbao.png" alt="">
                    <div>
                        <p>汉堡</p>
                        <p>巴拉巴拉</p>
                        <p>多少钱呢</p>
                        <p>
                            <span class="price" price="20">￥20起</span>
                            <span class="add">+</span>
                            <span class="num">0</span>
                            <span class="sub">-</span>
                        </p>
                    </div>
                </li>
            </ul>
        </main>
        <nav>
            <!-- 弄张图片来 -->
            <img src="./image/user.png" alt="">
            <p class="all_money">￥0</p>
            <div>去结算</div>
        </nav>
    </div>
</body>
<script>
    let pAllMony=document.querySelector(".all_money")
    let addButs=document.getElementsByClassName("add")
    let subButs=document.getElementsByClassName("sub")
    let money=0;//总价钱
    
    for(let i=0;i<addButs.length;i++)
    {
        addButs[i].onclick=function(){
            // 1.修改数量
            // HTML DOM element.nextElementSibling属性; 返回指定元素之后的下一个兄弟元素
// 使用nextElementSibling属性返回指定元素之后的下一个兄弟元素，（即：相同节点树层中的下一个元素节点）。

// nextSibling属性与nextElementSibling属性的差别：

// nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
// nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
// nextElementSibling属性为只读属性。

            let n=this.nextElementSibling.innerHTML/1
            // /1是为了隐式转换为number型变量
            this.nextElementSibling.innerHTML=(n+1);
            // 2.修改总价
            // 由于我们在if之后，给span添加了price属性，在下面我们要进行..获取
            let thisPrice=this.previousElementSibling.getAttribute("price")/1
            // 隐式转换真是无处不在
            money +=thisPrice;
            pAllMony.innerHTML="￥"+money;
           
        }
        subButs[i].onclick=function(){
            // 1.修改数量
            let n=this.previousElementSibling.innerHTML/1 
          
            if(n<=0){
                return;
            }
            //思考下这里的if,
            // 这里后来改成上一个标签，一开始写成下一个标签（复制的上面）
            this.previousElementSibling.innerHTML=(n-1);
            //2.修改总价钱
            // 这里和加不同的是，我们要获取层级变多，主要还是对this.previousElementSibling的理解,
            // 在这里大体是上一个标签
            let thisPrice=this.previousElementSibling
            .previousElementSibling
            .previousElementSibling
            .getAttribute("price")/1;
            money -=thisPrice;
            pAllMony.innerHTML="￥"+money;

        }
    }

</script>
</html>