js怎样实现简易购物车功能

这篇文章给大家分享的是有关js怎样实现简易购物车功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

一.整体效果图

（关灯下）

（开灯下）

二.HTML代码

                开灯
    
        
            
产品名称
            
产品单价
            
产品数量
            
总价
        
        
            
小米11
            
5000
            
                                5                            
            
25000
        
        
            
联想Y9000
            
10000
            
                                1                            
            
10000
        
        
            
男士护肤
            
200
            
                                1                            
            
200
        
        
            
总金额
            
5000
        
    

三.CSS代码

table,th,td,tr{    border: 5px solid slateblue;    border-radius: 10px;              }#cons{    border: 3px solid #FFFFFF;    width: 600px;    padding: 5px;    border-radius: 10px;    margin: 200px auto;}#body{    background-color: black;} table{    /*定义表格边框合并显示*/    /*border-collapse: collapse;*/    color: aquamarine;    width: 600px;    height: 200px;    text-align: center;    border-collapse: separate;border-spacing:0;/*border-spacing 属性设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。*/    table-layout:fixed;/*固定表格布局，水平布局仅仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关。*/ }#kg{    width: 30px;    /*border: 2px solid white;*/    background-color: red;    color: slateblue; }

四. js代码

// 加法function add(obj) {    // 获取商品的数量    var nums=obj.nextElementSibling[xss_clean]/*返回的是后一个兄弟元素节点的值*/    if(nums>0){        // 点击减一        nums--;        // 替换原来的值        obj.nextElementSibling[xss_clean]=nums;        // 改变总价的值        //获取商品单价        var price =obj.parentElement.previousElementSibling[xss_clean];        // 获取商品总价        var tatol= obj.parentElement.nextElementSibling[xss_clean];        obj.parentElement.nextElementSibling[xss_clean]=parseInt(nums)*parseInt(price);//parseInt 将字符串转成数值        money();    }     // console.log(nums); }// 减法function add2(obj){    var nums =obj.previousElementSibling[xss_clean]/*返回的是前一个兄弟元素节点的值*/    if(nums>=0){        // 点击加一        nums++;        // 替换原来的值        obj.previousElementSibling[xss_clean]=nums;        // 改变总价的值        //获取商品单价        var price =obj.parentElement.previousElementSibling[xss_clean];        // 获取商品总价        var tatol= obj.parentElement.nextElementSibling[xss_clean];        obj.parentElement.nextElementSibling[xss_clean]=nums*price;        money();    }    // console.log(nums)}//获取总金额的值，并改变它function money(){    //获取总金额的单元格    var mo =document.getElementById("total");    //获取商品总价的单元格    var momeys=document.getElementsByClassName("money");    //定义总金额的值    var sum =0;    for(var i=0;i
感谢各位的阅读！关于"js怎样实现简易购物车功能"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！