天天看点

javascript实现简单购物车功能(有图)

javascript实现简单购物车功能(有图)

本文链接:https://blog.csdn.net/qq_41140741/article/details/81543105

Js实现淘宝购物车类似功能:

主要有添加商品

增加和减少商品数量

根据增加、减少或选择的商品获取金额

实现商品价格的计算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
    </head>
    <style type="text/css">
        h1{
            text-align: center;
        }
        table{
            margin: 0 auto;
        }
    body{
        font-size: larger;color: crimson;
        background-image: url(img/2.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    table th,table td{

    }
    </style>
    <body >
        <h1>购物车:真划算</h1>
        <table  >
            <tr>
                <!--文本th-->
                <th>商品</th>
                <th  >单价</th>
                <th>颜色</th>
                <th>库存</th>
                <th>好评率</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>面膜</td>
                <td  >150</td>
                <td>白色</td>
                <td>100</td>
                <td>88%</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/>
                </td>
            </tr>
            <tr>
                <td>口红</td>
                <td  >350</td>
                <td>白色</td>
                <td>166</td>
                <td>82%</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/>
                </td>
            </tr>
            <tr>
                <td>鼠标</td>
                <td >150</td>
                <td>黑色</td>
                <td>99</td>
                <td>75%</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/>
                </td>
            </tr>
            <tr>
                <td>键盘</td>
                <td  >120</td>
                <td>黑色</td>
                <td>50</td>
                <td>80%</td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcar(this)"/>
                </td>
            </tr>
        </table>
        <h1> 购物车</h1>
        <table >
            <thead>
                <tr>
                <th>商品</th>
                <th >单价</th>
                <th>数量</th>
                <th>金额</th>
                <th>删除</th>
                </tr>
            </thead>
            <tbody id="goods">
                <!--<tr>
                <td>面膜</td>
                <td>150</td>
                <td align="center"> 
                    <input type="button" value="-" id="jian" οnclick="change(this,-1);"/>-->
                    <!--readonly规定输入字段为只读-->
                    <!--<input id="text" type="text" size="1" value="1" readonly="readonly" />
                    <input type="button" value="+" id="add" οnclick="change(this,1);"/>
                </td>
                <td> <input id="money" size="1" value="80"></input></td>
                <td align="center">
                    <input type="button" value="X" οnclick="del(this)" />
                </td>
                </tr>-->
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" align="center" >总计</td>
                    <td id="total"></td>
                    <td>元</td>
                </tr>
            </tfoot>
        </table>
    </body>
    <script type="text/javascript">
        //this js中指当前对象
        function add_shoppingcar(btn){
            var tr=btn.parentNode.parentNode;
            var tds=tr.getElementsByTagName("td");
            var name=tds[0].innerHTML;
            var price=tds[1].innerHTML;
            var tbody=document.getElementById("goods");
            var row=tbody.insertRow();//insertRow表格开头插入新行
            row.innerHTML="<td>"+name+"</td>"+
        "<td>"+price+"</td>"+
        "<td align='center'>"+
        "<input type='button' value='-' id='jian'  οnclick='change(this,-1)'  />"+
        "<input id='text' type='text' size='1' value='1' readonly='readonly' />"+
        "<input type='button' value='+' id='add'  οnclick='change(this,1)'  />"+
        "</td>"+
        "<td>"+price+"</td>"+
        "<td align='center'>"+
            "<input type='button' value='X' οnclick='del(this)'/>"+
        "</td>"+
        "</tr>"
        total();
        }
        //增加减少数量,用n正负1来表示点击了加减按钮
        function change(btn,n){
        //获取数量的三个input对象
        var inputs = btn.parentNode.getElementsByTagName("input");
        //获取原来的数量
        var amount = parseInt(inputs[1].value);
        //当amount=1时不能再点击"-"符号
        //用n<0来表示点击了减button
        if(amount<=1 && n<0){
            return;
        }
        //根据加减来改变数量
        inputs[1].value = amount + n;
        //将改变后的数量值赋值给amount
        amount = inputs[1].value;
        //获取表格中的行
        var tr = btn.parentNode.parentNode;
        //获取所有的列
        var tds = tr.getElementsByTagName("td");
        //获取单价
        var price = parseFloat(tds[1].innerHTML);
        //总价=单价*数量
        var m = price * amount;
        //将总价赋值给相应的位置
        tds[3].innerHTML = m;
        //调用total方法,求总计
        total();
    }


        function total(){
            var tbody=document.getElementById("goods");
            var trs=tbody.getElementsByTagName("tr");
            var sum=0;
            for(var i=0;i<trs.length;i++){
                var tds=trs[i].getElementsByTagName("td");
                var m=tds[3].innerHTML;
                sum += parseFloat(m);
            }
            var total=document.getElementById("total");
            total.innerHTML = sum;
        }
        function del(i){
            var tr=i.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
            //tr.remove(tr);
            total();
        }
    </script>
</html>
           

实现效果:

javascript实现简单购物车功能(有图)