javascript怎么实现购物车效果

javascript实现购物车效果的方法：1、使用table来进行界面布局；2、自行封装getClasses函数；3、通过js实现选中和全选商品，以及商品数量的增减等功能即可。

本文操作环境：windows7系统、javascript1.8.5版，DELL G3电脑

javascript怎么实现购物车效果？

用javascript实现的购物车实例

基于javascript实现的购物车实例：

立即学习“Java免费学习笔记（深入）”；

首先是效果和功能，如下图所示，具有购物车的基本功能。

包括1、选中和全选商品；2、商品数量的增减；3、单个商品价格的计算；4、总价的计算；5、删除商品。

javascript实现购物车效果

javascript实现购物车效果,通过原生js代码实现购物车效果，一般电商网站或者商城网站会使用到购物车的效果，点击加减，总价随之变化，选中商品，点击删除，可以删除选中的商品！

下载

一、界面布局

使用的是table来进行布局，由于用js来获取tr 和 td节点的时候，可以获取带下标的元素集合，操作起来较为便利。

html+css的代码如下：

    
    
    



    

        

            
  全选
            
商品
            
单价
            
数量
            
小计
            
操作
        
        

            

            
@@##@@外星人笔记本电脑17 R4 15R3 13寸 17寸 alienware今晚吃鸡游戏本
            
12888.00
            

                

                    
-
                    
1
                    
+
                
            
            

            
删除
        
        

            

            
@@##@@任天堂（Nintendo）Switch 家用游戏机 掌机NS智能体感游戏主机
            
2258.00
            

                

                    
-
                    
1
                    
+
                
            
            

            
删除
        
        

            

            
@@##@@Microsoft/微软 Surface Pro i5 8G 256G 笔记本平板电脑二合一
            
4999.00
            

                

                    
-
                    
1
                    
+
                
            
            

            
删除
        
        

            

            
@@##@@Apple/苹果 10.5 英寸 iPad Pro
            
3666.00
            

                

                    
-
                    
1
                    
+
                
            
            

            
删除
        
    

    

        
    全选
        
全选商品件^
        
合计：¥
        
结算
    

二、javascript代码

自行封装了getClasses（）函数，避免兼容性问题。

var prices = getClasses("price"),
    cart = document.getElementById("cart");
    acc = getClasses("acc"),
    totals = getClasses("total"),
    detracts = getClasses("desymbol"),
    adds = getClasses("adsymbol"),
    NumofGoods = document.getElementById("NumofGoods"),
    addupto = document.getElementById("addupto"),
    allSelect = getClasses("allSelect"),
    select = getClasses("select"),
    dele = getClasses("dele");

count();
countAll();

for(var i=0; i
 推荐学习：《javascript基础教程》