js学习笔记之购物车1

来源：互联网发布：levis淘宝推荐店铺编辑：程序博客网时间：2024/05/22 10:30
初学js，写了一个购物车练练手

**我把css和js代码都放在了一个页面，方便大家查看
下面是源码，购物车2的链接在最下面：**
<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />    <!-- css部分 -->    <style type="text/css">        h1{            text-align: center;        }        table{            background-color: #DDD;            margin: 0 auto;            width:60%;            border: 2px solid #999;            border-collapse:collapse;        }        table th,table td{            border: 2px solid #999;            padding:5px;            text-align: center;        }    </style>    <!-- js部分 -->    <script type="text/javascript">        //购物车添加商品        //number的作用，添加商品的id和删除输入框的value值相等        var number=0;        function add(id) {            //添加商品之前检查一下购物车中是否已经有该商品了,目前还没写好            //获取购物车表下的所以tr            //var cartrs = document.getElementsByTagName("table")[1].getElementsByTagName("tr");            ////遍历tr中的id，            //if(cartrs.length > 2){            //  for(var i=0;i<cartrs.length;i++){            //  if(cartrs[i].id != number){   //                 //如果已经添加了该商品就在该商品的数量上+1   //                 addnumber(number);   //                 total();            //      return;            //  }            //}            //}            var tr = document.getElementById(id);//获取商品对应的tr            var proEle = tr.getElementsByTagName("td");            var name = proEle[0].innerHTML;//注意，这儿的商品的名字是.innerHTML，只有imput输入框才有value属性            var price = proEle[1].innerHTML;            //创建一个tr元素把信息添加到购物车表：            var newtr = document.createElement("tr");            newtr.setAttribute("class","addtr");            newtr.setAttribute("id",number)            newtr.innerHTML="<td>"+name+"</td> <td>"+price+"</td> <td><input type='button' value='-'  onclick='reducenumber("+number+")'/> <input type='text' value='1'/> <input type='button' onclick='addnumber("+number+")' value='+'/></td> <td>"+price+"</td> <td><input type='button' value='移除商品' onclick='del("+number+")'/></td>";            //获取购物车第一个tr元素，后吧newtr元素添加到它的下面            var addtr = document.getElementsByClassName("addtr");            addtr[0].parentNode.insertBefore(newtr,addtr[0]);            number++;            total();        }        //删除商品：注意删除后商品的总价发生变化        function del(number) {            var deltr = document.getElementById(number);            deltr.parentNode.removeChild(deltr);            total();        }        //计算总价：        function total() {            var addtr = document.getElementsByClassName("addtr");            //先清空之前总计的里的内容            var totaltd = document.getElementById("total");             totaltd.innerHTML="";                   var totalprice=0;            for(var i=0;i<addtr.length-1;i++){                var prtd = addtr[i].getElementsByTagName("td")[3];                //获取单价,解析成float                totalprice=totalprice+parseFloat(prtd.innerHTML);            }            totaltd.innerHTML=totalprice;        }        //计算单个商品的总价：数量*单价        function oneTotalPrice(number) {                    var addtr = document.getElementById(number);            //商品单价：            var priceTd = addtr.getElementsByTagName("td")[3];            var price = addtr.getElementsByTagName("td")[1].innerHTML;            var proprice = parseFloat(price);            var count = addtr.getElementsByTagName("input")[1].value;            totalPrice = proprice*count;            //把单件商品的总价放到金额格中，先清空以前的数据            priceTd.innerHTML="";            priceTd.innerHTML=totalPrice;            total();        }        //添加一件商品：        function addnumber(number) {              var addtr = document.getElementById(number);            //获取要添加商品的输入框数组            var addinput = addtr.getElementsByTagName("input");            addinput[1].value++;            oneTotalPrice(number);        }        //删除一件商品：-        function reducenumber(number) {            var addtr = document.getElementById(number);            //获取要添加商品的输入框数组            var addinput = addtr.getElementsByTagName("input");            //如果商只剩一个了，提示用户不能删除了            if(addinput[1].value==1){                alert("数量不能为0！")                return;            }            addinput[1].value--;             oneTotalPrice(number);        }    </script></head><body>    <h1>商品列表</h1>    <table>        <tr>            <th>商品</th>            <th>单价（元）</th>            <th>颜色</th>            <th>库存</th>            <th>加入购物车</th>        </tr>        <tr id="1000">            <td value="鼠标" class="product">鼠标</td>            <td  class="price">8</td>            <td>黑色</td>            <td>78</td>            <td><input type="button" name="test" onclick="add('1000')" value="加入购物车" /></td>        </tr>        <tr id="1001">            <td class="product">键盘</td>            <td class="price">90</td>            <td>黑色</td>            <td>78</td>            <td><input type="button" name="test" onclick="add('1001')" value="加入购物车" /></td>        </tr>        <tr id="1002">            <td class="product">手机</td>            <td class="price">678</td>            <td>黑色</td>            <td>70</td>            <td><input type="button" name="test" onclick="add('1002')" value="加入购物车" /></td>        </tr>        <tr id="1003">            <td class="product">耳机</td>            <td class="price">78</td>            <td>黑色</td>            <td>8</td>            <td><input type="button" name="test" onclick="add('1003')" value="加入购物车" /></td>        </tr>        <tr id="1004">            <td class="product">U盘</td>            <td class="price">7</td>            <td>黑色</td>            <td>78</td>            <td><input type="button" name="test" onclick="add('1004')" value="加入购物车" /></td>        </tr>    </table>    <h1>购物车</h1>    <table>        <tr>            <th>商品</th>            <th>单价（元）</th>            <th>数量</th>            <th>金额（元）</th>            <th>删除</th>                 </tr>        <tr class="addtr">            <td colspan="3">总计</td>            <td id="total">0</td>            <td></td>        </tr>    </table></body></html>
效果是这样的，存在很多问题，以后还会更新
这里写图片描述
购物车2的链接
http://blog.csdn.net/JustGo_ChenXi/article/details/77281389
阅读全文
0 0