图片瀑布流加载和购物车

不念不忘少年蓝@ 2021-11-04 14:32 430阅读 0赞

### 图片瀑布流加载 ###

**注释中为详细注释**

1.  动态添加元素

// 创建图片数组方便后续添加图片路径时使用
        var img = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg"];
        //默认显示50张图片
        var num = 50;//一次显示的图片总数
        var hrow = 10;//一行显示的图片数量
        var max = 0;//最大偏移
        var spar = document.createElement("div");//img图片外包的div
        spar.className = "s-par";
        document.body.appendChild(spar);//追加到body中
        var small = document.getElementsByClassName("smallimg");
        //创建图片
        createImage();//创建图片

1.  创建图片

function createImage() {
            for (var i = 0; i < num; i++) {
                var imglist = document.createElement("img");
                imglist.className = "smallimg";//所有图片都在smallimg类中
                //随机数组里面随机路径
                //Math.floor 向下取整    Math.random() 随机0-1  取小不取大   *10
                imglist.src = "./img/" + img[Math.floor(Math.random() * img.length)];
                //添加图片路径img.length=15， Math.random() 随机0-1  取小不取大0~0.99999...,所以想成之后再向下取整
                // 得到0~14，即随机显示数组中的15张图片
    
                //设置left属性
                var x = i % hrow * 100 + i % hrow * 10;//i从0开始，所以每行第一个除以一行显示的数量都为0，以此类推，得到正确的左边距
                imglist.style.left = x + "px";
                spar.appendChild(imglist);//将图片放在包图片的div中
            }
        }

1.  屏幕大小变化事件

1.  加载完成事件

1.  设置高

### 零碎知识点 ###

> 1.格式化快捷键：ctrl+alt+L  
> 2.变量命名不能和内置变量重名  
> 3.随机数组里面给出随机路径，Math.random:01随机数取小不取大（00.999999……）  
> 4.offsettop和offsetheight在火狐中有属性但获取不到值，在火狐中要得到offsetHeight的值要先声明，其次要在浏览器加载完成后才能得到值。偏移量都是数字型，style.top为字符串型  
> 5.scroll滚动条事件——加载完成后绑定 scroll.top为隐藏的看不到的页面高度，documentElement.clientHeight为页面可视高度，两者相加等于body页面实际高度  
> 6.屏幕缩小后减少一行显示的数量，要为图片总数的因数

### 购物车 ###

代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .block {
                width: 1000px;
                height: auto;
                min-height: 30px;
                margin: auto;
            }
    
            .b-top {
                display: flex;
                flex-direction: row;
                line-height: 30px;
                font-size: 14px;
                background: #ffe0cb;
                text-align: center;
            }
    
            .b-lits {
                flex: 1;
            }
    
            .b-list {
                flex: 2;
            }
    
            .b-info {
                display: flex;
                flex-direction: column;
            }
    
            .b-par {
                height: 70px;
                line-height: 70px;
                display: flex;
                flex-direction: row;
                padding: 15px 0;
                border-bottom: 1px dashed silver;
                text-align: center;
            }
    
            .b-par > div:nth-child(2), .b-par > div:nth-child(5) {
                flex: 2;
            }
    
            .b-par > div {
                flex: 1;
            }
    
            .b-par > div:nth-child(3) > img {
                width: 70px;
            }
    
            .b-par > div:nth-child(5) > button {
                width: 25px;
                height: 25px;
                border-style: none;
                background: orange;
                outline: none;
                color: blue;
                font-size: 17px;
            }
    
            .b-par > div:nth-child(5) > input {
                width: 25px;
                height: 25px;
                border-style: none;
                outline: none;
                text-align: center;
            }
    
            .b-par > div:last-child > button {
                width: 60px;
                height: 25px;
                border-style: none;
                color: blue;
                outline: none;
            }
    
            .b-go {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
    
            .b-go > div {
                width: 120px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 14px;
            }
    
            .b-go > div:last-child {
                background: red;
                color: #fff;
            }
    
            input[type=checkbox] {
                outline: none;
            }
    
            .bgcolor {
                background: pink;
            }
        </style>
    </head>
    <body>
    <div class="block">
        <div class="b-top">
            <div class="b-lits"><input id="ckall" type="checkbox"/> 全选</div>
            <div class="b-list">商品名称</div>
            <div class="b-lits">图片</div>
            <div class="b-lits">单价</div>
            <div class="b-list">数量</div>
            <div class="b-lits">小计</div>
            <div class="b-lits">操作</div>
        </div>
        <div class="b-info">
    
        </div>
        <div class="b-go">
            <div>
                <input id="ckfan" type="checkbox"/>反选
            </div>
            <div>
                去结算>
            </div>
        </div>
    </div>
    <script>
        /*
         * 模拟购物车数据
         * */
        var cart = [
            {
                "id": "101321XNMNSDJYE6871DAS21",
                "name": "华为nova5 pro",
                "src": "./cartimage/415d8ef0da06eb00.png",
                "price": "1499",
                "totle": "1499",
                "num": 1
            },
            {
                "id": "101321XNMNSDJYE6871DAS21",
                "name": "华为nova5 pro",
                "src": "./cartimage/415d8ef0da06eb00.png",
                "price": "1499",
                "totle": "1499",
                "num": 1
            },
            {
                "id": "101321XNMNSDJYE6871DAS21",
                "name": "华为nova5 pro",
                "src": "./cartimage/415d8ef0da06eb00.png",
                "price": "1499",
                "totle": "1499",
                "num": 1
            },
            {
                "id": "101321XNMNSDJYE6871DAS21",
                "name": "华为nova5 pro",
                "src": "./cartimage/415d8ef0da06eb00.png",
                "price": "1499",
                "totle": "1499",
                "num": 1
            }
        ]
        var binfo = document.getElementsByClassName("b-info")[0];
        //遍历数据进行动态创建dom元素
        for (var index in cart) {
            /*
             var str = "<div class='b-par'> <div ><input type='checkbox'/></div> <div >商品名称</div> <div>图片</div> <div>单价</div> <div>数量</div> <div>小计</div> <div>操作</div> </div>";
             binfo.innerHTML+=str;*/
            //1创建div
            var par = document.createElement("div");
            par.className = "b-par";
            binfo.appendChild(par);
            //创建行里面的列
            var parchild = document.createElement("div");
            var ckbox = document.createElement("input");
            ckbox.type = "checkbox";
            ckbox.className = "cklist";
            parchild.appendChild(ckbox);
    
            var parchildname = document.createElement("div");
            parchildname.innerHTML = cart[index].name;
    
            var parimg = document.createElement("div");
            var img = document.createElement("img");
            img.src = cart[index].src;
            parimg.appendChild(img);
    
            var parchildprice = document.createElement("div");
            parchildprice.innerHTML = cart[index].price + "￥";
            parchildprice.className = "price";
            parchildprice.setAttribute("data-price", cart[index].totle)
    
    
            //数量
            var parchildnumber = document.createElement("div");
            var leftbtn = document.createElement("button");
            leftbtn.innerHTML = "-";
            leftbtn.className = "leftbtn";
            var num = document.createElement("input");
            num.value = cart[index].num;
            num.className = "ipt";
            var rightbtn = document.createElement("button");
            rightbtn.innerHTML = "+";
            rightbtn.className = "rightbtn";
            parchildnumber.appendChild(leftbtn);
            parchildnumber.appendChild(num);
            parchildnumber.appendChild(rightbtn);
    
            var smalltotle = document.createElement("div");
            smalltotle.innerHTML = cart[index].totle + "￥";
            smalltotle.className = "smalllist";
    
            var deletepar = document.createElement("div");
            var btndelete = document.createElement("button");
            btndelete.innerHTML = "删除";
            deletepar.appendChild(btndelete);
    
    
            par.appendChild(parchild);
            par.appendChild(parchildname);
            par.appendChild(parimg);
            par.appendChild(parchildprice);
            par.appendChild(parchildnumber);
            par.appendChild(smalltotle);
            par.appendChild(deletepar);
        }
    
        window.onload = function () {
            var ckall = document.querySelector("#ckall");
            var ckfan = document.querySelector("#ckfan");
            var cklist = document.getElementsByClassName("cklist");
            var leftbtn = document.getElementsByClassName("leftbtn");
            var rightbtn = document.getElementsByClassName("rightbtn");
            var price = document.getElementsByClassName("price");
            var ipt = document.getElementsByClassName("ipt");
            var smalllist = document.getElementsByClassName("smalllist");
            var bpar = document.getElementsByClassName("b-par");
    
            //全选反选
            ckall.onclick = function () {
                if (this.checked) {
                    for (var i = 0; i < cklist.length; i++) {
                        cklist[i].checked = true;
                        bpar[i].className = "b-par bgcolor"
                    }
                }
                else {
                    for (var i = 0; i < cklist.length; i++) {
                        cklist[i].checked = false;
                        bpar[i].className = "b-par"
                    }
                }
    
            }
            ckfan.onclick = function () {
                for (var i = 0; i < cklist.length; i++) {
                    cklist[i].checked = !cklist[i].checked;
                    if (cklist[i].checked) {
                        bpar[i].className = "b-par bgcolor"
                    }
                    else {
                        bpar[i].className = "b-par"
                    }
                }
            }
    
            //后边按钮的相关功能
            for (var i = 0; i < leftbtn.length; i++) {
                //每行前面的ckbox 的事件
                cklist[i].index = i;
                cklist[i].onclick = function () {
                    if (this.checked) {
                        bpar[this.index].className = "b-par bgcolor"
                    }
                    else {
                        bpar[this.index].className = "b-par"
                    }
                }
                leftbtn[i].index = i;
                leftbtn[i].onclick = function () {
                    var val = ipt[this.index].value;
                    val--;
                    if (val < 1) {
                        val = 1;
                    }
                    ipt[this.index].value = val;
                    smalllist[this.index].innerHTML = smallTotale(price, this.index, val) + "￥";
                }
                rightbtn[i].index = i;
                rightbtn[i].onclick = function () {
                    var val = ipt[this.index].value;
                    val++;
                    ipt[this.index].value = val;
                    smalllist[this.index].innerHTML = smallTotale(price, this.index, val) + "￥";
                }
                ipt[i].onkeydown = function (e) {
                    if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode === 8 && this.value != "1") {
                        if (this.value == "1") {
                            alert("该宝贝不能删。");
                            return false;
                        }
                    }
                    else {
                        return false;
                    }
                }
                ipt[i].index = i;
                ipt[i].onkeyup = function () {
                    if (this.value == "") {
                        this.value = 0;
                    }
                    smalllist[this.index].innerHTML = smallTotale(price, this.index, this.value) + "￥";
                }
            }
        }
    
        //小计
        function smallTotale(obj, index, num) {
            return obj[index].getAttribute("data-price") * num;
        }
    </script>
    </body>
    </html>