经典案例: 购物车

来源：互联网发布：bmob后端云 java 编辑：程序博客网时间：2024/05/07 16:58
完整案例:
<!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 type="text/javascript">        function add_shoppingcart(btn){            //console.log(btn);            var tr = btn.parentNode.parentNode;            //console.log(tr);            //找到全部td            var tds = tr.getElementsByTagName('td');            //console.log(tds);            //获取商品名            var name=tds[0].innerHTML;            var price=parseFloat(tds[1].innerHTML);            //console.log(name);            //console.log(price);            //将商品信息添加到购物车表格            var tr = document.createElement('tr');            tr.innerHTML='<td>'+name+'</td>'+                '<td>'+price+'</td>'+                '<td align="center">'+                '<input type="button" value="-" onclick="changeNum(this, -1);">'+                '<input type="text" size="3" readonly value="1"/>'+                '<input type="button" value="+" onclick="changeNum(this, 1);">'+            '</td>'+                '<td></td>'+                '<td align="center"><input type="button" value="X" onclick="removeItem(this);"></td>';            //console.log(tr);            //将tr插入到购物车            var tbody=document.getElementById('goods');            tbody.appendChild(tr);            total();        }        //计算商品总价        function total(){            //console.log('total()');            var tbody=$('goods');            var trs =                 tbody.getElementsByTagName('tr');            console.log(trs);            var sum = 0;            for(var i=0; i<trs.length; i++){                var tr = trs[i];                console.log(tr);                var tds=tr.getElementsByTagName('td');                console.log(tds);                //获取商品的价格                var price=parseFloat(                        tds[1].innerHTML);                console.log(price);                //获取数量值                 var num = parseInt(tds[2]                    .getElementsByTagName('input')[1]                    .value);                console.log(num);                //计算金额                var money = num*price;                tds[3].innerHTML=money.toFixed(2);                //累计总价                sum += money;            }            //将总价写到 tfoot中            $('total').innerHTML=sum.toFixed(2);        }        function $(id){            return document.getElementById(id);        }        function changeNum(btn, n){            //console.log(n);            //找到当前的num            var input=btn.parentNode                .getElementsByTagName('input')[1];            console.log(input);            var num = parseInt(input.value);            console.log(num);             //增加/减少            num += n;            //检查是否<=0            if(num<=0){                return;            }            //更新 input.value            input.value = num;            total();        }        function removeItem(btn){            var tr=btn.parentNode.parentNode;            var tbody = $('goods');            tbody.removeChild(tr);            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="-"/>            <input type="text" size="3" readonly value="1"/>            <input type="button" value="+"/>          </td>          <td>80</td>          <td align="center"><input type="button" value="x"/></td>        </tr>        -->      </tbody>      <tfoot>        <tr>          <td colspan="3" align="right">总计</td>          <td id="total"></td>          <td></td>        </tr>      </tfoot>    </table>      </body></html>
查看图片附件
0 0