js学习笔记之购物车1

最新推荐文章于 2024-05-28 18:30:26 发布

JustGo_ChenXi

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量550

点赞数 1

分类专栏： java学习笔记

本文链接：https://blog.csdn.net/JustGo_ChenXi/article/details/77244188

版权

java学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

初学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

JustGo_ChenXi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记之购物车1

初学js，写了一个购物车练练手我把css和js代码都放在了一个页面，方便大家查看下面是源码：<!DOCTYPE HTML><html><head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />  <style type="text/css">
复制链接

扫一扫