购物车案例

最新推荐文章于 2021-07-22 16:42:32 发布
原创 最新推荐文章于 2021-07-22 16:42:32 发布 · 245 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

html部分

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="../css/shop.css">
</head>

<body>
    <table class="shop">
        <tbody class="shopS">
        </tbody>
    </table>
</body>
<script src="../js/model.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/shop.js"></script>


</html>

css部分

* {
    padding: 0;
    margin: 0;
}

.shop {
    width: 1000px;
    height: 581px;
    margin: 50px auto;
}

.nav {
    height: 33px;
    border-bottom: 2px solid rgb(217, 217, 217);
    background-color: rgb(246, 245, 245);
}

tr {
    display: flex;
    border-bottom: 1px solid #ccc;
}

td {
    display: flex;
    flex-direction: column;
}

td span {
    font-size: 10px;
}

.Son1 {
    width: 540px;
}

.Son2 {
    width: 100px;
    flex-direction: row;
    cursor: pointer;
}

.Son2 span {
    padding: 0 4px;
    border: 1px solid #ccc;
    user-select: none;
}

.Son2 span:nth-of-type(1) {
    border-right: none;
}

.Son2 span:nth-of-type(2) {
    border-left: none;
}

.Son3 {
    width: 135px;
}

.Son3 b {
    color: orangered;
}

.Son4 {
    width: 150px;
}

.Son4 span:nth-of-type(2) {
    color: rgb(41, 141, 70);
}

.Son5 {
    width: 70px;
}

th {
    text-align: left;
    line-height: 33px;
}

.shops {
    width: 80px;
    height: 60px;
}

.shopList {
    height: 100px;
    align-items: center;
}

.shopList .Son5 {
    align-items: center;
}

.imgTd {
    width: 105px;
    align-items: center;
}

.titleTd {
    width: 435px;
}

.titleTd h6 {
    font-size: 10px;
    color: rgb(0, 151, 219);
}

.count {
    width: 25px;
    height: 19px;
    text-align: center;
}

.countall {
    justify-content: space-between;
    height: 130px;
}

.countall td {
    justify-content: center;
}

.iconL {
    display: inline-block;
    border: 5px solid transparent;
    border-right-color: black;
}

.iconR {
    display: inline-block;
    border: 5px solid transparent;
    border-left-color: white;
}

.countRight span:nth-of-type(1) b {
    color: orangered;
}

.countRight span:nth-of-type(2) {
    line-height: 40px;
    color: rgb(41, 141, 70);
}

.countRight button {
    background-color: orangered;
    border-radius: 13px 0 0 13px;
    border: none;
    width: 190px;
    height: 30px;
    color: white;
    font-weight: bolder;
    padding-left: 9px;
}

js部分
model.js

var lists = [
    {
        img: 'vans.jpg',
        title: 'Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品',
        id: 2001,
        size: '37',
        oriPrice: 399.99,
        nowPrice: 299.98
    },
    {
        img: 'bag.png',
        title: 'Gucci Dressage Original GG Ganvas Tote Bag 296850 Coffe',
        id: 24234,
        size: 'Defalt',
        oriPrice: 180.96,
        nowPrice: 120.69
    },
    {
        img: 'converse.jpg',
        title: 'CONVERSE匡威官方 Batman 80th 蝙蝠侠80周年联名 高帮 167303C',
        id: 32001,
        size: '37',
        oriPrice: 259.98,
        nowPrice: 209.48
    },
    {
        img: 'bsdon.jpg',
        title: '波司登冬季新款大毛领羽绒服女中长款厚款防寒冬天外套B80141038',
        id: 5884,
        size: '160/84A',
        oriPrice: 1399.99,
        nowPrice: 1099.30
    },
    {
        img: 'olay.jpg',
        title: 'Olay玉兰油大红瓶新生塑颜金纯面霜50g 补水保湿修护紧致护肤霜女',
        id: 6854,
        size: '50g/ml',
        oriPrice: 268.00,
        nowPrice: 200.00
    }
]

shop.js部分

window.onload = function () {
    var shopS = getEle(".shopS")[0];
    var countall = getEle(".countall")[0];
    var cartall = 0;
    var savetall = 0;

    var list = `<tr class="nav">
                    <th class="Son1">Your Item(s)</th>
                    <th class="Son2">Quantity</th>
                    <th class="Son3">Price</th>
                    <th class="Son4">Total Price</th>
                    <th class="Son5">Remove</th>
                </tr>`
    for (let i = 0; i < lists.length; i++) {
        cartall += lists[i].nowPrice;
        savetall += lists[i].oriPrice - lists[i].nowPrice;
        list += `<tr class="shopList">
                    <td class="imgTd"><img class="shops" src="../images/${lists[i].img}" alt="" srcset=""></td>
                    <td class="titleTd">
                        <h6>${lists[i].title}</h6>
                        <span>ID:#${lists[i].id}</span>
                        <span>Size:${lists[i].size}</span>
                    </td>
                    <td class="Son2">
                        <span class="reduce">-</span>
                        <input type="text" value="1" class="count">
                        <span class="add">+</span>
                    </td>
                    <td class="Son3">
                        <del class="oriPrice">${lists[i].oriPrice} py6</del>
                        <b class="nowPrice">${lists[i].nowPrice} py6</b>
                    </td>
                    <td class="Son4">
                        <span class="priceAll">${lists[i].oriPrice} py6</span>
                        <span class="saveAll">You save ${(lists[i].oriPrice - lists[i].nowPrice).toFixed(2)} py6</span>
                    </td>
                    <td class="Son5">
                        <img class="del" src="../images/del.png" alt="">
                    </td>
                </tr>`
    }
    list += `<tr class="countall">
                <td><span><i class="iconL"></i> Continue Shopping</span></td>
                <td class="countRight">
                    <span class="cartall">Cart Total: <b>${cartall.toFixed(2)} py6.</b></span>
                    <span class="savetall">Your Total Saving:${savetall.toFixed(2)} py6.</span>
                    <button>PROCEED TO CHECKOUT <i class="iconR"></i></button>
                </td>
            </tr>`
    shopS.innerHTML = list;
    // shopS.insertBefore(list, countall)


    shopS.onclick = function (e) {
        var target = e.target;
        var nowTr = target.parentElement.parentElement;
        var tobody = target.parentElement.parentElement.parentElement;
        var count = nowTr.getElementsByClassName("count")[0];
        var priceAll = nowTr.getElementsByClassName("priceAll")[0];
        var saveAll = nowTr.getElementsByClassName("saveAll")[0];
        var oriPrice = nowTr.getElementsByClassName("oriPrice")[0];
        var nowPrice = nowTr.getElementsByClassName("nowPrice")[0];
        var cartallspan = getEle(".cartall")[0];
        var savetallspan = getEle(".savetall")[0];
        nowPrice = parseFloat(nowPrice.innerHTML);
        oriPrice = parseFloat(oriPrice.innerHTML);
        console.log(cartall, savetall);
        switch (target.className) {
            case 'add':
                count.value++;
                priceAll.innerHTML = (count.value * nowPrice).toFixed(2) + ' py6';
                saveAll.innerHTML = 'You save ' + (count.value * (oriPrice - nowPrice)).toFixed(2) + ' py6';
                cartall += nowPrice;
                savetall += (oriPrice - nowPrice);
                cartallspan.innerHTML = `Cart Total: <b>${cartall.toFixed(2)} py6.</b>`;
                savetallspan.innerHTML = `Your Total Saving:${savetall.toFixed(2)} py6.`;
                break;
            case 'reduce':
                console.log(count.value)
                if (count.value == 0) {
                    break;
                }
                count.value--;
                priceAll.innerHTML = (count.value * nowPrice).toFixed(2) + ' py6';
                saveAll.innerHTML = 'You save ' + (count.value * (oriPrice - nowPrice)).toFixed(2) + ' py6';
                cartall -= nowPrice;
                savetall -= (oriPrice - nowPrice);
                cartallspan.innerHTML = `Cart Total: <b>${cartall.toFixed(2)} py6.</b>`;
                savetallspan.innerHTML = `Your Total Saving:${savetall.toFixed(2)} py6.`;
                break;
            case 'del':
                var flag = confirm("亲确认取消此订单吗？");
                if (flag) {
                    tobody.removeChild(nowTr);
                    cartall -= nowPrice * count.value;
                    savetall -= (oriPrice - nowPrice) * nowPrice * count.value;
                    cartallspan.innerHTML = `Cart Total: <b>${cartall.toFixed(2)} py6.</b>`;
                    savetallspan.innerHTML = `Your Total Saving:${savetall.toFixed(2)} py6.`;
                }
                break;
        }
    }
}

utils.js部分

// 计算任意数字之和
function sum() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i]
    }
    return sum;
}

// 计算任意数字的阶乘Factorial
function Factorial(a) {
    if (a == 2) {
        return 2
    }
    return a * Factorial(a - 1);
}
//求任意两个数的最大公约数Common divisor  或最小公倍数Common multiple
function mGC(n1, n2, detail) {
    var yue = 1;
    for (var i = 2; i <= 9;) {
        if (n1 % i == 0 && n2 % i == 0) {
            n1 /= i;
            n2 /= i;
            yue = yue * i;
        } else {
            i++;
        }
    }
    if (detail == "max")
        return yue * n1 * n2
    return yue
}

//求任意两个数的最大公约数Common divisor
function maxGCD(n1, n2) {
    return mGC(n1, n2, "min")
}

//求任意两个数的最小公倍数Common multiple
function minGCM(n1, n2) {
    return mGC(n1, n2, "max")
}


// 求任意数中的最小值
function minNum() {
    var min = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (min > arguments[i]) {
            min = arguments[i]
        }
    }
    // console.log(min);
    return min;
}

// 求任意数中的最大值
function maxNum() {
    var max = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i]
        }
    }
    return max;
}
//判断质数
function zhiShu(num) {
    var flag = true;
    for (var i = 2; i < num; i++) {
        if (num % i == 0) { //满足这个条件  说明有因子了  不是质数
            flag = false; //不是质数
            break;
        }
    }
    //如果假设成立  1不是素数
    return flag && num != 1 ? true : false
}
// 生成一个任意范围内的随机整数
function getRandomNum(a, b) {
    if (a > b) {
        return parseInt(Math.random() * (a - b + 1)) + b
    }
    return parseInt(Math.random() * (b - a + 1)) + a
}

// 封装一个随机颜色（不依赖 getRandomNum(a, b))
function getRandomColor(a) {
    if (a === 16) {
        var str = '0123456789abcdef';
        var res = '';
        for (var i = 0; i < 6; i++) {
            var idx = parseInt(Math.random() * 16);
            res += str[idx];
        }
        return '#' + res;
    }

    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')'
}

function getColor(a) {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    if (a == 16) {
        r = r.toString(16);
        g = g.toString(16);
        b = b.toString(16);
        return '#' + r + g + b;
    }
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}
/* 
    封装一个函数来写事件的兼容
    可变的东西都可以当成函数的参数
    【1】事件源
    【2】事件类型
    【3】事件出来函数
*/
function bindEvent(ele, type, fn) {
    // 做兼容判断
    if (ele.addEventListener) {
        ele.addEventListener(type, function() {
            fn();
        })
    } else {
        ele.attachEvent('on' + type, function() {
            fn();
        })
    }
}

/* 
    封装获取元素的函数：
    函数的实参形式：
    【1】#id名    表示通过id名获取元素
    【2】.class名 表示通过class名获取元素
    【3】标签名    表示同给标签名获取元素
*/
function getEle(ele) {
    // substr(参数1，参数2)
    // 参数1表示开始的索引位置
    // 参数2表示截取个数，如果没有参数2表示从开始位置截取到最后
    var str1 = ele.substr(0, 1); //拿到前面的字符
    var str2 = ele.substr(1);

    if (str1 === '#') {
        return document.getElementById(str2)
    } else if (str1 === '.') {
        return document.getElementsByClassName(str2);
    } else {
        return document.getElementsByTagName(ele);
    }
}

//以对象的形式封装正则判断
var obj = {
    user: function(str) {
        var reg = /^[a-zA-Z|_]{1}\w{4,17}$/; //字母或下划线开头的用户名
        return reg.test(str);
    },
    tel: function(str) {
        var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; //手机号码
        return reg.test(str);
    },
    IDnumber: function(str) {
        var reg = /^\d{15}|\d{18}$/; //身份证号(15位、18位数字);
        return reg.test(str);
    },
    email: function(str) {
        var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //Email地址
        return reg.test(str);
    },
    date: function(str) {
        var reg = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/; //日期
        return reg.test(str);
    }
}

images部分
bag.png
bag.png
bsdon.jpg
bsdon.jpg
converse.jpg
converse.jpg
del.png
olay.jpg
olay.jpg
vans.jpg
vans.jpg

购物车实战案例
weixin_42454678的博客
10-26 1066
1. 创建ego-item-web购物车系统 (1) 谈谈购物车的实现过程 用户登录后点击要加入购物车的商品，前台会将商品的id返回给后台，根据商品的id查询数据库，将查询的数据存储到Redis数据库中，商品的id为key，商品的详细信息为value，存储，再将map集合储存到用户的map集合中，用户id为key，存储商品信息的map为value，存储到Redis中。 (2) 谈谈购物车的数据模型...
购物车实例
01-27
通过Session机制实现的简单购物车实例，同时里面也有传递带中文参数的转码设置
精选资源
前端Vue实现购物车案例
04-08
Vscode编译软件 + 使用Vue实现 购物车页面 使用步骤： 1、下载资源，使用vscode打开 2、在终端里安装所有包 npm i 3、运行项目 npm run serve 4、访问 http://localhost:8080/
前端：jQuery,购物车案例
03-28
实现步骤： (1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 ...(7)每一个主体商品复选框被选中的时候判断全选按钮是否需要被选中
购物车案例源码，包含全部代码
03-28
全部源码可自行免费下载，学习，练习 功能：(1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 ...(7)每一个主体商品复选框被选中的时候判断...
纯JS实现前端购物车案例.rar
04-08
购物车案例功能介绍：1、添加购物车，清单库存数量会对应减少，库存不足会警告；2、从购物车删除，库存将返回清单，总价相应变化；3、点击"-"，数量会返回到清单库存；4、点击"+"，清单中库存会减少，库存不足会警告...
react-redux的美团点餐加购物车案例
10-27
总的来说，这个“react-redux的美团点餐加购物车案例”将涵盖React组件设计、Redux状态管理和React与Redux的整合，以及可能涉及到的异步操作和测试策略。通过实践这个案例，开发者不仅可以加深对React和Redux的理解...
购物车的完美例子
08-31
购物车一直算是Android不算太简单的逻辑，所以一般实现起来还要一定的时间，这个Demo 采用的RecyclerView嵌套RecyclerView，可以提交多个商品的购物车；
购物车案例分析
11-14
使用图解的方法简单明了的方式说明购物车的设计
一个简单购物车案例.html
04-24
一个简单的vue购物车案例，希望能够对你们有用，希望各位不要嫌弃。
案例：购物车 删除
青衣的博客
09-02 466
$(function() { getSum(); function getSum() { var count = 0; var money = 0; $(".itxt").each(function(i, ele) { count += parseInt($(ele).val()); }); $(".amount-sum em").text(count); $(".p
案例 - 购物车
Henry_ID的博客
07-22 935
4. 案例 - 购物车 4.0 案例-购物车-项目初始化 目标: 初始化新项目, 清空不要的东西, 下载bootstrap库, 下载less模块 vue create shopcar yarn add bootstrap yarn add less less-loader@5.0.0 -D 图示: 按照需求, 把项目页面拆分成几个组件, 在components下创建 MyHeader组件 MyFooter组件 MyGoods组件 - 商品 MyCount组件 然后引入到
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值