模拟淘宝购物车功能

编程语言 2018-11-09 09:10:44 阅读次数: 0 
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>淘宝购物车页面</title>
    <style>
        body{
        margin:0px;
        padding:0px;
        font-size:12px;
        line-height:20px;
        color:#333;
   }
    ul,li,ol,h1,dl,dd{
        list-style:none;
        margin:0px;
        padding:0px;
	}
    a{
        color:#1965b3;
        text-decoration: none;
	}    
    a:hover{
        color:#CD590C;
        text-decoration:underline;
	}
    img{
        border:0px;
        vertical-align:middle;
	}
    #header{
        height:40px;
        margin:10px auto 10px auto;
        width:800px;
        clear:both;
	}
    #nav{
        margin:10px auto 10px auto;
        width:800px;
        clear:both;
	}
    #navlist{
        width:800px;
        margin:0px auto 0px auto;
        height:23px;
	}
	#navlist li{
		float:left;
		height:23px;
		line-height:26px;
	}
	.navlist_red_left{
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -92px;
		width:3px;
		}
	.navlist_red{
		background-color:#ff6600;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		color:#FFF;
		width:130px;
		}
	.navlist_red_arrow{
		background-color:#ff6600;
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray{
		background-color:#e4e4e4;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		width:150px;
		}
	.navlist_gray_arrow{
		background-color:#e4e4e4;
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray_right{
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -138px;
		width:3px;
		}
    #content{
        width:800px;
        margin:10px auto 5px auto;
        clear:both;
        }
	.title_1{
		text-align:center;
		width:50px;
		}
	.title_2{
		text-align:center;
		}
	.title_3{
		text-align:center;
		width:80px;
		}
	.title_4{
		text-align:center;
		width:80px;
		}
	.title_5{
		text-align:center;
		width:100px;
		}
	.title_6{
		text-align:center;
		width:80px;
		}
	.title_7{
		text-align:center;
		width:60px;
		}
	.line{
		background-color:#a7cbff;
		height:3px;
		}
	.shopInfo{
		padding-left:10px;
		height:35px;
		vertical-align:bottom;
		}
	.num_input{
		border:solid 1px #666;
		width:25px;
		height:15px;
		text-align:center;
		}
	.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
		background-color:#e2f2ff;
		border-bottom:solid 1px #d1ecff;
		border-top:solid 1px #d1ecff;
		text-align:center;
		padding:5px;
		}
	.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
		border-right:solid 1px #FFF;
		}
	.cart_td_3{
		text-align:left;
		}
	.cart_td_4{
		font-weight:bold;
		}
	.cart_td_7{
		font-weight:bold;
		color:#fe6400;
		font-size:14px;
		}
	.hand{
		cursor:pointer;
		}
    .shopend{
        text-align:right;
        padding-right:10px;
        padding-bottom:10px;
        }
    .yellow{
        font-weight:bold;
        color:#fe6400;
        font-size:18px;
        line-height:40px;
        }

    </style>
</head>

<body>
    <div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>
    <div id="navlist">
        <ul>
            <li class="navlist_red_left"></li>
            <li class="navlist_red">1. 查看购物车</li>
            <li class="navlist_red_arrow"></li>
            <li class="navlist_gray">2. 确认订单信息</li>
            <li class="navlist_gray_arrow"></li>
            <li class="navlist_gray">3. 付款到支付宝</li>
            <li class="navlist_gray_arrow"></li>
            <li class="navlist_gray">4. 确认收货</li>
            <li class="navlist_gray_arrow"></li>
            <li class="navlist_gray">5. 评价</li>
            <li class="navlist_gray_right"></li>
        </ul>
    </div>

    <div id="content">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
            <form action="" method="post" name="myform">
                <tr>
                    <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全选</td>
                    <td class="title_2" colspan="2">店铺宝贝</td>
                    <td class="title_3">获积分</td>
                    <td class="title_4">单价（元）</td>
                    <td class="title_5">数量</td>
                    <td class="title_6">小计（元）</td>
                    <td class="title_7">操作</td>
                </tr>
                <tr>
                    <td colspan="8" class="line"></td>
                </tr>

                <tr>
                    <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg"
                            alt="relation" /></td>
                </tr>
                <tr id="product1">
                    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td>
                    <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping" /></td>
                    <td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
                        颜色：棕色 尺码：37<br />
                        保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
                    <td class="cart_td_4">5</td>
                    <td class="cart_td_5">138.00</td>
                    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')"
                            class="hand" /> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly" />
                        <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')" class="hand" /></td>
                    <td class="cart_td_7"></td>
                    <td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</a></td>
                </tr>

                <tr>
                    <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img
                            src="images/taobao_relation.jpg" alt="relation" /></td>
                </tr>
                <tr id="product2">
                    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td>
                    <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping" /></td>
                    <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
                        保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
                    <td class="cart_td_4">12</td>
                    <td class="cart_td_5">265.00</td>
                    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')"
                            class="hand" /> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly" />
                        <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_2','add')" class="hand" /></td>
                    <td class="cart_td_7"></td>
                    <td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除</a></td>
                </tr>

                <tr>
                    <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg"
                            alt="relation" /></td>
                </tr>
                <tr id="product3">
                    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" onclick="selectSingle()" /></td>
                    <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping" /></td>
                    <td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br />
                        保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
                    <td class="cart_td_4">3</td>
                    <td class="cart_td_5">85.00</td>
                    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')"
                            class="hand" /> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly" />
                        <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')" class="hand" /></td>
                    <td class="cart_td_7"></td>
                    <td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</a></td>
                </tr>

                <tr>
                    <td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg"
                            alt="relation" /></td>
                </tr>
                <tr id="product4">
                    <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td>
                    <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping" /></td>
                    <td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
                        保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
                    <td class="cart_td_4">12</td>
                    <td class="cart_td_5">12.00</td>
                    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')"
                            class="hand" /> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly" />
                        <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')" class="hand" /></td>
                    <td class="cart_td_7"></td>
                    <td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除</a></td>
                </tr>

                <tr>
                    <td colspan="3"><a href="javascript:deleteSelectRow()"><img src="images/taobao_del.jpg" alt="delete" /></a></td>
                    <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
                        可获积分 <label class="yellow" id="integral"></label> 点<br />
                        <input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
                </tr>
            </form>
        </table>

    </div>
</body>
<script>
    // JavaScript Document

    /*改变所购商品的数量*/
    function changeNum(numId, flag) { /*numId表示对应商品数量的文本框ID，flag表示是增加还是减少商品数量*/
        var tom = document.getElementById(numId);
        if (flag == 'add') {
            tom.value++;
        }
        if (flag == 'minus') {
            if (tom.value > 1) {
                tom.value = tom.value - 1;
            }
        }
        getSubTotal(tom.parentNode.parentNode.id);
        productCount();
    }

    function getSubTotal(tr) {
        var tds = document.getElementById(tr);
        var price = parseFloat(tds.cells[4].innerHTML); //获取价格
        var count = parseInt(tds.cells[5].getElementsByTagName('input')[0].value); //获取数量
        var SubTotal = parseFloat(price * count);
        tds.cells[6].innerHTML = SubTotal.toFixed(2); //四舍五入
    }
    /*自动计算商品的总金额、总共节省的金额和积分*/
    function productCount() {
        var checkAllInputs = document.getElementById('allCheckBox');
        var tableTr = document.getElementById("shopping").getElementsByTagName("tr");
        var total = 0; //所有商品的总计
        var integral = 0; //所有商品的积分
        console.log(tableTr);
        if (tableTr.length == 3) {
            checkAllInputs.checked = false;
        }
        var checkInputs = document.getElementsByName("cartCheckBox");
        for (var i = 0; i < checkInputs.length; i++) {
            var point = 0; //每一行商品的单品积分
            var price = 0; //每一行商品的单价
            var nums = 0; //每一行商品的数量

            if (checkInputs[i].checked) { //判断复选框是否被选中
                var c = checkInputs[i].parentNode.parentNode;
                point = c.childNodes[7].innerHTML; //选中行商品的单品积分
                price = c.childNodes[9].innerHTML; //选中行商品的单价
                nums = c.childNodes[11].childNodes[2].value; //选中行商品的数量
                console.log(nums);
                integral += point * nums; //所有商品的积分的和 = 每一行商品的单价积分 x 数量   相加
                total += price * nums; //所有商品的总计的和 = 每一个商品的单价 x 数量   相加
                c.childNodes[13].innerHTML = price * nums; //商品小计 =商品的单价 x 数量
            } else {
                total += 0; //思考这里为什么是“+=”
                integral += 0;
            }
        }
        document.getElementById("total").innerHTML = total;
        document.getElementById("integral").innerHTML = integral;
    }

    window.onload = productCount; //onload函数，让页面加载后自动计算商品总额

    /*复选框全选或全不选效果*/
    function selectAll() {
        var checkInputs = document.getElementsByName("cartCheckBox");
        var checkAllInputs = document.getElementById('allCheckBox');
        for (var i = 0; i < checkInputs.length; i++) {
            checkInputs[i].checked = checkAllInputs.checked;
        }
    }

    /*根据单个复选框的选择情况确定全选复选框是否被选中*/
    function selectSingle() {
        var checkInputs = document.getElementsByName("cartCheckBox");
        var checkAllInputs = document.getElementById('allCheckBox');
        var count = 0;
        for (var i = 0; i < checkInputs.length; i++) {
            if (checkInputs[i].checked) {
                count++;
            }
            if (count === checkInputs.length) { //判断是否全选
                checkAllInputs.checked = true;
                selectAll();
            } else {
                checkAllInputs.checked = false;
            }
        }
        productCount();
    }

    /*删除单行商品*/
    function deleteRow(rowId) {
        var t = document.getElementById(rowId);
        t.previousSibling.previousSibling.remove();
        t.remove();
        productCount();
    }

    /*删除选中行的商品*/
    function deleteSelectRow() {
        var inp = document.getElementsByName("cartCheckBox"); //获取每个多选框
        for (var i = inp.length - 1; i >= 0; i--) { //若顺序则无法删除所有
            if (inp[i].checked) {
                inp[i].parentNode.parentNode.previousSibling.previousSibling.remove();
                inp[i].parentNode.parentNode.remove();
                inp.checked = false; //思考这里为什么不用数组下标
                productCount();
            }
        }
    }
</script>

</html>

猜你喜欢

转载自blog.csdn.net/qq_36552707/article/details/83892375
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022