JavaScript实现购物车

最新推荐文章于 2024-06-18 17:19:20 发布
最新推荐文章于 2024-06-18 17:19:20 发布
阅读量8.4k 收藏 45
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cathei/article/details/81092096
版权

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 800px;
            margin: 0 auto;
        }
        .box,#box{
            width: 800px;
            border: 2px solid green;
            position: relative;
            top: 0;
            padding: 10px;
        }
        .check,p,span,.num,.add,.minus{
        /*    position: absolute;
            left: 0;
            top: 0;*/
            display: inline-block;
        }
        img{
            width: 82px;
            height: 82px;
            display: inline-block;
        }
        p{
            margin: 0 40px;
            color: #999999;
        }
        .price {
            vertical-align: middle;
            margin: 0 40px;
            font-size: 20px;
            color: red;
        }
        .num{
            width: 20px;
            height: 20px;
            border:1px solid;
            line-height: 20px;
            text-align: center;
            margin-left: 40px;
        }
        #selecteAll,#dele,#move,#product,#proNum,#textP,#totalPri{
            display: inline-block;
            color: #666666;
    

最低0.47元/天 解锁文章
ChericeYang
关注
  • 6
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
javaScript原生版购物车：全选、单选、全删、商品数量增减、计算总价、添加商品（代码）
小福气的博客
07-06 8191
题目： CSS代码如下： <style> *{ margin:0px; padding:0px; } .header,.content,.floot{ width:800px; margin:0pxauto; } .headerulli,.contentulli{ ...
javascript购物车
style201904的博客
06-04 1305
购物车 <style type="text/css"> body,html{ background-color: whitesmoke; } .shopBox{ width: 425px; height: 375px; background-color: white; margin: 0 auto; position: ...
基础购物车（Javascript）
最新发布
2301_81449444的博客
06-18 371
使用Javascript写一个基础购物车，其中包含商品数量加加减减，下面的总价和总数量跟着商品数量变动，还可以自己添加需要的商品。
使用JavaScript实现简单的购物车功能
weixin_45730094的博客
05-11 7203
JavaScript 购物车
JavaScript.购物车
yifei_345678的博客
03-12 1474
今天小阿飞来给大家分享一个简单的购物车案例 直接上代码叭： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算每一行总价的功能</title> </head> <body> <table border> <tr> <td>全选<input type="check
javascript实现简单购物车功能（有图）
热门推荐
Of_the的博客
08-09 3万+
Js实现淘宝购物车类似功能： 主要有添加商品 增加和减少商品数量 根据增加、减少或选择的商品获取金额 实现商品价格的计算 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;购物车&lt;/title&
javascript实现购物车
05-31
在JavaScript实现购物车功能的过程中，我们通常会遇到多个关键知识点，包括数据存储、商品操作、数量管理、总价计算以及用户交互。以下是对这些知识点的详细解释： 1. **数据存储**：购物车中的商品信息需要被持久...
基于JavaScript实现购物车功能
10-20
在JavaScript实现购物车功能时，我们通常会涉及到前端交互、数据存储、动态更新以及计算等核心知识点。以下是对这些知识点的详细说明： 1. **前端交互**：在本例中，用户通过点击“我的购物车”按钮（`#btAdd`）来...
JavaScript实现购物车功能
04-11
在JavaScript实现购物车功能的过程中，会涉及到多个关键知识点，这些技术是前端开发中不可或缺的部分。以下将详细阐述这些知识点： 1. **购物车计算价格**：这是购物车的核心功能之一，需要对每件商品的价格与数量...
javascript实现购物车特效
06-30
用javascript实现购物车特效
JavaScript实现购物车基本功能
10-19
主要为大家详细介绍了JavaScript实现购物车的基本功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js模拟淘宝购物车项目实战
10-23
主要向大家推荐了一个原生js模拟淘宝购物车项目实战，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现，感兴趣的小伙伴们可以参考一下
网上购物系统
10-08
本网上购物系统是一个基于Internet,采用B2C(Business to Consumers)模式，并根据现有的网上购物系统的现状而设计开发的电子商务平台。它不但可以扩大商家的规模和市场影响力，而且可以减少企业的经营成本，提高工作效率。 本文首先介绍了网上购物系统的现状及开发背景，然后论述了系统的设计目标，系统需求和总体设计方案，较详细的论述了系统的详细设计和实现。最后，本文对网 上购物系统进行了系统检测并提出了还需要改进的问题。 本系统主要为用户提供了会员注册，购物车管理，用户资料修改等功能，为管理员提供了商品管理，用户信息管理等功能。在设计方面，本系统采用B/S三层结构，同时使用JSP技术进行动态页面的设计，从系统的安全性和代码的可重用性方面考虑，运用JavaBean对程序的关键代码进行封装。后台数据库选用My SQL数据库。
JS实现简单的购物车
dxn16638400024的博客
06-30 3397
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
javaScript之购物车
weixin_44387879的博客
01-20 212
今天写了一个购物车基础功能的js,分享给大家看一下,具体效果自己可以复制了看看,词穷形容不出来 &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;!-- 重置样式表 --&gt; &
用JavaScript+html+css制作当当购物车
weixin_46409887的博客
03-13 2万+
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;} ul,li,ol{list-style: none;} .content{width: 810px; margin: 0 auto; font-family: "微软雅黑";} .logo{margin: 10px 0;} .logo span{ display: inline-block...
js 购物车基本功能的实现
我的博客
08-14 9593
先上一个效果图 步骤： ① 用js语句画页面（for循环创建四个元素） ② 实现全选功能：当全选的checked为true时，所有元素被选中（包括checked为true和被背景变为粉色）。当全选的checked为flase时，所有元素不被选中。当点击全选按钮时，反选按钮取消选中 ③ 实现反选功能：当反选按钮被选中时，选中点击前未被选中的元素，并且全选按钮取消选中 ④ 实现单选功能：当有一个元...
用原生JavaScript做一个简单的购物车
StartChong
10-31 2494
用原生JavaScript做一个简单的购物车 前言： 本文由简易HTML+CSS+JavaScript构成，本文图片可自己修改。 （img内容不上传） 实现功能： 将商品添加到购物车（如果购物车有相同物品则累加对应数量） 小计计算与总和 积分计算与总和 实现数量的增加和减少（并同步小计和积分及其总和） 单个商品删除 批量删除 实现效果： HTML部分： <!DOCTYPE html...
web javascript实现购物车
06-06
实现购物车的基本流程如下： 1. 创建一个空的购物车数组，用于存放商品信息。 2. 在页面中展示商品列表，并为每个商品添加“加入购物车”按钮。 3. 点击“加入购物车”按钮时，获取当前商品的信息（如商品ID、名称、价格等），将其添加到购物车数组中。 4. 在页面中展示购物车列表，包括每个商品的信息以及数量、总价等信息。 5. 实现购物车中商品数量、总价的实时更新，例如增加或减少商品数量时，购物车列表应该实时更新。 6. 实现删除购物车中的商品，同时更新购物车列表和购物车数组。 7. 实现结算功能，包括计算购物车中所有商品的总价、应付款项等信息。 下面是一个简单的示例代码： HTML部分： ``` <!-- 商品列表 --> <div id="product-list"> <div class="product" data-id="1" data-name="商品1" data-price="10.00"> <h3>商品1</h3> <p>价格：10.00元</p> <button class="add-to-cart">加入购物车</button> </div> <div class="product" data-id="2" data-name="商品2" data-price="20.00"> <h3>商品2</h3> <p>价格：20.00元</p> <button class="add-to-cart">加入购物车</button> </div> ... </div> <!-- 购物车列表 --> <div id="cart-list"> <h2>购物车</h2> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <div id="cart-summary"> <p>总价：<span id="total-price">0.00</span>元</p> <button id="checkout">结算</button> </div> </div> ``` JS部分： ``` // 购物车数组 var cart = []; // 获取商品列表和购物车列表元素 var productList = document.getElementById('product-list'); var cartList = document.getElementById('cart-list'); // 添加商品到购物车 function addToCart(id, name, price) { // 检查购物车中是否已存在该商品 for (var i = 0; i < cart.length; i++) { if (cart[i].id === id) { cart[i].quantity++; return; } } // 如果购物车中不存在该商品，则添加到购物车数组中 cart.push({ id: id, name: name, price: price, quantity: 1 }); } // 渲染购物车列表 function renderCart() { // 清空购物车列表 cartList.querySelector('tbody').innerHTML = ''; // 遍历购物车数组，生成购物车列表 for (var i = 0; i < cart.length; i++) { var item = cart[i]; var tr = document.createElement('tr'); tr.innerHTML = ` <td>${item.name}</td> <td>${item.price.toFixed(2)}</td> <td>${item.quantity}</td> <td>${(item.price * item.quantity).toFixed(2)}</td> <td><button class="remove-from-cart" data-id="${item.id}">删除</button></td> `; cartList.querySelector('tbody').appendChild(tr); } // 更新总价 var totalPrice = cart.reduce((sum, item) => sum + item.price * item.quantity, 0); document.getElementById('total-price').textContent = totalPrice.toFixed(2); } // 商品列表添加点击事件 productList.addEventListener('click', function(event) { var target = event.target; if (target.classList.contains('add-to-cart')) { var product = target.closest('.product'); var id = product.dataset.id; var name = product.dataset.name; var price = parseFloat(product.dataset.price); addToCart(id, name, price); renderCart(); } }); // 购物车列表添加点击事件 cartList.addEventListener('click', function(event) { var target = event.target; if (target.classList.contains('remove-from-cart')) { var id = target.dataset.id; cart = cart.filter(item => item.id !== id); renderCart(); } }); // 结算按钮添加点击事件 document.getElementById('checkout').addEventListener('click', function(event) { var totalPrice = cart.reduce((sum, item) => sum + item.price * item.quantity, 0); alert(`您需要支付${totalPrice.toFixed(2)}元`); }); ``` 以上代码仅为示例，实际项目中可能需要根据具体需求进行调整。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值