简单的购物车和购物车结算

最新推荐文章于 2024-05-15 08:52:02 发布
最新推荐文章于 2024-05-15 08:52:02 发布
阅读量2.7k 收藏 10
点赞数 1
分类专栏： js之简单购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cainiao_xiao_bai/article/details/77817751
版权

购买部分
HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>加入购物车</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/JD.css" />
        <script type="text/javascript" src="../js/cookies.js"></script>
        <script type="text/javascript" src="../js/JD.js"></script>
    </head>
    <body>
        <div id="aside-cart">
            <span>
                <img src="../img/cart.png" />购物车
            </span>
        </div>
        <div id="goods" class="clear">
            <dl data-id="id01">
                <dt>
                    <img src="../img/1.jpg" />
                </dt>
                <dd>
                    <strong>¥259.00</strong>
                    <p>春款真皮坡跟大码单鞋内...</p>
                    <button>加入购物车</button>
                </dd>
            </dl>

            <dl data-id="id02">
                <dt>
                    <img src="../img/2.jpg" />
                </dt>
                <dd>
                    <strong>¥289.00</strong>
                    <p>春款真皮坡跟大码单鞋内...</p>
                    <button>加入购物车</button>
                </dd>
            </dl>

            <dl data-id="id03">
                <dt>
                    <img src="../img/3.jpg" />
                </dt>
                <dd>
                    <strong>¥299.00</strong>
                    <p>春款真皮坡跟大码单鞋内...</p>
                    <button>加入购物车</button>
                </dd>
            </dl>

            <dl data-id="id04">
                <dt>
                    <img src="../img/4.jpg" />
                </dt>
                <dd>
                    <strong>¥309.00</strong>
                    <p>春款真皮坡跟大码单鞋内...</p>
                    <button>加入购物车</button>
                </dd>
            </dl>
        </div>
    </body>
</html>

CSS部分

@charset "utf-8";
/*body,html{
    height:100% ;
}*/
#goods{
    width: 820px;
    margin: 100px auto;
}
#goods dl{
    height: 376px;
    width: 180px;
    border: solid 1px #e0e0e0;
    padding: 10px 9px 8px 9px;
    float: left;
    margin-right: 5px;
}
#goods dl dt {
    height: 239px;
    width: 180px;
}
#goods dl dd strong{
    display: block;
    height: 61px;
    line-height: 61px;
    font-size: 16px;
    color: #ff3300;
    text-align: center;
    font-weight: 900;
}
#goods dl dd p{
    height: 27px;
    line-height: 27px;
    font-size: 14px;
    text-align: center;
}
#goods dl dd button{
    width: 144px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    background: #f99c1b;
    color: #fef4e9;
    outline: none;
    border: solid 1px #da7c0c;
    border-radius: 5px;
    margin:6px 0 0 17px;
    font-size: 16px;
}

#aside-cart{
    position: fixed;
    top: 0;
    right: 0;
    width:35px;
    height: 100%;
    background: #000000;
    color: #FFFFFF;
    text-align: center;
    padding: 200px 0 0 0;
    cursor: pointer;
}
#aside-cart span{
    display: block;
    font-size: 20px;
}
#aside-cart span img{
    display: block;
}

js部分

window.onload = function(){
   

    var addBtns = document.getElementsByTagName('button');   //加入购物车按钮
    var goods = $('goods');             //商品列表的外围div，用于事件委托
    var asideCart = $('aside-cart');    //右侧侧边栏


//==================================鼠标按下加入购物车===========================

    goods.onmousedown = function(evt){
      //鼠标按下加入购物车,事件委托
        var e = evt || window.event;
        var target = e.target || e.srcElement;    

        addCookie(target);   //   添加商品信息到cookie中，addCookie()是封装的方法

        while(target != null){   //判断真实发生事件的对象
            if(target.nodeName.toLowerCase() == 'button'){
                target.style.backgroundColor = '#f06015';
                break;
            }
            target = target.parentNode;
        }

        goods.onmouseup = function(){
       //鼠标抬起,事件委托
            var e = evt || window.event;
            var target = e.target || e.srcElement;

            while(target != null){
                if(target.nodeName.toLowerCase() == 'button'){
                    target.style.backgroundColor = '#f99c1b';
                }
                target = target.parentNode;
            }

        }
    };


//==================================点击购物车结算==================================

    asideCart.onclick = function(){
   
        location.href = 'JD Cart.html';

    };

};  //window.onload结束




//==================================向cookie中添加商品信息==========================

function addCookie(target){
   
    var parent = target.parentNode.parentNode;  //dl节点 

    var goodsMessage = [{   //用于保存商品信息
        id:parent.getAttribute('data-id'),
        imgSrc:parent.getElementsByTagName('img'
最低0.47元/天 解锁文章
R_March
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
简单的购物车
本人学习java的笔记
08-18 479
超简单的购物车，JQuery 版本为jquery-1.9.1.js 框架为老师给的，购物车的商品总数和总价 根据是否选中而变化 jq和html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的购物车-京东商城</title> &...
html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少
m0_70932336的博客
04-03 4032
【代码】html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少。
php 购物车的结算,购物车结算add_to_order.php，
weixin_39841709的博客
03-22 306
购物车结算add_to_order.php，
2024年安卓最全Android 购物车实现（思路+步骤+源码），2024年最新阿里面试轮次
2401_84556681的博客
05-15 751
单选指的是单个店铺里单个商品选中，该店铺如果所有商品都选中，则店铺自动选中，而直接选中店铺则里面所有商品选中，这是单选也是多选，你选中店铺其实就是多选店铺中的商品。这么解释不知道你好不好理解，下面来说全选，全选就是所有商品或店铺选中，所有商品选中就是所有店铺选中，所有店铺选中就是所有商品选中，两者满足其一都是为全选，而全选也是可以主动和被动，主动就是用户点击这个全选按钮，然后选中所有商品或者店铺，被动就是通过对所有店铺的选中或者所有商品的选中来达成全选。这里面就一个关键点，那就是选中店铺的数量。
php购物车合计,PHP如何实现购物车总计功能
weixin_31641077的博客
03-16 192
function changeNum(productid, num) {var goods_numbers=$("input[name='goods_number']");var goods_prices=$("input[name='goods_price']");var totalPrice=0.00;var url = "changeNum.php";var data = {"product...
js实现购物车结算界面
m0_53394907的博客
10-19 3544
模拟了个商品界面，点击购买后相应的商品数量加一；选中后才计算价格，可以删除商品和添加商品，点击相同的商品时，商品数量加一，可以生成商品在购物车，可以全选和取消全选。
【 uniapp - 黑马优购 | 购物车页面(3)】结算页面组件封装与渲染 (超详细代码讲解）
小新的博客
01-13 1476
9.3 结算区域 9.3.1 把结算区域封装为组件 9.3.2 渲染结算区域的结构和样式 9.3.3 动态渲染已勾选商品的总数量 9.3.4 动态渲染全选按钮的选中状态 9.3.5 实现商品的全选/反选功能 9.3.6 动态渲染已勾选商品的总价格 9.3.7 动态计算购物车徽标的数值 9.3.8 渲染购物车为空时的页面结构 9.4 分支的合并与提交
基于vue制作的简单购物车结算功能代码
06-11
在本项目中，我们主要探讨的是如何利用Vue.js框架实现一个基本的购物车结算功能。Vue.js是一款轻量级的前端JavaScript框架，以其组件化、响应式数据绑定和易用性而受到开发者们的广泛欢迎。下面，我们将深入解析这个...
Bootstrap淘宝购物车结算代码
06-24
综上所述，“Bootstrap淘宝购物车结算代码”提供了构建电商网站核心功能的实例，结合Bootstrap的组件和样式，我们可以快速打造出一款美观且功能完善的购物车结算页面。开发者可以在此基础上进行定制化开发，以满足...
jQuery手机端购物车结算代码
06-24
总的来说，`jQuery手机端购物车结算代码`是学习移动端开发和实践jQuery应用的一个优秀案例。通过此项目，开发者可以深入理解如何利用jQuery处理移动端的交互需求，以及如何结合HTML5和CSS3实现一个完整的购物车功能...
JS购物车结算代码
03-30
JS实现购物车结算功能代码
jQuery淘宝购物车页面商品结算
05-18
完美模仿淘宝购物车界面， jQuery淘宝购物车页面商品结算
eclipse jsp购物车
12-20
eclipse购物车 jsp 页面
jQuery移动端购物车结算页面代码
01-08
jQuery移动端购物车结算页面代码,jQuery制作我的购物车商品添加删除结算手机页面模板代码。
移动端购物车自动结算html5代码
10-26
点餐或是支付购物车列表页面，点击加减数量，底部自动结算功能的html5代码
vue实现购物车结算功能
10-15
主要介绍了vue实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js添加删除购物车结算代码
06-24
综上所述，实现“js添加删除购物车结算代码”涉及Vue.js的组件化开发、数据绑定、计算属性、方法调用以及数组操作等技术，是前端开发中的常见应用场景，对于提升用户体验和优化购物流程至关重要。
jsp实现购物车结算页面
qq_52108058的博客
05-27 2443
文章目录一、案例演示二、实现步骤1.建表2.order类3.orderItems类4.OrderDao3.OrderServlet5.order.jsp 一、案例演示 当我们点击info.jsp的结账时，页面跳转到order.jsp结算中心页面，首先在数据库中创建orders表和orderItems表用于存放账单数据，在java中建orders.java和orderItems.java两个java类用于获取和设置数据，建OrderDao.java实现添加数据的方法，建OrderServlet当act=add
python购物车结算
最新发布
06-17
在Python中实现一个简单的购物车结算功能，通常涉及到以下几个步骤： 1. **创建商品类**：定义一个商品类（例如`Product`），包含属性如名称、价格、数量等。 ```python class Product: def __init__(self, name, price): self.name = name self.price = price self.quantity = 0 def set_quantity(self, quantity): self.quantity = quantity def get_total_cost(self): return self.price * self.quantity ``` 2. **购物车类**：创建一个购物车类（例如` ShoppingCart`），用于存储商品和处理结算。 ```python class ShoppingCart: def __init__(self): self.items = [] def add_item(self, product, quantity=1): item = product item.set_quantity(quantity) self.items.append(item) def remove_item(self, product_name, quantity=None): for item in self.items: if item.name == product_name: if quantity is not None: item.set_quantity(item.quantity - quantity) else: self.items.remove(item) break def total_cost(self): return sum(item.get_total_cost() for item in self.items) ``` 3. **使用示例**： ```python # 创建商品实例 apple = Product("Apple", 1.5) banana = Product("Banana", 0.5) # 添加商品到购物车 cart = ShoppingCart() cart.add_item(apple, 3) cart.add_item(banana, 2) # 结算 print(f"Total cost: {cart.total_cost():.2f}") # 删除商品 cart.remove_item("Apple", 1) print(f"New total cost after removing an apple: {cart.total_cost():.2f}") ``` 这个例子中，购物车可以添加商品，查询总成本，以及删除特定商品。你可以根据需求扩展购物车的功能，比如计算优惠后的总价、查看购物车内容等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值