h5本地缓存实现购物车功能（全功能）

最新推荐文章于 2024-06-11 23:51:14 发布
最新推荐文章于 2024-06-11 23:51:14 发布
阅读量3.4k 收藏 8
点赞数 2
分类专栏： h5学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangyuwuzhu/article/details/82903312
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>购物车特效</title>
        <style type="text/css">
            *{margin: 0;padding: 0;list-style: none;}
            .content{
                width: 400px;
                height: 300px;
                margin: auto;
                
            }
            .list li{
                float: left;
                margin: 10px;
                cursor: pointer;
            }
            .list li img{
                height: 100px;
                width: 100px;
            }
            .list li .name{
                font-size: 12px;
                text-align: center;
            }
            .list li .price{
                font-size: 14px;
                color: red;
                text-align: center;
            }
            .shopp{
                width: 800px;
                padding-left: 100px;
            }
            
            #tb tr th{
                font-size: 14px;
                color: #122B40;
                padding: 5px;
                width: 200px;
                border: 1px solid #666;
            }
            #tb td{
                border-top: 0;
                font-size: 16px;
                color: #101010;
                padding-left: 45px;
                border: 1px solid #666;
            }
            #tb td img{
                width:36px;
                height:36px
            }
            #tb .numdit{
                width: 26px;
                height: 26px;
                background-color: #23527C;
                border-radius: 13px;
                color: #CCCCCC;
                font-size: 24px;
                text-decoration: none;
                font-weight: bold;
                display: inline-block;
                text-align: center;
                margin-top: 10px;
                padding-bottom: 10px;
            }
            #tb .delect{
                width: 50px;
                height: 30px;
                background-color: red;
                color: #CCCCCC;
            }
            .bottomk{
                width: 798px;
                height: 36px;
                border: 1px solid #666666;
                margin-left: 100px;
            }
            .bottomkLeft{
                float: left;
                width: 80px;
                height: 36px;
                line-height: 36px;
                margin-left: 30px;
                background-color: #204D74;
                border-radius: 13px;
            }
            .bottomkLeft a{
                text-decoration: none;
                font-size: 20px;
                color: #CCCCCC;
                
            }
            .bottomkRight{
                float: right;
                width: 200px;
                height: 36px;
                line-height: 36px;
                padding-right: 60px;
            }
            .bottomkRight a{
                text-decoration: none;
                font-size: 16px;
                
            }
            .bottomkRight span{
                font-size: 16px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <ul class="list" id="ul">
                <li>
                    <div>
                        <img src="img/1.jpg" />
                    </div>
                    <p class="name">荣耀V10</p>
                    <p class="price">
                        <span>$</span>
                        <span>3000</span>
                    </p>
                </li>
                <li>
                    <div>
                        <img src="img/2.jpg" />
                    </div>
                    <p class="name">苹果8</p>
                    <p class="price">
                        <span>$</span>
                        <span>5000</span>
                    </p>
                </li>
                <li>
                    <div>
                        <img src="img/3.jpg" />
                    </div>
                    <p class="name">小米MIXS2</p>
                    <p class="price">
                        <span>$</span>
                        <span>3299</span>
                    </p>
                </li>
                <li>
                    <div>
                        <img src="img/4.jpg" />
                    </div>
                    <p class="name">联想小新</p>
                    <p class="price">
                        <span>$</span>
                        <span>6299</span>
                    </p>
                </li>
                <li>
                    <div>
                        <img src="img/5.jpg" />
                    </div>
                    <p class="name">戴尔</p>
                    <p class="price">
                        <span>$</span>
                        <span>5499</span>
                    </p>
                </li>
                <li>
                    <div>
                        <img src="img/6.jpg" />
                    </div>
                    <p class="name">小米笔记本</p>
                    <p class="price">
                        <span>$</span>
                        <span>5599</span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="shopp">
            <table id="tb" cellpadding="0"cellspacing="0">
                <tr>
                    <th><input type="checkbox" οnclick="allCheckbox(this)" id="inck" />全选</th>
                    <th>商品图片</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>编辑</th>
                </tr>
                <!--<tr>
                    <td><input type="checkbox" /></td>
                    <td>
                        <img src="img/1.jpg" />
                    </td>
                    <td>荣耀V10</td>
                    <td>3299</td>
                    <td>
                        <a href="#" class="numdit" οnclick="subNum(this)">-</a>
                        <span>1</span>
                        <a href="#" class="numdit" οnclick="addNum(this)">+</a>
                    </td>
                    <td>
                        <a href="#" class="delect" οnclick="removeTR(this)">删除</a>
                    </td>
                </tr>-->
                
            </table>
            
        </div>
        <div class="bottomk">
            <div class="bottomkLeft">
                <a href="#" οnclick="removCK()">删除选中</a>
            </div>
            <div class="bottomkRight">
                <a href="#">总计：</a>
                <span id="totals">0</span>
            </div>            
        </div>
        <script>
            var tb=document.getElementById("tb");
            //增加tr
            window.οnlοad=function(){
                //从localstorage取出购物车信息
                if(window.localStorage){
                    var shoppingText=localStorage.getItem("shoppingInfo");
                    if(shoppingText!=null){
                        var shopping=JSON.parse(shoppingText);
                        for(var a=0;a<shopping.length;a++){
                            var tr=tb.insertRow(tb.rows.length);
                            var td1=tr.insertCell(tr.cells.length);
                            td1.innerHTML="<input type='checkbox' class='inp' />";
                            var td2=tr.insertCell(tr.cells.length);
                            td2.innerHTML="<img src='"+shopping[a].img+"' />";
                            var td3=tr.insertCell(tr.cells.length);
                            td3.innerHTML=shopping[a].name;
                            var td4=tr.insertCell(tr.cells.length);
                            td4.innerHTML=shopping[a].price;
                            var td5=tr.insertCell(tr.cells.length);
                            td5.innerHTML="<a href='#' class='numdit' οnclick='subNum(this)'>-</a><span>"+shopping[a].num+"</span><a href='#' class='numdit' οnclick='addNum(this)'>+</a>";
                            var td6=tr.insertCell(tr.cells.length);
                            td6.innerHTML="<a href='#' class='delect' οnclick='removeTR(this)'>删除</a>";
                        }
                        moneys();
                    }
                }
                var lis=document.getElementById("ul").children;
                for(var i=0;i<lis.length;i++){
                    lis[i].οnclick=function(){
                        var img=this.children[0].children[0].getAttribute("src");
                        var name=this.children[1].innerHTML;
                        var price=this.children[2].children[1].innerHTML;

                        var isExist=false;
                       for(var j=1;j<tb.rows.length;j++){
                           if(tb.rows[j].cells[2].innerHTML==name){
                               var oldnum=tb.rows[j].cells[4].children[1].innerHTML;
                               tb.rows[j].cells[4].children[1].innerHTML=parseInt(oldnum)+1;
                               isExist=true;
                               if(window.localStorage){
                                    var shoppingText=localStorage.getItem("shoppingInfo");
                                    var shoppingObject=JSON.parse(shoppingText);
                                    shoppingObject[j-1].num++;
                                    localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject));
                               }
                               break;
                           }
                       }
                       if(isExist==false){
                            var tr=tb.insertRow(tb.rows.length);
                            var td1=tr.insertCell(tr.cells.length);
                            td1.innerHTML="<input type='checkbox' class='inp' />";
                            var td2=tr.insertCell(tr.cells.length);
                            td2.innerHTML="<img src='"+img+"' />";
                            var td3=tr.insertCell(tr.cells.length);
                            td3.innerHTML=name;
                            var td4=tr.insertCell(tr.cells.length);
                            td4.innerHTML=price;
                            var td5=tr.insertCell(tr.cells.length);
                            td5.innerHTML="<a href='#' class='numdit' οnclick='subNum(this)'>-</a><span>1</span><a href='#' class='numdit' οnclick='addNum(this)'>+</a>";
                            var td6=tr.insertCell(tr.cells.length);
                            td6.innerHTML="<a href='#' class='delect' οnclick='removeTR(this)'>删除</a>";

                            //向本地存储中添加一条商品信息
                            if(window.localStorage){
                                 var shoppingText=localStorage.getItem("shoppingInfo");
                                 var shoppingObject=null;
                                 if(shoppingText==null){
                                     shoppingObject=[];
                                 }else{
                                    shoppingObject=JSON.parse(shoppingText);
                                 }
                                     var goods=new Object();
                                     goods.img=img;
                                     goods.name=name;
                                     goods.price=price;
                                     goods.num=1;
                                     //将商品对象保存到数组中
                                     shoppingObject.push(goods);
                                     localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject))
                            }
                        }
                        moneys();
                    }
                }
            }
            //全选
            function allCheckbox(ck){
                var is=document.getElementsByClassName("inp");
                for(var i=0;i<is.length;i++){
                    is[i].checked=ck.checked;
                }
            }
            //删除选中
            function removCK(){
                var is=document.getElementsByClassName("inp");
                for(var i=0;i<is.length;i++){
                    if(is[i].checked==true){
                        var tr=is[i].parentNode.parentNode;
                        var index=tr.rowIndex;
                        var tbody=tr.parentNode;
                        tbody.removeChild(tr);
                        i--;
                        if(window.localStorage){
                            var shoppingText=localStorage.getItem("shoppingInfo");
                            var shoppingObject=JSON.parse(shoppingText);
                            shoppingObject.splice(index-1,1);
                            localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject));
                        }
                    }
                    
                }
                if(document.getElementById("inck").checked==true){
                    document.getElementById("inck").checked=false;
                }
                moneys();
            }
            //增加
            function addNum(bt){
               var num=bt.previousElementSibling;
               num.innerHTML=parseInt(num.innerHTML)+1;
               var index=bt.parentNode.parentNode.rowIndex-1;
               //增加本地缓存中的数量
               if(window.localStorage){
                   var shoppingText=localStorage.getItem("shoppingInfo");
                   var shoppingObject=JSON.parse(shoppingText);
                   shoppingObject[index].num=shoppingObject[index].num+1;
                   localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject));
               }
               moneys();
            }
            //减少
            function subNum(bt){
                var num=bt.nextElementSibling;
                var newNum=parseInt(num.innerHTML);
                 var index=bt.parentNode.parentNode.rowIndex-1;
                if(newNum>1){
                    num.innerHTML=newNum-1;
                    //减少本地缓存中的数量
                    if(window.localStorage){
                        var shoppingText=localStorage.getItem("shoppingInfo");
                        var shoppingObject=JSON.parse(shoppingText);
                        shoppingObject[index].num=shoppingObject[index].num-1;
                        localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject));
                    }
                    moneys();
                }
            }
            //删除一行
            function removeTR(a){
                var tr=a.parentNode.parentNode;
                var index=tr.rowIndex;
                var tbody=tr.parentNode;
                tbody.removeChild(tr);
                
                //删除本地缓存中的一行
                if(window.localStorage){
                    var shoppingText=localStorage.getItem("shoppingInfo");
                    var shoppingObject=JSON.parse(shoppingText);
                    shoppingObject.splice(index-1,1);
                    localStorage.setItem("shoppingInfo",JSON.stringify(shoppingObject));
                 }
            }
             //计算总价
            function moneys(){
                var money=0;
                for(var i=1;i<tb.rows.length;i++){
                    var price=parseFloat(tb.rows[i].cells[3].innerHTML);
                    var num=parseInt(tb.rows[i].cells[4].children[1].innerHTML);
                     money+=price*num;
                }
                 document.getElementById("totals").innerHTML=money;
           }
        </script>
    </body>
</html>

愚城
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易购物车的实现
Wendy
09-09 7650
网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。 1、用html实现内容； 2、用css修饰外观； 3、用js(jq)设计动效。   第一步：首先是进行html页面的设计，我用一个大的div将所有商品包含，然后用不同的div将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中设计到都是网上随
使用Taro实现小程序商城的购物车功能模块的实例代码
11-20
【使用Taro实现小程序商城的购物车功能模块的实例代码】是关于利用Taro框架构建一个跨平台的小程序商城购物车模块的实践教程。Taro是一个遵循React语法规范的多端开发框架，允许开发者用一套代码适配多个平台，如...
电商小程序购物车跳转到支付页面数据传递（利用wx.setStorage和wx.getStorage）
qq_45155741的博客
08-05 840
购物车点击结算 const {userName, address, telNumber, buyList, checkedNum, checkedPrice} = this.data wx.setStorage({ key:"payInfo", data:{ userName, address, telNumber,
前端实现购物车，创建订单和支付流程
m0_46631458的博客
07-25 1780
可以为购物车页面添加一些交互功能，比如点击商品列表中的某个商品可以跳转到商品详情页，点击加入购物车按钮可以将商品添加到购物车等。显示勾选的购物车数据：前端页面需要获取用户选择的商品信息，并将其展示在订单页面上，包括商品名称、价格、数量等信息。后端接收到支付请求后，根据订单信息调用相应的支付接口，获取支付链接或二维码等支付凭证，并将其返回给前端。用户点击支付按钮后，前端向后端发送支付请求，传递支付所需的参数，如订单信息、支付金额等。前端可以在支付完成的回调函数中处理支付结果，如展示支付成功或失败的提示信息。
app-ios 内嵌h5的缓存问题
最新发布
大雾起了清晨
06-11 603
在iOS应用中内嵌H5页面时，可能会遇到缓存问题，导致页面更新不及时。通过Nginx服务器配置来控制缓存行为。例如，可以在Nginx配置文件中添加以下指令以禁止缓存。每次H5项目更新时，更改版本号，这样iOS应用在请求资源时会因为版本号变化而加载新资源。
订单（四）01-订单页面布局-获取收货地址——从购物车界面-选购结算-缓存数据操作后，订单界面才会有数据
weixin_44867717的博客
10-29 1272
订单页面布局——从购物车界面-选购结算-缓存数据操作后，订单界面才会有数据 实例 编译订单界面 在order文件夹下新建main.less .cart-top { .receive { display: flex; padding: 20rpx; justify-content: space-between; position: relative; padding-right: 50rpx; } .address { padding: 20rpx
购物车H5代码
11-09
移动端H5页面购物车实现全选，单选切换，价格结算刷新等。
h5手机端带下拉刷新购物车
11-02
总的来说，"手机端带下拉刷新的购物车"项目展示了如何利用H5技术构建一个功能齐全、体验优良的移动端购物应用。它融合了前端开发的多个重要知识点，包括数据交互、动态渲染、用户体验优化等，对于学习和实践Web开发...
基于jq的购物车-移动端购物车
01-08
在本文中，我们将深入探讨如何实现一个基于jQuery（简称jq）的移动端购物车功能。这个购物车系统具备了常见的电商应用特性，如单条商品的选择、全选、商品数量的增减以及总价的实时更新，同时也支持删除单个商品。...
H5静态商城大家可以学习一下
05-13
9. **Service Worker**：可以缓存资源，实现离线访问，并对网络请求进行拦截和修改，优化性能和用户体验。 10. **Accessibility**：HTML5提供了更好的无障碍支持，确保有特殊需求的用户也能方便地使用商城。 通过...
【尚硅谷】徐靖博 最新电商项目实战（完结）
12-03
本资源为网传资源，为一套比较全的电商项目，系统架构采用SOA dubbo+EasyI实现，资源过大上传乃是下载链接，如有侵权请联系/留言，不多说下面上目录： 1.01 电商系统介绍2 f% Z/ C0 z% {1 l" q+ R 2.02 电商类型介绍...
手机端H5购物车
07-27
类似京东购物车,可以对购物车商品进行增删改,有单选全选功能,使用简单,需要改上面物品,只需要修改一个数组即可
购物车H5前端页面，带前计算端逻辑
07-25
购物车H5前端页面，带前计算端逻辑，实现前端展示类的全选、单选、数量加减，滑动删除展示，计算总价，小计等功能
H5App简洁手机电子购物商城
04-19
比较全面的h5移动商城网站，包括登陆，首页，分类，列表，商品详情，购物车，个人中心，订单中心等等一系列的移动端商城
h5高仿手机购物网站wap
12-03
高仿购物手机网站html。总计13个html页面布局。
h5前端购物车，css3动画效果，侧滑菜单. 集合
09-20
该文件包含 h5前端购物车， css3动画效果 ，侧滑菜单 。能够快速帮助正在开发商城的同学实现购物车，侧滑菜单等功能，如果有时间的话还可以将css3动画加入到相应的页面中。
javaScript商城实现购物车思路
u014739462的博客
04-27 9265
商城实现购物车思路体验流程 (1)：用户一个一个商品的勾选，当摸个店铺下的商品选满则要将该店铺选中，否则不选中该店铺。在所有店铺选满以后，标记选中全选按钮，否则不选中全选按钮。 (2)：用户一个店铺一个店铺的勾选，这时要选中标记选中店铺下的所有商品，反之不选中。在所有店铺选满以后，标记选中全选按钮，否则不选中全选按钮。 (3)：直接勾选全选按钮，这时要选中所有商品和店铺，反之则不选中。 (3
H5购物车
zy233762的博客
09-22 1095
张洋洋0922 h3{margin-right: 400px;} table, th , td { border: 1px solid grey; border-collapse: collapse;
网页设计购物车php,利用html来制作一个简单美观的购物车界面
weixin_35687240的博客
03-12 1259
首先来展示一下购物车界面：(学习视频分享：html视频教程)这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的以下是相关代码：index.html商品名称单价数量操作旁氏洗发露991删除旁氏洗发露991删除小计：总数：确认购买全部清空car.cssbody{overflow: hidden;text-align: center;}....
h5小程序实现打卡签到功能
09-06
H5小程序可以通过以下步骤实现打卡签到功能： 1. 创建签到页面：在H5小程序中，可以创建一个签到页面，用于显示签到的信息和操作按钮。 2. 获取位置信息：需要使用小程序的地理位置API，获取用户的当前位置信息。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值