2018-03-05 购物车

作者: 吴鹏608 | 来源:发表于2018-03-05 16:05 被阅读0次

2018-03-05
2018-03-05 购物车
SQL Error: 1366, SQLState: 22001
2018-03-06
纤•韵瑜伽馆：三•八女神节活动火爆来袭！！献给女神们的一份大礼！
我也曾经迷失在那片，美好
商城之购物车
购物车模块实现
VMware下kali linux系统安装VMware tool
Qt 5.10.1 & vs2017 静态编译

<!DOCTYPE html>
    <html>
    <head>
        <title>购物车</title>
        <meta charset="utf-8" />
        <style type="text/css">
            h1 {
                text-align:center;
            }
            table {
                margin:0 auto;
                width:60%;
                border:2px solid #aaa;
                border-collapse:collapse;
            }
            table th, table td {
                border:2px solid #aaa;
                padding:5px;
            }
            th {
                background-color:#eee;
            }
        </style>

        <script>
            function del(btn) {
                btn.parentNode.parentNode.remove();
                map.delete(btn.parentNode.parentNode.cells[0].innerHTML);
                sum();
            }

            function increase(btn) {
                var input = btn.previousElementSibling;
                var count = parseInt(input.value);
                count++;
                input.value = count;

                //重新计算金额
                var td = btn.parentNode.previousElementSibling;
                var single_price = parseInt(td.innerHTML);

                var price = single_price*count;
                btn.parentNode.nextElementSibling.innerHTML = price;
                sum();
            }
            function decrease(btn) {
                var input = btn.nextElementSibling;
                var count = parseInt(input.value);
                if(count <= 1)
                {
                    count = 1;
                }
                else{
                    count--;
                }

                input.value = count;

                //重新计算金额
                var td = btn.parentNode.previousElementSibling;
                var single_price = parseInt(td.innerHTML);

                var price = single_price*count;
                btn.parentNode.nextElementSibling.innerHTML = price;
                sum();
            }

            var map = new Map();

            function add_shoppingcart(btn) {

                var tbody = document.getElementById('goods');

//            alert(btn.parentNode.parentNode.cells[0].innerHTML);
//            alert(btn.parentNode.parentNode.children[0].innerHTML);

                var goods_name = btn.parentNode.parentNode.cells[0].innerHTML;


                if(map.has(goods_name))
                {
                    var tr = map.get(goods_name);
                    increase(tr.cells[2].lastElementChild);
                }
                else
                {
                    var goods_price = btn.parentNode.parentNode.cells[1].innerHTML;

                    //生成一行tr
                    var tr = document.createElement('tr');
                    var html = `<td>${goods_name}</td>
      <td>${goods_price}</td>
      <td align="center">
        <input type="button" value="-" onclick="decrease(this)"/>
        <input type="text" size="3" readonly value="1"/>
        <input type="button" value="+" onclick="increase(this)"/>
      </td>
      <td>${goods_price}</td>
      <td align="center">
          <input type="button" value="x" onclick="del(this)"/>
      </td>`;

                    tr.innerHTML = html;
                    tbody.appendChild(tr);

//                map.put(key,value);
                    map.set(goods_name, tr);
                }

                sum();
            }


            function sum() {
                var tbody = document.getElementById('goods');
                var total = 0;
                for(var i = 0; i < tbody.children.length;i++)
                {
                    var price = parseInt(tbody.children[i].cells[3].innerHTML);
                    total += price;
                }
                document.getElementById('total').innerHTML = total;
            }
        </script>
    </head>
<body>
<h1>真划算</h1>
<table>
    <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
        </td>
    </tr>
    <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(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>罗技M185鼠标</td>-->
    <!--<td>80</td>-->
    <!--<td align="center">-->
    <!--<input type="button" value="-" onclick="decrease(this)"/>-->
    <!--<input type="text" size="3" readonly value="1"/>-->
    <!--<input type="button" value="+" onclick="increase(this)"/>-->
    <!--</td>-->
    <!--<td>80</td>-->
    <!--<td align="center">-->
    <!--<input type="button" value="x" onclick="del(this)"/>-->
    <!--</td>-->
    <!--</tr>-->
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="right">总计</td>
        <td id="total"></td>
        <td></td>
    </tr>
    </tfoot>
</table>
</body>
</html>