模拟购物车

最新推荐文章于 2022-11-08 21:11:18 发布
最新推荐文章于 2022-11-08 21:11:18 发布
阅读量276 收藏
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lusizhifei/article/details/56022200
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟购物车</title>
<style>
h2{width:400px;height:20px;color:#600}
div{border:1px solid #ccc;width:400px;margin:0 auto;height:auto;background:linear-gradient(to left,#fff,#CF9,#fff,#CF9,#CF6);}
table{border:1px solid #ccc;border-collapse:collapse;color:#666;width:400px;}
th,td{border:1px solid #ccc;text-align:center;font-weight:700;font-size:16px;}
a{text-decoration:none;color:#666;}
a:hover{color:#f00;}
</style>
</head>


<body>
<div>
<h2>您的购物车</h2>
<table>

<thead>
    <tr>
        <th>商品名称</th>
            <th>商品价格</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        
    </thead>
    <tbody>
    <tr>
        <td>u盘32g</td>
            <td>￥92</td>
            <td>1</td>
            <td><a href="javascript:void(0)">删除</a></td>
        </tr>
    
    </tbody>
    <tfoot>
    <tr>
        <td>合计结算</td>
            <td colspan='3' style="text-align:center;">￥</td>
            
        </tr>
    </tfoot>
</table>
<h2>猜你喜欢</h2>
<table >
    <tr>
        <td>情侣睡衣</td>
            <td>￥299</td>
            <td><a href="javascript:void(0)">加入购物车</a></td> 
        </tr>
    <tr>
        <td>迪士尼果冻表</td>
            <td>￥5299</td>
            <td><a href="javascript:void(0)">加入购物车</a></td> 
        </tr>
        <tr>
        <td>锁骨吊坠</td>
            <td>￥1299</td>
            <td><a href="javascript:void(0)">加入购物车</a></td> 
        </tr>
</table>
</div>
</body>
<script type="text/javascript">
//点击加入购物车的超级链接，将选中的商品添加到购物车中
var Tab1=document.getElementsByTagName("table")[0];
var Tab2=document.getElementsByTagName("table")[1];
var _a=Tab2.getElementsByTagName("a");
var len=_a.length;
for(var i=0;i<len;i++){
_a[i].οnclick=function(){
//this指的是函数被调用那一刻，调用函数的对象

//查找当前超级链接的父节点
var _td=this.parentNode;
//获取当前购买商品的名称与价格
var name=_td.parentNode.children[0].innerText;
var prev=_td.previousSibling.previousSibling.innerText;


//复制购物车表格中商品中第一行的内容
var _tbody=Tab1.children[1];
var _tr=_tbody.children[0];
var _clone=_tr.cloneNode(true);//克隆行节点与后代单元格
_clone.children[0].innerHTML=name;
_clone.children[1].innerHTML=prev;
//3.为克隆行的删除添加点击时间
_clone.children[3].children[0].οnclick=function(){
_clone.parentNode.removeChild(_clone)
}
_tbody.appendChild(_clone);
}
}
//2.为删除的超级链接绑定时间
var _aa=Tab1.getElementsByTagName("a");
var len1=_aa.length;
for(var i=0;i<len1;i++){
_aa[i].οnclick=function(){
var _tr=this.parentNode.parentNode;
_tr.parentNode.removeChild(_tr);
}
}
</script>
</html>
lusizhifei
关注
专栏目录
Python 模拟购物车的实例讲解
09-21
总的来说，这个Python模拟购物车的实例是一个很好的学习材料，它涵盖了文件操作、用户数据管理、人机交互等多方面知识，对于初学者来说，理解和实现这样一个项目可以提高对Python编程和数据管理的理解。同时，这样的...
js中的DOM模拟购物车功能.docx
01-21
js 中的 DOM 模拟购物车功能 本篇文章主要介绍了 js 中的 DOM 模拟购物车功能的示例代码，具有很好的参考价值。下面我们来看下这个示例代码的实现细节。 首先，我们可以看到这个示例代码使用了 HTML、CSS 和 ...
购物车模拟
最新发布
qq_73003340的博客
11-08 122
记录
模拟实现购物车功能
04-10
import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; import java.util.Set; /** * 购物车类 */ public class Cart { //创建一个map对象，用来保存商品，key为商品，value为商品的数量 private Map<Goods, Integer> map = new HashMap<Goods, Integer>(); /** * 添加商品到购物车方法 * @param id 商品编号 * @param quantity 商品数量 */ public void addGoods(int id, int quantity){ Goods goods = GoodsDB.goodsMap.get(id); if(goods!=null){ Integer oQuantity = map.get(goods);//获取商品在购物车中原本的数量 if(oQuantity!=null){ oQuantity += quantity; }else{ oQuantity = quantity; } map.put(goods, oQuantity);//添加商品到map中 System.out.println("添加商品"+goods.getName()+"成功！"); }else{ System.out.println("添加失败！商品编号不存在！"); } } /** * 按指定的编号删除商品 * @param id 商品编号 */ public void delGoods(int id){ Goods goods = GoodsDB.goodsMap.get(id); if(goods!=null){ map.remove(goods);//从map删除商品 System.out.println("删除商品"+goods.getName()+"成功！"); }else{ System.out.println("删除失败！商品编号不存在！"); } } /** * 修改商品数量方法 * @param id 商品编号 * @param quantity 要修改的商品数量 */ public void updateGoods(int id, int quantity){ Goods goods = GoodsDB.goodsMap.get(id); if(goods!=null){ map.put(goods, quantity);//从map删除商品 }else{ System.out.println("修改失败！商品编号不存在！"); } } /** * 打印购物车商品列表 */ public void show(){ Set<Entry<Goods, Integer>> entrySet = map.entrySet(); System.out.println("编号\t单价\t数量\t名称\t总价"); for(Entry<Goods, Integer> entry:entrySet){ Goods goods = entry.getKey(); Integer quantity = entry.getValue(); System.out.println(goods.getId()+"\t"+goods.getPrice()+"\t"+quantity+"\t"+goods.getName()+"\t"+goods.getPrice()*quantity); } } }
java中模拟顾客购物的类的简单实现
03-06
java中模拟顾客购物的类的简单实现，适合java初学者更深刻地理解面向对象
模拟一个简单的购物车
weixin_58151575的博客
05-31 285
模拟一个购物车页面，通过点击增减按钮，对商品数量及金额进行自动计算 <style> table{ border-collapse: collapse; } td{ width: 200px; height: 50px; text-align: center; } button{ width: 2
模拟购物车系统
qq_43182276的博客
09-24 436
模拟购物车系统 /* 数组容器 模拟购物车 功能： 添加商品 把商品对象添加到容器中 查看商品 把购物车中的商品展示给用户 修改商品 把商品的购买数量取出修改 删除商品 把商品从购物车中删除 结算==>生成订单 想用户展示商品名字 数量 一类商品总价 和订单总价 */ 构造商品 /*
js模拟购物车
datuzidppd5556的博客
08-12 331
js模拟购物车数量加减及总价计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
Java模拟购物车
路的博客
01-02 465
构建商品类： package ShopCar; public class Goods { private int id; private String name;//名字 private double price;//价格 private int restnum;//剩余数量 public Goods clone() { Goods newGood=new Goods(); newGood.setId(Goods.t
购物车模块模拟java
weixin_62023527的博客
07-26 547
java面对对象基础知识简单实现模拟购物车，对购物车进行商品的添加，查看，修改以及商品总价结算
本地模拟购物车(简单版)
tby_pr的博客
10-13 220
先写查 => 先使用数据把页面渲染出来 => 当你删除的时候, 只要从原始数组中把某一条数据删除, 从新渲染页面 1. 根据 list 数组把 购物车 页面渲染好 1-1. 准备一个函数, 用作渲染页面 1-2. 开始循环遍历数组渲染数据 => 问题: 什么位置需要渲染 ? => 把所有购物车相关的内容都渲染出来 1-3. 根据数组中的数据, 去渲染 ul 中的 li => 数组里面有多少数据, ul 里面就有多...
【Java基础】【案例二】模拟购物车模块
xiaolongbao1111的博客
03-30 753
一、需求分析、架构搭建 1.需求 模拟购物车模块的功能，需要实现添加商品到购物车中去，同时需要提供修改商品的购买数量，结算商品价格的功能 2.分析 购物车中的每个商品都是一个对象，需要定义一个商品类 购物车本身也是一个对象：可以使用数组对象代表它 完成界面架构，让用户选择操作的功能 二、添加商品到购物车、查看购物车信息 1.需求 让用户输入商品信息，并加入到购物车中去，且可立即查看购物车信息 2.分析 需要让用户录入商品信息，创建商品对象封装商品信息 并把商品对象加入到购物车数组中去
Python实现模拟购物车功能详解
"这篇教程是关于使用Python模拟购物车功能的实例讲解，涵盖了用户登录、购买商品、查询历史消费记录以及余额更新等操作。通过分解任务并定义相应函数，程序结构清晰，包括login、get_balance、update_balance、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值