原生js实现购物车相关功能

Posted 2020-10-13 yingleiming

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现购物车相关功能相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现购物车的相关功能</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        table{
            width: 600px;
            border-collapse: collapse;
        }
        th,td{
            border:1px solid #000;
            width: 150px;
            /*padding:5px 40px;*/
            text-align: center;
        }
        #chart{
            width: 800px;
            margin:100px auto;
        }
        button{
            width: 20px;
            height: 20px;
        }
        thead{
            background-color: aquamarine;
        }
        tfoot{
            background-color: transparent;
        }
    </style>
</head>
<body>
    <div id="chart">
        <table>
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>iPhone6</td>
                <td>￥4488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>0</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td>iPhone7</td>
                <td>￥7488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>0</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td>iPhone8</td>
                <td>￥8488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>0</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td>iPhoneX</td>
                <td>￥9488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>0</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>
                    0
                </td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" align="right">Total</td>
                    <td>0.00</td>
                </tr>
            </tfoot>
        </table>
    </div>



<script src="js/jquery-3.2.1.min.js"></script>
<script>
//    创建函数 calc
    function calc(btn) {
//        第一步：修改数量
//        获得btn的父节点保存在变量td中
        var td=btn.parentNode;
        console.log(td);
//        获取td下的唯一一个span元素，保存在变量span中
        var span=td.querySelector("span");
        console.log(span);
//        获得span的内容，保存在变量n中,并转化其string形式为number形式
        var n=parseInt(span.innerHTML);
        console.log(typeof(n));
//        判断:如果btn是+，就+1；否则，如果已经是1，就为0，否则就—1；
        n+=btn.innerHTML=="+"?1:n==0?0:-1;
//        设置span的内容为n
        span.innerHTML=n;
//        计算小计
//获得td的前一个兄弟元素的内容，从？位截取，转为浮点数后，保存在变量price中
        var price=parseFloat(td.previousElementSibling.innerHTML.slice(1));
        console.log(typeof (price));
//        设置td的后一个兄弟元素的内容为"&yen;"+price*n,要求小计要按2位小数四舍五入
        var total=td.nextElementSibling.innerHTML="&yen;"+price*n.toFixed(2);
//        计算总和
//        获得id为chart下的tbody下的每个tr下的最后一个td，保存在变量tds中
        var data=document.getElementById("chart");
        console.log(data);
        var tds=data.querySelectorAll("tbody>tr>td:last-child");
        console.log(tds);
        for(var i=0,sum=0;i<tds.length;i++){
            //        遍历tds中每一个td，同时声明变量sum为0
            sum+=parseFloat(tds[i].innerHTML.slice(1));
        }//遍历结束
//        设置id为chart下的tfoot下的tr下的最后一个td的内容为:
//        "&yen;"+sum.toFixed(2);
        data.querySelector("tfoot>tr>td:last-child").innerHTML="&yen;"+sum.toFixed(2);
    }

</script>

</body>
</html>

以上是关于原生js实现购物车相关功能的主要内容，如果未能解决你的问题，请参考以下文章

原生JavsScript实现简单购物车面向对象原生代码

微信小程序结合原生JS实现电商模板

原生JS实现购物车功能

原生js 实现购物车价格和总价统计

原生js实现点击添加购物车按钮出现飞行物飞向购物车