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

最新推荐文章于 2024-04-28 18:58:48 发布

辛跃

最新推荐文章于 2024-04-28 18:58:48 发布

阅读量5.9k

点赞数 7

本文链接：https://blog.csdn.net/qq_47735503/article/details/111206618

版权

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(<

最低0.47元/天解锁文章

辛跃

关注

7
点赞
踩
66

收藏

觉得还不错? 一键收藏
2
评论
HTML5+CSS3+JavaScript 实现淘宝购物车

HTML5+CSS3+JavaScript 实现淘宝购物车1.在一个里面写的，好复制。。。。。下边有分开写的备注详细<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</title> <style> .block{ width: 800px;
复制链接

扫一扫