模拟购物车

最新推荐文章于 2024-04-29 21:35:15 发布
最新推荐文章于 2024-04-29 21:35:15 发布
阅读量154 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/shanhaihong/p/5690948.html
版权

css部分：

 <style type="text/css">
        h1 {
            text-align:center;
        }
        table {
            margin:0 auto;
            width:60%;
            border:2px solid #aaa;
            border-collapse:collapse;
        }
        table th, table td {
            border:2px solid #aaa;
            padding:5px;
        }
        th {
            background-color:#eee;
        }
    </style>

html部分：

<h1>最划算</h1>
<table>
    <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>描述</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>武装直升机z_10</td>
        <td>200</td>
        <td>很酷</td>
        <td>107</td>
        <td>99%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>虎式坦克</td>
        <td>200</td>
        <td>火力猛，装甲厚</td>
        <td>178</td>
        <td>100%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>单兵望远镜</td>
        <td>132</td>
        <td>千里眼，哪里都能看</td>
        <td>134</td>
        <td>88%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>T-50战斗机</td>
        <td>250</td>
        <td>全球部署，精确打击</td>
        <td>235</td>
        <td>94%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>单兵火箭筒</td>
        <td>150</td>
        <td>携带方便，火力强悍</td>
        <td>241</td>
        <td>96%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>战术手雷</td>
        <td>100</td>
        <td>携带方便，爆破力强</td>
        <td>227</td>
        <td>96%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>L-81突击步枪</td>
        <td>100</td>
        <td>破环力大</td>
        <td>148</td>
        <td>100%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>K-91狙击步枪</td>
        <td>200</td>
        <td>精确度高</td>
        <td>201</td>
        <td>95%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>防弹头盔</td>
        <td>50</td>
        <td>有型</td>
        <td>141</td>
        <td>96%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    <tr>
        <td>03单兵靴</td>
        <td>200</td>
        <td>舒适</td>
        <td>163</td>
        <td>100%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>


</table>

<h1>购物车</h1>
<table>
    <thead>
    <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>数量</th>
        <th>金额(元)</th>
        <th>删除</th>
    </tr>
    </thead>
    <tbody id="goods">

    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="right">总计</td>
        <td id="total"></td>
        <td></td>
    </tr>
    </tfoot>
</table>

js部分：

  <script>

        //入购物车，声明的参数btn用来接收传入的this；而this就是用户正在点的按钮(DOM对象)。
        function add_shoppingcart(btn) {

            //eq(i)类似于[i]/get(i)，
            //但是它返回的是jQuery对象。
            var name =
                    $(btn).parent().siblings().eq(0).html();
            //按钮     td5       tds       td0     商品名

            //先在购物车汇总中遍历所有的商品名，如果有相同的商品名就不在汇总中创建新的商品
            //获取汇总中tbody下所有的行
            var $trs = $("#goods tr");
            //设置一个开关
            var sameName = false;
            //遍历他们
            for(var i=0;i<$trs.length;i++) {
                //获取每一行
                var $tr = $trs.eq(i);
                //获取该行中第1列的值(商品名/String)
                var shopName = $tr.children().eq(0).html();
                //    tds        td0     商品名
                if(shopName==name){
                    sameName = true;
                }
            }

            if(sameName==false){
                var price =
                        $(btn).parent().siblings().eq(1).html();
                //按钮     td5       tds       td1     单价
                //alert(name + "," + price);
                //创建一行
                var $tr =
                        $('<tr>'+
                                '<td>'+name+'</td>'+
                                '<td>'+price+'</td>'+
                                '<td align="center">'+
                                '<input type="button" value="-" οnclick="decrease(this);"/> '+
                                '<input type="text" size="3" readonly value="1"/> '+
                                '<input type="button" value="+" οnclick="increase(this);"/>'+
                                '</td>'+
                                '<td>'+price+'</td>'+
                                '<td align="center"><input type="button" value="x" οnclick="del(this);"/></td>'+
                                '</tr>');
                //将此行追加到tbody下
                $("#goods").append($tr);
                sum();
            }

        }
        //删除
        function del(btn) {
            $(btn).parent().parent().remove();
            sum();
        }
        //加法
        function increase(btn) {
            //获取按钮的哥哥的内容(数量/String)
            var amount = $(btn).prev().val();
            //数量+1，再设置回文本框
            $(btn).prev().val(++amount);
            //获取按钮的父亲的哥哥的内容(单价)
            var price = $(btn).parent().prev().html();
            //计算金额=单价*数量
            var mny = price*amount;
            //写入到按钮的父亲的弟弟里(金额)
            $(btn).parent().next().html(mny);
            sum();
        }
        //减法
        function decrease(btn) {
            //获取按钮的弟弟的内容(数量/String)
            var amount = $(btn).next().val();
            //数量不能小于1
            if(amount <= 1) {
                return;
            }
            //数量-1，再设置回文本框
            $(btn).next().val(--amount);
            //获取按钮的父亲的哥哥的内容(单价)
            var price = $(btn).parent().prev().html();
            //计算金额=单价*数量
            var mny = price*amount;
            //写入到按钮的父亲的弟弟里(金额)
            $(btn).parent().next().html(mny);
            sum();
        }
        //求合计
        //获取所有的行并求合计，并不是获取
        //某一个按钮所在的行，因此没有参数
        function sum() {
            //获取tbody下所有的行
            var $trs = $("#goods tr");
            //遍历他们
            var sum = 0;
            for(var i=0;i<$trs.length;i++) {
                //获取每一行
                var $tr = $trs.eq(i);
                //获取该行中第4列的值(金额/String)
                var mny =
                        $tr.children().eq(3).html();
                //    tds        td3     金额
                sum += parseFloat(mny);
            }
            //将合计值写入合计列
            $("#total").html(sum);
        }
    </script>

 

转载于:https://www.cnblogs.com/shanhaihong/p/5690948.html

weixin_33965305
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用HashMap模拟一个网上购物车
12-23
1. 用HashMap模拟一个网上购物车。要求：从键盘输入5本书的名称、单价、购买数量，将这些信息存入一个HashMap，然后将该HashMap作为参数调用方法getSum（HashMap books），该方法用于计算书的总价并返回。【说明：键盘输入可以使用Scanner类】
Java中用hashmap实现购物车
01-03
Java语言使用hashmap实现向购物车添加删除修改商品，显示商品信息
山科java实验4-2 用HashMap模拟一个网上购物车。
markconca的博客
11-15 1766
用HashMap模拟一个网上购物车。要求：从键盘输入n本书的名称、单价、购买数量，将这些信息存入一个HashMap，然后将该HashMap作为参数调用方法getSum（HashMap books），该方法用于计算书的总价并返回。【说明：键盘输入可使用Scanner类】 package 作业2; public class Books { String name; double pri...
模拟购物车的实现过程（详细讲解）
weixin_33932129的博客
07-27 1084
我们把购物车的步骤分为了三步 一、加入购物车 二、购物车中物品数量的控制 三、计算金额 下面为实现的代码；（代码也是按照上面的思路写的大家可以看看，看不懂可以参照上面的图片上的步骤） <!DOCTYPE html> <html> <head> <title>购物车...
Python 模拟购物车的实例讲解
09-21
下面小编就为大家带来一篇Python 模拟购物车的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Python之模拟购物车
12-22
# @Function :模拟购物车功能 ''' 1.启动程序，输入工资，打印商品列表 2.用户根据商品编号选择商品 3.选择商品后，检测余额是否足够，够就付款，不够提示 4.选择q退出本次购物 5.选择b付钱，并打印商品和消费金额及...
【JAVA】使用集合容器Map等，模拟购物车功能(Goods类和Shopping类)，涵盖对Map的各种方法及其Key、Value、映射关系的应用~
Karlcixio
04-02 1255
?目录✍版权声明：@CSDN遊光?第零步：审题！！！?第一步：实体类Goods?第二步：测试类Shopping?时间太晚，明日更新~?End ✍版权声明：@CSDN遊光 版权声明： @Kcx@遊光@胤殁@Karl@Karlcixio 有幸您能来看我的博客，本博客仅供大家学术交流，如您有需要将本博客用作它用，请与我联系！ 我的联系方式： 微信搜索公众号：Karlcixio 也可以直接扫描以下二维码： ---------------------------------- 个人 QQ：1005589159 .
JAVA实验四：用HashMap模拟一个网上购物车
fighting123678的博客
01-06 3924
题目 用HashMap模拟一个网上购物车。要求：从键盘输入n本书的名称、单价、购买数量，将这些信息存入一个HashMap，然后将该HashMap作为参数调用方法getSum（HashMap books），该方法用于计算书的总价并返回。【说明：键盘输入可使用Scanner类】 答案 import java.util.*; public class Shop { public st...
模拟实现购物车功能
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); } } }
模拟网上超市购物结算功能
12-19
总结了关于网上购物的前台后台，整合整个项目的整体思路
商品系统增删改查 使用HashMap实现
weixin_45204732的博客
06-10 792
package work; //商品（编号,名称，价格，制造商） public class Shoop { private int ID;//编号 private String name;//名称 private double Price;//价格 private String Manufactor;//制造商 public Shoop(int iD, String name, double pr...
JavaScript 模拟 HashMap例子
weixin_34242658的博客
02-22 73
function map(){    var map = {}; // Map map = new HashMap();        var key = "key";    var value = "value";        map[key] = value; // map.put(key, value);        var value = map[key]; // Object val...
我的练习项目： 模拟淘宝搜索商品、添加商品到购物车功能、修改商品信息功能
热门推荐
u010033398的博客
04-08 1万+
需求：用户浏览商品，不需要登陆。点击添加到购物车时，引导用户登陆。点击修改时候，修改商品信息。 需求详细：页面首页有搜索框，输入字符，列出商品列表。点击添加商品时，如果用户未登陆，跳转到登陆界面，引导用户登陆。登陆成功后，自动跳转到用户搜索的商品列表。当用户点击添加商品时候，添加到数据库中。点击修改时，修改商品信息，然后数据库存储改动后的数据。 设计： 环境:  jdk1.7，myeclip
初学者 模拟购物车（包含添加商品和删除商品功能）
chenmixuexi_的博客
07-13 1万+
购物车界面与功能实现分析图： 购物车对象： package cn.itsource._01_buycart.domain; import java.util.ArrayList; import java.util.Iterator; import java.util.List; /** * 购物车对象 * */ public class ShoppingCar
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 420
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 819
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
python模拟购物车
04-24
好的，我可以帮您解决Python模拟购物车的问题。首先，我们需要定义一个购物车类，该类应该具有添加商品、删除商品、查看购物车列表和计算总价的功能。以下为代码示例： ``` class ShoppingCart: def __init__(self...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值