javascript如何实现购物车效果

这篇文章将为大家详细讲解有关javascript如何实现购物车效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。javascript实现购物车效果的方法:1、使用table来进行界面布局;2、自行封装getClasses函数;3、通过js实现选中和全选商品,以及商品数量的增减等功能即可。

成都创新互联是一家专注于网站建设、成都网站设计与策划设计,东山网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:东山等地区。东山做网站价格咨询:028-86922220

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

javascript怎么实现购物车效果?

用javascript实现的购物车实例

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

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

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

javascript如何实现购物车效果

一、界面布局

使用的是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如何实现购物车效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


文章题目:javascript如何实现购物车效果
转载来于:http://myzitong.com/article/igsjcg.html