JavaScript写购物车

最新推荐文章于 2023-06-30 21:55:03 发布
最新推荐文章于 2023-06-30 21:55:03 发布
阅读量1.9k 收藏 37
点赞数 6
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43684713/article/details/87008701
版权

  话不多说，看一下图

代码：


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        table{
            border-collapse: collapse;
            width: 1000px;
            margin: 0 auto;
        }
        .title{
            font-size: 14px;
        }
        .face{
            width: 80px;
            height: 80px;
        }
        .name{
            color: red;
            font-size: 12px;
            display: inline-block;
            width: 200px;
            margin-left: 10px;
        }
        td{
            padding: 10px 0;
            min-width: 60px;
        }
        .price{
            font-weight: bold;
            color: black;
        }
        .totle{
            font-weight: bold;
            color: red;
        }
        tr{
            border: 1px solid #bfbfbf;
        }
        .btn button{
            width: 30px;
            height: 30px;
            border-style: none;
            background-color: #d4d4d4;
            outline: none;
            cursor: pointer;
        }
        .btn input{
            width: 30px;
            height: 30px;
            border-style: none;
            text-align: center;
        }
    </style>
</head>
<body>
<table>
    <tr class="title">
        <td><input class="ckbox" type="checkbox"/>全选</td>
        <td>商品信息</td>
        <td>单价</td>
        <td>数量</td>
        <td>金额</td>
        <td>操作</td>
    </tr>
    <tr >
        <td><input class="ckbtn" type="checkbox"/></td>
        <td><img align="left" class="face" src="../img/img.jpg" alt=""/>
            <span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
        </td>
        <td><span class="price" data-price="39.00">￥39.00</span></td>
        <td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
        <td>删除</td>
    </tr>
    <tr >
        <td><input class="ckbtn" type="checkbox"/></td>
        <td><img align="left" class="face" src="../img/img.jpg" alt=""/>
            <span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
        </td>
        <td><span class="price" data-price="39.00">￥39.00</span></td>
        <td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
        <td>删除</td>
    </tr>
    <tr >
        <td><input class="ckbtn" type="checkbox"/></td>
        <td><img align="left" class="face" src="../img/img.jpg" alt=""/>
            <span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
        </td>
        <td><span class="price" data-price="39.00">￥39.00</span></td>
        <td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
        <td>删除</td>
    </tr>
    <tr >
        <td><input class="ckbtn" type="checkbox"/></td>
        <td><img align="left" class="face" src="../img/img.jpg" alt=""/>
            <span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
        </td>
        <td><span class="price" data-price="39.00">￥39.00</span></td>
        <td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
        <td>删除</td>
    </tr>
    <tr >
        <td><input class="ckbtn" type="checkbox"/></td>
        <td><img align="left" class="face" src="../img/img.jpg" alt=""/>
            <span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
        </td>
        <td><span class="price" data-price="39.00">￥39.00</span></td>
        <td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
        <td><span class="totle" data-totle="39.00">￥39.00</span></td>
        <td>删除</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="ckbox"/>全选</td>
        <td colspan="2">已选商品<span class="number">0</span>件</td>
        <td>合计：<span class="totleprice">0</span>元</td>
        <td colspan="2"><button>结算</button></td>
    </tr>
</table>
<script>
    var ckbox=document.getElementsByClassName("ckbox");//获取全选按钮
    var ckbtn=document.getElementsByClassName("ckbtn");//获取商品前的选择按钮
    var count=0;
    //勾选功能
    for(var i=0;i<ckbtn.length;i++){
        ckbtn[i].onclick=function(){
            if(this.checked){
                count++;
            }
            else{
                count--;
            }
            if(count==ckbtn.length){
                ckbox[0].checked=true;
                ckbox[1].checked=true;
            }
            else{
                ckbox[0].checked=false;
                ckbox[1].checked=false;
            }
            addtotle();
        }
    }
    for(var key in ckbox){
        ckbox[key].index =key;
        ckbox[key].onclick=function(){
            ckbox[this.index==0?1:0].checked=!ckbox[this.index==0?1:0].checked;
            if(this.checked){
                for(var i=0;i<ckbtn.length;i++){
                    ckbtn[i].checked=true;
                }
            }
            else{
                for(var i=0;i<ckbtn.length;i++){
                    ckbtn[i].checked=false;
                }
                count=0;
            }
            addtotle();
        }
    }
    //数量加减
    var btnleft=document.getElementsByClassName("btnleft");
    var btnright=document.getElementsByClassName("btnright");
    var txt=document.getElementsByClassName("txt");
    var price=document.getElementsByClassName("price");
    var totle=document.getElementsByClassName("totle");
    var tprice=document.getElementsByClassName("totleprice");
    var nub=document.getElementsByClassName("number");

    for(var i=0;i<btnleft.length;i++){
        btnleft[i].index=i;
        btnleft[i].onclick=function(){
            var num=txt[this.index].value;
            num--;
            if(num<1){
                num=1
            }
            txt[this.index].value=num;
            addprice(this.index,num);
            addtotle();
        };
        btnright[i].index=i;
        btnright[i].onclick=function(){
            var num=txt[this.index].value;
            num++;
            txt[this.index].value=num;
            addprice(this.index,num);
            addtotle();

        }
    }
    function addprice(index,value){
        totle[index].innerHTML="￥"+(price[index].getAttribute("data-price")*value).toFixed(2);//toFixed(2)保留两位小数
        totle[index].setAttribute("data-totle", (price[index].getAttribute("data-price") * value).toFixed(2));
        //setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
        //getAttribute() 方法返回指定属性名的属性值。
    }

    function addtotle(){
        var totleprice=0;
        var number=0;
        for(var i=0;i<ckbtn.length;i++){
            if(ckbtn[i].checked){
                totleprice+=parseFloat(totle[i].getAttribute("data-totle"));
                number+=parseInt(txt[i].value);
            }
        }
        tprice[0].innerHTML="￥"+totleprice.toFixed(2);
        nub[0].innerHTML=number
    }

</script>
</body>
</html>

 

木易一
关注
  • 6
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
简单购物车程序实现 （JavaScript）
04-19
简单购物车程序实现 购物车的功能包括： 显示所有产品信息 选择相应产品添加到购物车 查看购物车 包括统计购物车中所有产品的总价格 删除购物车中的商品 返回显示所有产品信息页面 显示所有产品信息页面 查看购物车页面 每个产品包括：产品编号、产品名称、产品描述、产品价格 所有的产品数据，不是来自数据库，而是用集合存储的固定数据。也就是说，我们操作的购物车产品，是从集合中进行获取的
用JavaScript做简易的购物车的代码示例
10-19
主要介绍了用JavaScript做简易的购物车的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS实现简单的购物车
dxn16638400024的博客
06-30 3383
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
使用JavaScript实现简单的购物车功能
weixin_45730094的博客
05-11 7193
JavaScript 购物车
购物车html js代码,js实现购物车功能
weixin_32932149的博客
06-09 3588
本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下购物车实现3种方式1、利用cookie优点：不占用服务器资源，可以永远保存，不用考虑失效的问题缺点： 对购买商品的数量是有限制的，存放数据的大小 不可以超过2k，用户如果禁用cookie那么就木有办法购买商品，卓越网实现了用户当用户禁用cookie，也可以购买。2、利用 session优点：用户禁用cookie，也可以购物缺...
javascript简易购物车
最新发布
10-14
JavaScript简易购物车是一种常见的Web应用功能，用于模拟真实世界中的购物体验。在Web开发中，JavaScript扮演着关键角色，因为它负责处理用户交互、动态更新页面内容以及与服务器进行异步通信。在这个项目中，我们将...
JavaScript实现购物车功能
04-11
在JavaScript实现购物车功能的过程中...以上就是实现JavaScript购物车功能所涉及的主要技术点。在实际项目中，还会考虑性能优化、异常处理、响应式设计以及与其他前后端接口的交互等多个方面，以提供更完善的用户体验。
基于JavaScript实现购物车功能
10-20
在JavaScript实现购物车功能时，我们通常会涉及到前端交互、数据存储、动态更新以及计算等核心知识点。以下是对这些知识点的详细说明： 1. **前端交互**：在本例中，用户通过点击“我的购物车”按钮（`#btAdd`）来...
javascript实现购物车
05-31
在JavaScript实现购物车功能的过程中，我们通常会遇到多个关键知识点，包括数据存储、商品操作、数量管理、总价计算以及用户交互。以下是对这些知识点的详细解释： 1. **数据存储**：购物车中的商品信息需要被持久...
javascript 购物车 有数据库
11-14
javascript 购物车 数据库 根据用户的登录状态，如果用户没有登录，则用户加入到购物车中的产品，存储到session中；如果用户登录，则将用户购物车中的产品存储到数据库中或者从数据库中读取数据显示购物车列表。
Javascript实现购物车功能的详细代码
12-09
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。 现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采用三层架构方式对购物车进行设计，对javascript的综合应用较强，对javascript初学者进阶有一定的益处。 请看主页效果图： 现在读者已
JavaScript编写一个简易购物车功能
12-28
网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。  1、用html实现内容；  2、用css修饰外观；  3、用js(jq)设计动效。 第一步：首先是进行html页面的设计，我用一个大的div将所有商品包含，然后用不同的div将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中涉及到的商品都是网上随便copy的，不具有参考价值）：  <li cla
购物车（Cart）
03-27
java结合js技术实现类似淘宝平台的购物车的编辑。
购物车实例
01-27
通过Session机制实现的简单购物车实例，同时里面也有传递带中文参数的转码设置
JavaScript实现简单购物车效果
qq_41451415的博客
09-30 4978
CSS、JavaScript；本地存储（localstorage）实现简单购物车添加、删除、计算、本地存储等。文章最下方见效果图。 Html代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&a
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&
js 购物车基本功能的实现
我的博客
08-14 9589
先上一个效果图 步骤： ① 用js语句画页面（for循环创建四个元素） ② 实现全选功能：当全选的checked为true时，所有元素被选中（包括checked为true和被背景变为粉色）。当全选的checked为flase时，所有元素不被选中。当点击全选按钮时，反选按钮取消选中 ③ 实现反选功能：当反选按钮被选中时，选中点击前未被选中的元素，并且全选按钮取消选中 ④ 实现单选功能：当有一个元...
利用JSP与JS实现简易购物车
七进制的博客
12-20 1万+
自己编写的一个简易购物网站示例： 示例代码运行的结果：carts.jsp文件<%@ page contentType="text/html;charset=GBK" %> <%@ page import="java.util.*,java.sql.*" %> <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String
javascript写一个购物车页面
05-13
以下是一个简单的购物车页面的HTML和JavaScript代码示例： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>购物车页面</title> </head> <body> <h1>购物车</h1> <div> <h2>商品列表</h2> <ul id="product-list"></ul> </div> <div> <h2>购物车</h2> <ul id="cart"></ul> <p>总价: <span id="total-price">0</span> 元</p> <button onclick="checkout()">结算</button> </div> <script src="shopping-cart.js"></script> </body> </html> ``` JavaScript代码： ``` // 商品列表 const products = [ {name: "商品1", price: 10}, {name: "商品2", price: 20}, {name: "商品3", price: 30}, {name: "商品4", price: 40}, {name: "商品5", price: 50}, ]; // 购物车 const cart = []; // 获取商品列表元素 const productList = document.getElementById("product-list"); // 获取购物车元素 const cartList = document.getElementById("cart"); // 获取总价元素 const totalPrice = document.getElementById("total-price"); // 渲染商品列表 products.forEach(product => { const item = document.createElement("li"); item.innerHTML = ` <span>${product.name}</span> <span>${product.price}元</span> <button onclick="addToCart(${product.price})">加入购物车</button> `; productList.appendChild(item); }); // 渲染购物车 function renderCart() { cartList.innerHTML = ""; cart.forEach(item => { const li = document.createElement("li"); li.innerHTML = ` <span>${item.name}</span> <span>${item.price}元</span> <button onclick="removeFromCart(${item.price})">删除</button> `; cartList.appendChild(li); }); totalPrice.innerHTML = getTotalPrice(); } // 计算总价 function getTotalPrice() { return cart.reduce((total, item) => total + item.price, 0); } // 添加商品到购物车 function addToCart(price) { const product = products.find(p => p.price === price); if (product) { cart.push(product); renderCart(); } } // 从购物车中删除商品 function removeFromCart(price) { const index = cart.findIndex(item => item.price === price); if (index !== -1) { cart.splice(index, 1); renderCart(); } } // 结算 function checkout() { alert(`总价: ${getTotalPrice()}元`); } ``` 说明： 1. `products`数组保存商品列表，每个商品包含名称和价格两个属性。 2. `cart`数组保存购物车中的商品。 3. 使用`forEach`方法将商品列表渲染到页面上，每个商品都包含名称、价格和“加入购物车”按钮。 4. `addToCart`函数将商品添加到购物车中，如果购物车中已经存在该商品，则不会重复添加。 5. `removeFromCart`函数从购物车中删除商品。 6. `getTotalPrice`函数计算购物车中商品的总价。 7. `renderCart`函数渲染购物车中的商品列表和总价。 8. 点击“加入购物车”按钮或“删除”按钮会触发相应的函数。 9. 点击“结算”按钮会弹出总价的提示框。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值