jQuery 实现“购物车计算器”

最新推荐文章于 2022-07-12 20:51:35 发布

♛琉璃

最新推荐文章于 2022-07-12 20:51:35 发布

阅读量360

点赞数

分类专栏： JavaScript 文章标签： JavaScript jQuery

本文链接：https://blog.csdn.net/qq_44419617/article/details/111463225

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="price.css" />
</head>

<body>
    <div class="wrap">
        <div class="box">
            <ul class="list">
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>12.5元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>10.5元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>8.5元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>8元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        单价：<strong>14.5元 </strong> 小计：<strong>0元</strong>
                    </span>
                </li>
            </ul>
            <div class="info">
                <span>商品共合计：<em>0</em>件</span>
                <span>共花费了：<em>0</em>元</span>
                <br />
                <br />
                <span>其中最贵的商品单价是：<em>0</em>元</span>
            </div>
        </div>
    </div>
    <script src="./jquery-1.11.3.js"></script>
    <script>
            /* 
            1、获取所有的i标签
            2、给每一个i标签绑定点击事件
             */
             let $btns = $('.list i');
             let $infoEms = $('.info em'); // 获取下半部分里的所有em元素
             let $ems = $('.list em'); // 获取上部分所有的em元素
             let $strongs = $('.list strong');

             $btns.click(function(){
                 let index = $(this).index() // 获取当前元素在自己所有的兄弟中的索引
                 let $count = $(this).siblings('em'); // 获取显示数量的em元素
                 let num = parseFloat($count.html()); // 获取当前em的内容（购买数量）
                 let $strong = $count.siblings('span').find('strong'); // 获取所有的strong元素（单价和小计）
                 let price = parseFloat($strong.eq(0).html()) // 获取当前商品的单价
                //  console.log($strong)
                 if(index == 0) {
                      // 点击的减号
                        num-- ;
                        num<0?num = 0:null; //下限
                 }
                 else {
                     // 点击的加
                     num++;
                     num>10 ? num=10 : null;//上限
                 };
                 $count.html(num); // 把数量设置回去
                 $strong.eq(1).html(num*price+'元'); // 把小计设置回去
                 computed();
             })

             function computed(){
                 //计算商品的总数量、商品的总价格、最贵的商品单价
                //先初始化几个变量用来累加商品的数量和总价格，再初始化一个数组，用来存放购买商品的单价
                let allCount = 0; // 初始化一个累加数量的变量
                let allPrice = 0; // 初始化一个累加总计的变量
                let ary = [0]; // 初始化一个存储商品单价的数组

                //先计算总数量
                //获取list里的所有em中的数量，然后循环累加起来，再设置到页面上（info里的第一个em）
                // 循环上半部分所有的em元素
                $ems.each(function(index,item){
                    //注意item是原生元素
                    // 把每一个em元素的内容累加到allCount
                    allCount+=parseFloat($(item).html());
                });
                 
                /* 
                1、获取所有的strong标签
                2、循环所有的strong标签
                3、判断当前strong的索引，如果是奇数，那就是小计的那个标签
                */
                $strongs.each(function(index,item){
                    // 如果strong元素的索引为偶数那就是单价那个元素，如果是奇数那就是小计那个元素
                    if(index%2===1){
                        // 把所有的小计元素的内容累加到allPrice里
                        allPrice+=parseFloat($(item).html())
                    }
                    else {
                        // 如果当前单价对应的小计不为位0，那就把单价push到ary数组里，用来一会在里面获取最大的单价
                        if(parseFloat($(item).next('strong').html()) !== 0){
                            ary.push(parseFloat($(item).html()))
                        }
                    }
                })
                 
                 /*
                 $strongs.each(function(index,item){
                    let indexs=$(this).index();//获取当前元素对应的索引

                    if(indexs==1){
                        let subtotal=parseFloat($(this).html());

                        let price=parseFloat($(this).prev().html());
                        if(subtotal){
                            ary.push(price);
                        }

                        allPrice+=subtotal;
                    }
                 });
                 */

                // 以下三句就是把内容重新放回页面的元素中
                 $infoEms.eq(0).html(allCount);
                 $infoEms.eq(1).html(allPrice);
                 $infoEms.eq(2).html(Math.max(...ary));
             }
    </script>
</body>

</html>

css

.wrap {
	width: 764px;
	height: 800px;
	margin: 0 auto;
	/* background: url(bg.png) no-repeat center center; */
	display: flex;
}

.box {
	width: 479px;
	height: 591px;
	margin: auto;
	background: url(bg1.png) no-repeat center center;
	position: relative;
}
.list {
	width: 100%;
	position: absolute;
	left: 0;
	top: 138px;
}
.list li {
	margin-bottom: 18px;
	width: 100%;
	height: 44px;
	overflow: hidden;
	box-sizing: border-box;
	padding-left: 44px;
}
.list li i {
	width: 52px;
	height: 44px;
	float: left;
	margin-right: 10px;
	cursor: pointer;
}
.list li i:nth-of-type(1) {
	background: url(sub.png) no-repeat center center;
}
.list li i:nth-of-type(2) {
	background: url(add.png) no-repeat center center;
}
.list li em {
	width: 44px;
	height: 36px;
	float: left;
	background: #fff;
	border-radius: 5px;
	font: 16px/36px arial;
	text-align: center;
	margin-right: 10px;
}
.list li span {
	/* width: 214px; */
	width: 240px;
	height: 36px;
	border-radius: 5px;
	float: left;
	margin-left: 10px;
	background: #171818;
	color: #878787;
	line-height: 36px;
	box-sizing: border-box;
	padding-left: 15px;
}
.list li span strong {
	margin-right: 10px;
}

.info {
	width: 100%;
	height: 140px;
	position: absolute;
	left: 0;
	bottom: 0;
	color: #878787;
	box-sizing: border-box;
	padding: 20px 0 0 42px;
}

.info em {
	width: 46px;
	height: 36px;
	display: inline-block;
	background: #fff;
	border-radius: 5px;
	font: 16px/36px arial;
	text-align: center;
	margin: 0 10px 0;
}
.info span:nth-of-type(2) em {
	width: 66px;
}
.info span:nth-of-type(3) em {
	width: 66px;
}
.info span:nth-of-type(1) {
	margin-right: 20px;
}

♛琉璃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现“购物车计算器”

html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body, ul, li { margin: 0; padding: 0; list-style: none; ..
复制链接

扫一扫