jjzjj

小米商城购物车案例实现

toweiwei 2023-03-28 原文

首先，给大家看下效果图：

 

 该案例包含的功能有：可以对商品价格进行计算，用户可以对商品数量进行增加和勾选，底部有显示用户勾选商品的件数，还有商品总价的结果，此外，用户还有对商品进行移除的功能。

以下是代码部分：

html+css代码：

<!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>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    header {
        height: 30px;
        background-color: rgb(61, 61, 61);
    }

    header>ul {
        margin-right: 100px;
    }

    li {
        list-style: none;
        float: right;
        line-height: 30px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    header a {
        text-decoration: none;
        color: #ccc;
        font-size: 14px;
    }

    header li:hover {
        background-color: rgb(255, 103, 0);
    }
    body{
        background-color: rgb(245,245,245);
    }
    .banner {
        height: 102px;
        width: 100%;
        background-color: #fff;
        border-bottom: 2px solid rgb(255, 103, 0);
    }

    .banner_left {
        width: 50%;
        height: 102px;
        float: left;
    }

    .banner_left img {
        width: 48px;
        height: 48px;
        margin-left: 100px;
        float: left;
        margin-top: 30px;
    }

    .banner_left>:nth-child(2) {
        font-size: 28px;
        font-weight: 400;
        line-height: 48px;
        margin-left: 40px;
        float: left;
        margin-top: 30px;
    }

    .banner_left>:nth-child(3) {
        font-size: 14px;
        margin-left: 10px;
        margin-top: 50px;
        float: left;
        color: #999999;
    }
    .carList table{
        margin: 0 auto;
        background-color: #fff;
        margin-top: 20px;
        border: none;
    }
    .carList table th,.carList table td{
        border-collapse: collapse;
    }
    .carList table tbody img{
        width: 80px;
        height: 80px;
    }
    .carList table td{
        border: 0;
    }
    .resultPrice{
        width: 840px;
        height: 50px;
        margin: 0 auto;
        background-color: #fff;
        margin-top: 20px;
    }
</style>

<body>
    <header>
        <ul>
            <li><a href="javascript:;">我的订单</a></li>
            <li><a href="javascript:;">我的收藏</a></li>
            <li><a href="javascript:;">购物车</a></li>
            <li><a href="javascript:;">欢迎admin</a></li>
        </ul>
    </header>
    <section>
        <div class="banner">
            <div class="banner_left">
                <img src="./images/logo-mi2.png" alt="">
                <span>我的购物车</span>
                <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
            </div>
            <div class="banner_right"></div>
        </div>
        <div class="carList">
            <table border="0">
                <thead>
                    <th><input type="checkbox" id="selectAll"> 全选</th>
                    <th width="150px">商品名称</th>
                    <th width="100px">商品图片</th>
                    <th width="100px">单价</th>
                    <th >数量</th>
                    <th width="100px">小计</th>
                    <th width="100px">操作</th>
                </thead>
                <tbody>
                    <tr>
                        <td align="center"><input type="checkbox" class="check"></td>
                        <td align="center">短袖</td>
                        <td align="center"><img src="https://gw.alicdn.com/bao/uploaded/i2/2207254512241/O1CN012mppDy1SQQHDRIWRC_!!0-item_pic.jpg_300x300q90.jpg_.webp" alt=""></td>
                        <td align="center"><span class="price">39</span>元</td>
                        <td>
                            <button style="width: 20px;" class="deBtn">-</button>
                            <input type="number" value="1" class="itemCount">
                            <button style="width: 20px;" class="inBtn">+</button>
                        </td>
                        <td align="center"><span class="totalPrice">39.00</span>元</td>
                        <td align="center"><button class="rmItem">移除商品</button></td>
                    </tr>
                    <tr>
                        <td align="center"><input type="checkbox" class="check"></td>
                        <td align="center">包包</td>
                        <td align="center"><img src="https://gw.alicdn.com/bao/uploaded/i3/3937219703/O1CN01YDs4Ui2LY1nQa4Gi2_!!3937219703-0-C2M.jpg_300x300q90.jpg_.webp" alt=""></td>
                        <td align="center"><span class="price">13.9</span>元</td>
                        <td>
                            <button style="width: 20px;" class="deBtn">-</button>
                            <input type="number" value="1" class="itemCount">
                            <button style="width: 20px;" class="inBtn">+</button>
                        </td>
                        <td align="center"><span class="totalPrice">13.90</span>元</td>
                        <td align="center"><button class="rmItem">移除商品</button></td>
                    </tr>
                    <tr>
                        <td align="center"><input type="checkbox" class="check"></td>
                        <td align="center">Redmi Note 11Pro</td>
                        <td align="center"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt=""></td>
                        <td align="center"><span class="price">1799</span>元</td>
                        <td>
                            <button style="width: 20px;" class="deBtn">-</button>
                            <input type="number" value="1" class="itemCount">
                            <button style="width: 20px;" class="inBtn">+</button>
                        </td>
                        <td align="center"><span class="totalPrice">1799.00</span>元</td>
                        <td align="center"><button class="rmItem">移除商品</button></td>
                    </tr>  
                </tbody>
            </table>
        </div>
        <div class="resultPrice">
            <div class="left fl">
                <span class="fl" style="width: 100px;line-height: 50px;text-align: center;color: #999999;">继续购物</span>
                <div class="line fl" style="width: 20px;line-height: 50px;text-align: center;color: #999999;">|</div>
                <div class="fl" style="width: 200px;line-height: 50px;text-align: center;color: #999999;">共<span style="color: rgb(255,103,0);" class="itemAll">0</span>件商品，已选择<span style="color: rgb(255,103,0);" class="selectCnt">0</span>件</div>
            </div>
            <div class="right fr" style="color: rgb(255, 103, 0); line-height: 50px;font-size: 14px;">
                合计：<span class="prices" style="font-size: 20px;">0.00</span>元
                <button style="border: none;background-color: rgb(255, 103, 0);width: 130px;height: 50px;color: #fff;">去结算</button>
            </div>
        </div>
    </section>
</body>
<script src="./car.js"></script>
</html>

 

 

js代码部分：

var deBtns=document.querySelectorAll('.deBtn')
var inBtns=document.querySelectorAll('.inBtn')
var itemCounts=document.querySelectorAll('.itemCount')
var price=document.querySelectorAll('.price')
var totalPrice=document.querySelectorAll('.totalPrice')
var checks=document.querySelectorAll('.check')
var selectAll=document.querySelector('#selectAll')
var itemAll=document.querySelector('.itemAll')
var selectCnt=document.querySelector('.selectCnt')
var rmItems=document.querySelectorAll('.rmItem')
var prices=document.querySelector('.prices')
var sum=0
for(let i=0;i<deBtns.length;i++){
    var cnt=0
    deBtns[i].onclick=function(){
        if(itemCounts[i].value<=1){
            alert('商品数量不能小于1!')
        }else{
            itemCounts[i].value--
            subtotal(i)
            prices.innerHTML=totalUnitDe(i)
        }
    }
    inBtns[i].onclick=function(){
        itemCounts[i].value++
        subtotal(i)
        prices.innerHTML=totalUnitAdd(i)
        
    }
    checks[i].onclick=function(){
        if(isAllSelect()){
            selectAll.checked=true
        }else{
            selectAll.checked=false
        }
        if(this.checked){
            cnt++
            prices.innerHTML=total(i)
        }else{
            cnt--
            prices.innerHTML=totalSUB(i)
        }
        selectCnt.innerHTML=cnt
    }
    selectAll.onclick=function(){
        if(selectAll.checked){
            for(var i=0;i<checks.length;i++){
                checks[i].checked=true

            }
            selectCnt.innerHTML=checks.length
            prices.innerHTML=allPrice()
        }else{
            for(var i=0;i<checks.length;i++){
                checks[i].checked=false
            }
            selectCnt.innerHTML=0
            prices.innerHTML=0
        }
    }
    rmItems[i].onclick=function(){
        rmItem(i)
    }
    itemAll.innerHTML=checks.length
}
function subtotal(index){
    var sum=0
    sum=itemCounts[index].value*price[index].innerHTML
    totalPrice[index].innerHTML=sum.toFixed(2)
}
function total(index){
   sum+=Number(totalPrice[index].innerHTML)
    return sum.toFixed(2)
}
function totalSUB(index){
    sum-=Number(totalPrice[index].innerHTML)
    return sum.toFixed(2)
}
function isAllSelect(){
    var cnt=0
    for(var i=0;i<checks.length;i++){
        if(checks[i].checked){
            cnt++
        }
    }
    return cnt==checks.length
}
function rmItem(index){
    rmItems[index].parentElement.parentElement.remove()
    if(checks[index].checked){
        sum-=itemCounts[index].value*price[index].innerHTML
    }
    prices.innerHTML=sum.toFixed(2)
}

function allPrice(){
    sum=0
    for(var i=0;i<checks.length;i++){
        sum+=itemCounts[i].value*price[i].innerHTML
    }
    return sum
}

function totalUnitAdd(index){
    sum+=Number(price[index].innerHTML)
    return sum.toFixed(2)
}
function totalUnitDe(index){
    sum-=Number(price[index].innerHTML)
    return sum.toFixed(2)
}

 

小米商城spancolorrgbaJavaScript

有关小米商城购物车案例实现的更多相关文章

  1. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  2. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  3. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  4. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  5. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  6. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  7. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

  8. ruby - "public/protected/private"方法是如何实现的，我该如何模拟它？ - 2

    在ruby中，你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的，f2和f4是私有(private)的。内部发生了什么，允许您调用一个类方法，然后更改方法定义？我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定

  9. ruby - 实现k最近邻需要哪些数据？ - 2

    我目前有一个reddit克隆类型的网站。我正在尝试根据我的用户之前喜欢的帖子推荐帖子。看起来K最近邻或k均值是执行此操作的最佳方法。我似乎无法理解如何实际实现它。我看过一些数学公式(例如k表示维基百科页面)，但它们对我来说并没有真正意义。有人可以推荐一些伪代码，或者可以查看的地方，以便我更好地了解如何执行此操作吗？ 最佳答案 K最近邻(又名KNN)是一种分类算法。基本上，您采用包含N个项目的训练组并对它们进行分类。如何对它们进行分类完全取决于您的数据，以及您认为该数据的重要分类特征是什么。在您的示例中，这可能是帖子类别、谁发布了该项

  10. ruby-on-rails - 使用 Ruby 正确处理 Stripe 错误和异常以实现一次性收费 - 2

    我查看了Stripedocumentationonerrors，但我仍然无法正确处理/重定向这些错误。基本上无论发生什么，我都希望他们返回到edit操作(通过edit_profile_path)并向他们显示一条消息(无论成功与否)。我在edit操作上有一个表单，它可以POST到update操作。使用有效的信用卡可以正常工作(费用在Stripe仪表板中)。我正在使用Stripe.js。classExtrasController5000,#amountincents:currency=>"usd",:card=>token,:description=>current_user.email)

随机推荐