案例13-购物车-重要！

最新推荐文章于 2021-04-10 10:45:46 发布
最新推荐文章于 2021-04-10 10:45:46 发布
阅读量126 收藏
点赞数
分类专栏： 案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kino2046/article/details/100839161
版权

第一步：

第二步：闭包

第三步：完成剩余部分

 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="./index.css">

    <title>Document</title>

</head>

<body>

    <div class="box">

        <div class="container">

            <ul id="list">

                <li>

                    <div class="list-left">

                        <input type="button" class="minus" value="-" />

                        <span class="n">0</span>

                        <input type="button" class="plus" value="+" />

                    </div>

                    <div class="list-right">

                        <span>单价：</span>

                        <em class="price">12.5</em>元

                        <span>小计：</span>

                        <em class="count">0</em>元

                    </div>

                </li>

                <li>

                    <div class="list-left">

                        <input type="button" class="minus" value="-" />

                        <span class="n">0</span>

                        <input type="button" class="plus" value="+" />

                    </div>

                    <div class="list-right">

                        <span>单价：</span>

                        <em class="price">13.5</em>元

                        <span>小计：</span>

                        <em class="count">0</em>元

                    </div>

                </li>

                <li>

                    <div class="list-left">

                        <input type="button" class="minus" value="-" />

                        <span class="n">0</span>

                        <input type="button" class="plus" value="+" />

                    </div>

                    <div class="list-right">

                        <span>单价：</span>

                        <em class="price">14.5</em>元

                        <span>小计：</span>

                        <em class="count">0</em>元

                    </div>

                </li>

                <li>

                    <div class="list-left">

                        <input type="button" class="minus" value="-" />

                        <span class="n">0</span>

                        <input type="button" class="plus" value="+" />

                    </div>

                    <div class="list-right">

                        <span>单价：</span>

                        <em class="price">15.5</em>元

                        <span>小计：</span>

                        <em class="count">0</em>元

                    </div>

                </li>

                <li>

                    <div class="list-left">

                        <input type="button" class="minus" value="-" />

                        <span class="n">0</span>

                        <input type="button" class="plus" value="+" />

                    </div>

                    <div class="list-right">

                        <span>单价：</span>

                        <em class="price">16.5</em>元

                        <span>小计：</span>

                        <em class="count">0</em>元

                    </div>

                </li>

            </ul>

            <p>商品合计共：<strong>0</strong>件，共花费了：<strong>0</strong>元</p>

            <p>其中最贵的已选商品单价是：<strong>0</strong>元</p>

        </div>

    </div>

    <script>

 

/**

 * 控制当前一列中的功能

 *  - 点击第一个 - 号，需要控制 数量发生改变（减少）。限制数量不能小于0

 *  - 点击第一个 + 号，需要控制 数量发生改变（增加）。限制数量不能超过10

 * 根据数量，计算小计结果

 * 

 * 1. 统计商品总的件数

 * 2. 统计花费的总数

 * 3. 从已选商品中，找出最贵的单价

 */

var plus = document.querySelectorAll('.plus');

var minus = document.querySelectorAll('.minus');

var ns = document.querySelectorAll('.n');

var price = document.querySelectorAll('.price');

var count = document.querySelectorAll('.count');

var strong = document.querySelectorAll('strong');

var len = ns.length;

//批量给元素添加事件

for(var i = 0;i<len;i++){

    todo(i);

}

function todo(index){

    //控制+号

    plus[index].onclick = function () {

        changeNum(index,+1);

    }

    //控制-号

    minus[index].onclick = function () {

        changeNum(index,-1);

    }

}

//控制数量变化的封装函数 , index指的是下标,change指的是加还是减

function changeNum(index,change){

    var num = +ns[index].innerHTML + change;

    switch(true){

        case num > 10:

            alert('最大限购10件');

            num = 10;

            return;

        case num < 0:

            alert('已经不能再少了哦');

            num = 0;

            return;

    }

    ns[index].innerHTML = num;

    count[index].innerHTML = num * (price[index].innerHTML * 10) / 10;

    total();

}

//求总数

function total(){

    //总件数

    var subTotal = 0;

    //总花费

    var numTotal = 0;

    //找到已选商品中，单价最高的

    var max = 0;

    for(var i=0;i<len;i++){

        subTotal += +ns[i].innerHTML;

        numTotal += +count[i].innerHTML;

        if(ns[i].innerHTML != 0){

            console.log(price[i].innerHTML);

            // if (price[i].innerHTML>max){

            //     max = price[i].innerHTML;

            // }

            max = price[i].innerHTML > max ? price[i].innerHTML:max;

        }

    }

    strong[0].innerHTML = subTotal;

    strong[1].innerHTML = numTotal;

    strong[2].innerHTML = max;

}

    </script>

</body>

</html>

kino2046
关注
专栏目录
jQuery学习案例-购物车
03-08
在"当当购物车5.0"案例中，页面可能包含商品列表、购物车按钮、数量输入框等元素。jQuery提供了简洁的API来选择、添加或修改这些元素。例如，`$("#cartButton")`会选择ID为"cartButton"的元素，而`$(".product")`则...
input标签type="button"时，value值不显示
qq_39594499的博客
04-16 2896
input标签type="button"时，value值不显示 第一幅图片上面，有一个按钮类型的按钮一直不显示上面的值。最后终于找到原因，结果是因为我复制网页的上面的代码的时候把网页上面的样式也一起复制下来了（第二幅图片），而且编译器并没有明显的红色报错，后来仔细检查后编译器也有提示。最后把这个样式去掉后终于成功了。 所以在网页上面复制代码的时候最好曲线去txt文件中粘贴一下去掉样式。 ...
【数据分析】零售商品案例——购物车搭配品分析
kyra1997的博客
08-19 606
针对商品a、b连带购物关系。
Apriori关联分析案例——购物车的关联分析
热门推荐
柳小葱的博客
04-10 1万+
1.Apriori关联分析的介绍 这一部分可以看我的上一篇博文，里面主要介绍了关联分析的原理。 链接: python机器学习之关联分析（Apriori）. 2.案例背景与分析过程 现代商品种类繁多，顾客往往会纠结选择买啥，尤其对于选择困难症的顾客来说，选择商品更是难上加难。繁杂的选购往往会给顾客带来疲惫的购物体验。对于部分商品，比如面包和牛奶，薯片和可乐等，是顾客经常同时购买的东西，当这些东西距离十分遥远时，就会减小顾客的购买欲望。因此，为了获取最大销售利润，我们需要了解销售什么样的商品、采用什么样的促销手
数据挖掘--购物车 推荐算法
hbbdxs的专栏
04-12 2555
http://mayuxiang.sinaapp.com/?p=216  关注另一种数据挖掘算法，这种算法主要用于频繁项集的发现。 熟悉网上购物的同学，一定都了解什么是“购物车” ，或者至少知道在超市中购物所推的购物车吧。亚马逊最早提出了一个算法，就是基于购物车的内容来为用户做出新的推荐。 一个简单的例子来看看什么是A-priori 算法 #!/usr/bin/python #cod
[转载]多角度看数据挖掘经典案例-购物篮分析
Wis_cool的专栏
04-01 3462
关联分析是数据挖掘体系中重要的组成部分之一，其代表性的案例即为“购物篮分析”。我们以数据挖掘软件Clementine自带的一个购物篮分析的数据为例，从多个方面来探讨这一方面的内容。   关联分析要解决的主要问题是：一群用户购买了很多产品之后，哪些产品同时购买的几率比较高？买了A产品的同时买哪个产品的几率比较高？可能是由于最初关联分析主要是在超市应用比较广泛，所以又叫“购物篮分析”，英文
微信小程序开发-仿同乐居商城-购物车合算案例源码.zip
11-21
在微信小程序开发中，"仿同乐居商城-购物车合算案例源码"是一个典型的应用场景，旨在帮助开发者理解并实现类似电商应用中的购物车功能。在这个项目中，我们将探讨以下几个关键知识点： 1. **微信小程序框架**： ...
电子商务基础-案例-38929.6590509259.1264154.docx
最新发布
12-17
珠穆朗玛网上超市的案例揭示了电子商务在中国的早期发展和成功要素，包括适应市场环境、创新购物流程、多元化支付方式、有效的广告策略以及品牌建设的重要性。这些经验对于当前及未来的电子商务从业者来说，仍然具有...
ASP.NET购物车案例.zip
03-30
ASP.NET购物车案例是一个基于微软的ASP.NET技术与JavaScript实现的Web应用程序，旨在提供一个基本的在线购物体验。这个案例展示了如何在Web页面上创建一个交互式的购物车，包括商品选择、数量增减以及总价计算等功能...
js代码-唯品会购物车抓取
07-15
在IT行业中，JavaScript是一种广泛使用的编程语言，尤其在前端开发中扮演着重要角色。本项目“js代码-唯品会购物车抓取”涉及到的是利用JavaScript技术来抓取和解析唯品会网站上的购物车数据。这个过程通常被称为...
案例25：随机打乱图片
kino2046的博客
03-26 1053
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档</title> <linkrel="styl...
案例6-输入正确的QQ号码
kino2046的博客
09-06 874
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...
案例5-九九乘法表-颠倒的
kino2046的博客
09-05 576
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C...
案例：鼠标滚轮改变div高度
kino2046的博客
04-30 522
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-e...
案例3-选项卡-自定义属性-索引值-btn[ i ].index = i
kino2046的博客
09-01 505
<script> var btns = document.querySelectorAll(".btn"); var inners = document.querySelectorAll("div"); /* 点击第 0 个按钮，需要 让第0个div 也对应显示 点击第 1 个按钮，需要 让第1个div 也对应显示 点击第 2 个按钮，需要 让第...
案例10-修改input的值-重要！
kino2046的博客
09-09 483
工作中重复的功能模块先删除，简化，第一个模块实现了，后面的循环就可以 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initi...
案例26：查找替换文字
kino2046的博客
03-26 446
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <linkrel="stylesheet"href="./index.css"> &lt...
案例：仿京东放大镜
kino2046的博客
04-30 436
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <meta...
案例27：百度音乐全选-onchange监听单选框复选框
kino2046的博客
04-30 372
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <me...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值