面向对象购物车

最新推荐文章于 2023-07-26 16:30:43 发布
最新推荐文章于 2023-07-26 16:30:43 发布
阅读量110 收藏
点赞数
分类专栏： JS 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianranran/article/details/122953360
版权
本文探讨了如何使用JavaScript在前端实现一个面向对象的购物车功能，详细讲解了购物车的添加商品、删除商品、更新商品数量以及计算总价等核心操作。通过HTML5的数据存储特性，实现数据持久化，确保页面刷新后购物车内容不会丢失。
摘要由CSDN通过智能技术生成 
<link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header>网页头部区域</header>
    <main>
        <ul></ul>
    </main>
    <a href="html/cart.html">
        <div class="count">
            商品共<span>0</span>件
        </div>
    </a>
    <!--json数据格式不能直接使用js文件引用，必须通过ajax请求-->
    <script src="js/ajax.js"></script>
    <script src="js/index.js"></script>
</body>

class List{
   
    constructor() {
   
        //获取元素
        this.container = document.querySelector('ul')
        this.span = document.querySelector('span')
        this.init()
    }
    init() {
   
        this.request()
        //注意点：data数据是发送请求获取到的，在初始化的时候直接调用代码，异步代码是没有返回结果的所以是undefined
        // this.cart()
        this.count()
    }
    request() {
   
        pAjax({
   url: 'data/goods.json'})
        .then((res)=>{
            let data = JSON.parse(res)
            data = data.slice(0, 60)
            this.render(data)
            this.cart(data)
        })
    }
    render(data) {
        data.forEach((item) => {
            this.container.innerHTML += `
                     <li>
                        <div class="pic">
                            <img src="${item.img_small_logo}">
                        </div>
                        <p class="title hide">${item.title}
最低0.47元/天 解锁文章
黄酱！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5新增存储localstorge
tianranran的博客
02-08 269
localStorage.setItem('username', '张三') localStorage.setItem('password', 123) console.log(localStorage.getItem('username')) localStorage.removeItem('username') console.log(localStorage.getItem('username')) 加入购物车 <s
java基础 面向对象 购物车模块模拟
cbdA_ZAI的博客
10-08 1399
学习视频： Java入门基础视频教程，Java零基础自学首选黑马程序员Java入门教程（含Java项目和Java真题）_哔哩哔哩_bilibili 目录 *一. 需求分析：模拟购物车模块的功能 1.控制台 while(true){ switch(command){ 2.添加商品： //1.商品的对象：商品id,商品名称,商品价格,商品购买数量 //2.将商品添加到购物车-->把商品对象加入到数组中去 //3.查询购物车信息--...
H5 localStorge
伊之仲的博客
04-06 832
localStorage.setItem('test1','test1');设置键名为test1 值为test1的一组key-value。 localStorage.getItem('test1'');           获取键名为test1的value值。 localStorage.key(0);  以百度为例。取键值的第一个数据 localStorage.key(1);  取键
H5学习之-----local storage
sandy
10-13 549
1. HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每个服务器请求...
H5的localstorge的使用心得
加菲猫的鳄鱼的博客
06-06 456
localstorge在保存的时候只有string这一种状态格式，所以我们在进行不同的数据获取的时候要进行转换。 1：localstorge转化为Number类型 //设置正在上传或者下载的文件个数(增加) FILE_ABSOLOAD_ADD(state){ state.fileAbsoLoading++; localStorage.fileAbso...
h5 新增本地存储localStorage、sessionStorage
weixin_43294560的博客
01-13 945
localStorage 用户不主动删除永久存在,域名区分 sessionStorage 浏览器关闭时删除 操作: 写入: localStorage/sessionStorage.setItem('key','value'); 读取: localStorage/sessionStorage.getItem('key'); 删除: localStorage/sess......
JavaScript面向对象编写购物车功能
10-21
本文将详细介绍如何使用JavaScript面向对象的方法来实现一个购物车功能。 首先，我们需要定义商品列表的数据结构。这通常是一个数组，包含多个对象，每个对象代表一个商品。例如： ```javascript var data = [ {...
cookie实现面向对象的购物车
03-13
本示例通过使用Cookie来实现一个面向对象的购物车系统，该系统能够跟踪用户的购买选择，并在用户会话期间保持其状态。以下是对这个项目的详细解析： 1. **Cookie基础**：Cookie是一种在客户端存储数据的技术，用于...
【python面向对象】购物车系统，文件有两个版本，进行结算与支付功能，帮助初学者更好的掌握从面向过程向面向对象过渡。
05-03
在本项目中，我们将深入探讨一个基于Python的面向对象编程（OOP）示例——购物车系统。这个系统包括两个版本，旨在帮助初学者理解如何从面向过程编程过渡到面向对象编程，这是一个重要的编程概念转变。 面向过程...
local storage （H5本地存储）
weixin_34258838的博客
03-18 188
HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 1.local...
H5的localStorage应该
小前日记
06-28 346
function lgo() { var name = document.getElementById("name").value; var pwd = document.getElementById("pwd").value; if(name == '') { alert('请输入用户名'); return false; } if(pwd == '') { ...
新建便利贴，添加备忘录并使用localStorage存储
Sclifftop - 保安大队长
06-13 1486
此代码是在网页上建立便利贴，把所要做的内容记下，并使用localStorage存储，下面是源代码，分三块内容，Notes.html、notes.css、operateNotes.js，开整！！新建网页，并设置一下简单页面布局
HTML5本地存储(Local Storage) 的前世今生
2301_77162959的博客
06-06 269
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用（或者原生应用)，操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据
h5新增属性本地存储
u011927449的博客
05-19 224
---恢复内容开始--- 存储的两种类型： 　　localStorage 和 sessionStorage 　　localstorage:没有时间限制的数据存储 　　sessionStorage 针对一个session数据的存储 注意：使用前必须进行判断使用前须做判断： 　　 if(typeof(storage) !== undefined){ }else{ //不支持web存储 } 　　本地存储的思路：多条数据用对象传入数据 　　1>保存数据： .setItem(key,v.
数据存储的方法之localstorage
最新发布
weixin_49734970的博客
07-26 2434
目录1.存值2.取值3.修改4.移除5.获取所有的key6.获取所有的值7.清除所有的值8.判断是否含有某个key9.使用技巧10.注意事项
H5 localStroage和SessionStorage
a464064368的博客
04-06 514
HTML5 提供两种web存储方法，localStorage 与 sessionStorage localStorage 与 sessionStorage 区别 localStorage没有过期时间，只要不clear或remove，数据会一直保存。 sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器
h5 储存 localStorage、sessionStorage、Cookie的区别及用法
weixin_41796631的博客
03-09 400
https://segmentfault.com/a/1190000012057010 localStorage和sessionStorage使用时使用相同的API： localStorage.setItem("key","value");//以“key”为名称存储一个值“value” localStorage.getItem("key");//获取名称为“key”的值 ...
H5新特性 - 本地存储
秦兟
02-04 316
本地存储 注意： 本地存储调用者必须统一，用临时存储存储的数据，只有临时存储才能找到 localStorage 永久存储（相对），其中的数据不随着浏览器的开关而改变 sessionStorage 临时存储（相对），当浏览器关闭/当前页面关闭时，数据消失,页面刷新时不会影响 两者区别 local 和 session的区别： local这里做永久存储，浏览器关闭与否并不影响它。多数使用在用户自动登录...
json字符串,本地存储讲解localstorage 和 sessionstorage及cookie,模板字符串初识
你还有我
01-21 1350
json字符串 “abc123truelkgsjhgo” 普通字符串 "<h1>hgahgo</h1>" html格式字符串 键值对格式 键和值都需要用双引号去包括 ‘“name”:“yasuo”’ json用途： 在网络传输时使用。 比如前后端交互。 不能够传输对象和数组的。 只能通过字符串形式去传输数据。 所以说我们如果要传输对象和数组，我们需要将其转换为字符串。 json格式就是满足对象和数组数据结构的一种字符串 json的使用方法 JSON.parse() 把json格式
Java面向对象购物车系统代码
05-25
以下是一个简单的Java面向对象购物车系统的代码示例： ```java import java.util.*; class Product { String name; double price; int quantity; public Product(String name, double price, int quantity) { this.name = name; this.price = price; this.quantity = quantity; } public double getTotalPrice() { return price * quantity; } } class ShoppingCart { List<Product> products; public ShoppingCart() { products = new ArrayList<>(); } public void addProduct(Product product) { products.add(product); } public void removeProduct(Product product) { products.remove(product); } public double getTotalPrice() { double totalPrice = 0; for (Product product : products) { totalPrice += product.getTotalPrice(); } return totalPrice; } } public class Main { public static void main(String[] args) { Product p1 = new Product("Book", 10.0, 2); Product p2 = new Product("Pen", 1.0, 5); Product p3 = new Product("Notebook", 3.0, 3); ShoppingCart cart = new ShoppingCart(); cart.addProduct(p1); cart.addProduct(p2); cart.addProduct(p3); System.out.println("Total price: " + cart.getTotalPrice()); } } ``` 在这个示例中，我们定义了两个类：`Product`和`ShoppingCart`。`Product`类用于表示一个商品，包括名称、价格和数量。`ShoppingCart`类用于表示购物车，包括产品列表和一些操作方法，如添加和删除产品以及获取总价。 在主方法中，我们创建了三个产品，并将它们添加到购物车中。最后，我们打印出购物车中所有产品的总价。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值