前端JavaScript购物车模块

效果

 主要功能:

左侧滚动条

 购物车加减功能

麦当劳购物车

分析结构

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

购物车部分

左上角细节圆角

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

11

分析结构

 不多说,上代码

<!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>

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白村第一深情

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值