HTML5+CSS3+JavaScript 实现淘宝购物车

HTML5+CSS3+JavaScript 实现淘宝购物车

1.在一个里面写的,好复制。。。。。下边有分开写的 备注详细
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        .block{
    
            width: 800px;
            height: auto;
            min-height: 30px;
            border: 1px solid silver;
            margin: auto;
        }
        .title{
    
            display: flex;/*弹性布局*/
            flex-direction: row;/*以行的方式修饰*/
        }
        .title>div{
    
            flex: 1;/*划分区域*/
            border-bottom: 1px solid silver;
            border-right: 1px solid silver;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 13px;
        }
        .title>div:nth-child(i) input{
    
            position: relative;
            top: 2px;
        }
        .h_list{
    
            display: flex;
            flex-direction: row;

        }
        .h_list>div{
    
            flex: 1;
            text-align: center;
            line-height: 80px;
            border: 1px solid silver;
        }
        .leftbtn,.rightbtn,.txt{
    
            display: inline-block;
            width: 30px;
            text-align: center;
        }
        .iscolor{
    
            background: antiquewhite;
        }
    </style>
</head>
<body>
<div class="block"><!--显示的盒子-->
    <div class="title"><!--购物车框框-->
        <div><input type="checkbox" id="allcheck"/>全选/反选</div>
        <div>名称</div>
        <div>单价</div>
        <div>数量</div>
        <div>小计</div>
        <div>操作</div>
    </div>
</div>
<div>
    总计:<label id="label"></label>
</div>
<script>
    var data=[{
    
        name:"短袖",
        price:40,
        num:1,
        totle:40
        },
        {
    
            name:"短袖",
            price:120,
            num:1,
            totle:120
        },
        {
    
            name:"短袖",
            price:80,
            num:1,
            totle:80
        },
        {
    
            name:"短袖",
            price:110,
            num:1,
            totle:110
        }
        ];
    var block=document.querySelector(".block");
    var allcheck=document.getElementById("allcheck");
    showEle();
    function showEle(){
    
        for (var i = 0; i <data.length ; i++) {
    
            //创建行元素
            var h_list=document.createElement("div");
            h_list.setAttribute("class","h_list");
            var div_v_f=document.createElement("div")
            var check=document.createElement("input");
            check.type="checkbox";
            check.index=i;
            check.addEventListener("click",ckcolor);
            check.className="all";
            div_v_f.appendChild(check);
            h_list.appendChild(<
  • 7
    点赞
  • 66
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值