面向对象购物车

最新推荐文章于 2024-05-30 11:21:03 发布
最新推荐文章于 2024-05-30 11:21:03 发布
阅读量100 收藏
点赞数
分类专栏： JS 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianranran/article/details/122953360
版权 
<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 249
localStorage.setItem('username', '张三') localStorage.setItem('password', 123) console.log(localStorage.getItem('username')) localStorage.removeItem('username') console.log(localStorage.getItem('username')) 加入购物车 <s
cookie实现面向对象的购物车
03-13
利用cookie，封装成购物车类，支持事件。当用户点击添加到购物车时，自动向购物车里装入商品。并刷新构物栏。示例中也将cookie中的商品如何提取并展现给用户。所有都是以面向对象加json的思想
JavaScript面向对象编写购物车功能
10-21
主要为大家详细介绍了JavaScript面向对象编写购物车功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
localStorage.setItem()、localStorage.getItem()、JSON.stringify()、 JSON.parse()；的使用
weixin_57666779的博客
11-26 929
localStorage对象是HTML5的客户端存储持久化数据的方案，localStorage。如果需要存储复杂类型的数据例如：数组，对象，需要。方法将数组、对象转换为字符串形式，取出时再使用。方法将字符串转换为对象、数组形式；localStorage对象。
H5 localStorge
伊之仲的博客
04-06 824
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 510
1. HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每个服务器请求...
H5的localstorge的使用心得
加菲猫的鳄鱼的博客
06-06 426
localstorge在保存的时候只有string这一种状态格式，所以我们在进行不同的数据获取的时候要进行转换。 1：localstorge转化为Number类型 //设置正在上传或者下载的文件个数(增加) FILE_ABSOLOAD_ADD(state){ state.fileAbsoLoading++; localStorage.fileAbso...
h5 新增本地存储localStorage、sessionStorage
weixin_43294560的博客
01-13 889
localStorage 用户不主动删除永久存在,域名区分 sessionStorage 浏览器关闭时删除 操作: 写入: localStorage/sessionStorage.setItem('key','value'); 读取: localStorage/sessionStorage.getItem('key'); 删除: localStorage/sess......
local storage （H5本地存储）
weixin_34258838的博客
03-18 177
HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 1.local...
dsc面向对象的购物车购物车实验室onl01-dtsc-pt-012120：面向对象的购物车-实验室
02-17
面向对象的购物车-实验室 介绍 在本实验中，您将使用Python中的面向对象编程知识来模仿购物车的功能。 您的购物车将能够向购物车中添加不同数量和价格的商品，计算折扣，跟踪已添加的商品以及使交易无效。 目标 你将...
【python面向对象】购物车系统，文件有两个版本，进行结算与支付功能，帮助初学者更好的掌握从面向过程向面向对象过渡。
05-03
内容概要：购物车系统，文件有两个版本，进行结算与支付功能 适用人群：面向python初学者 使用场景及目标：帮助初学者更好的掌握从面向过程向面向对象过渡。
H5的localStorage应该
小前日记
06-28 339
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 1462
此代码是在网页上建立便利贴，把所要做的内容记下，并使用localStorage存储，下面是源代码，分三块内容，Notes.html、notes.css、operateNotes.js，开整！！新建网页，并设置一下简单页面布局
HTML5本地存储(Local Storage) 的前世今生
2301_77162959的博客
06-06 254
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用（或者原生应用)，操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据
h5新增属性本地存储
u011927449的博客
05-19 215
---恢复内容开始--- 存储的两种类型： 　　localStorage 和 sessionStorage 　　localstorage:没有时间限制的数据存储 　　sessionStorage 针对一个session数据的存储 注意：使用前必须进行判断使用前须做判断： 　　 if(typeof(storage) !== undefined){ }else{ //不支持web存储 } 　　本地存储的思路：多条数据用对象传入数据 　　1>保存数据： .setItem(key,v.
数据存储的方法之localstorage
weixin_49734970的博客
07-26 1291
目录1.存值2.取值3.修改4.移除5.获取所有的key6.获取所有的值7.清除所有的值8.判断是否含有某个key9.使用技巧10.注意事项
h5 储存 localStorage、sessionStorage、Cookie的区别及用法
weixin_41796631的博客
03-09 391
https://segmentfault.com/a/1190000012057010 localStorage和sessionStorage使用时使用相同的API： localStorage.setItem("key","value");//以“key”为名称存储一个值“value” localStorage.getItem("key");//获取名称为“key”的值 ...
H5新特性 - 本地存储
秦兟
02-04 309
本地存储 注意： 本地存储调用者必须统一，用临时存储存储的数据，只有临时存储才能找到 localStorage 永久存储（相对），其中的数据不随着浏览器的开关而改变 sessionStorage 临时存储（相对），当浏览器关闭/当前页面关闭时，数据消失,页面刷新时不会影响 两者区别 local 和 session的区别： local这里做永久存储，浏览器关闭与否并不影响它。多数使用在用户自动登录...
【redis】Spring之RedisTemplate配置与使用
最新发布
05-30 332
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
Java面向对象购物车系统代码
05-25
以下是一个简单的Java面向对象购物车系统的代码示例： ```java import java.util.*; class Product { String name; double price; int quantity; public Product(String name, double price, int quantity) {...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值