[案列]Tab选项卡、购物车[简易版]、全选与反选

最新推荐文章于 2023-05-12 18:11:43 发布

luckyPian

最新推荐文章于 2023-05-12 18:11:43 发布

阅读量210

点赞数 1

分类专栏： js 文章标签： js checkbox jquery

pian

本文链接：https://blog.csdn.net/qq_45063232/article/details/118761603

版权

js 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一.Tab选项卡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            position: relative;
        }
        
        li {
            list-style: none;
        }
        
        ul {
            width: 750px;
            height: 50px;
            background-color: #ddd;
            margin: 50px auto;
        }
        
        ul li {
            float: left;
            height: 50px;
            width: 150px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        
        .current {
            background-color: red;
            color: white;
        }
        
        .item {
            position: absolute;
            width: 750px;
            height: 300px;
            /* background-color: blueviolet; */
            left: 265px;
            top: 50px;
        }
        
        .item div {
            width: 750px;
            height: 300px;
            background-color: #eee;
            display: none;
        }
        
        .item .show {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
    </ul>
    <div class="item">
        <div class="show">商品介绍</div>
        <div>规格与包装</div>
        <div>售后保障</div>
        <div>商品评价</div>
        <div>手机社区</div>
    </div>
    <script src="jquery.js"></script>
    <script>
        //jQuery实现
        $("li").on("click", function() {
            // 选中标题
            $(this).addClass("current").siblings("li").removeClass("current");
            $(".item div").eq($(this).index()).addClass("show").siblings("div").removeClass("show");
        })
    </script>
    <!-- <script>
        //原生JS实现
        var liList = document.querySelectorAll("li");
        var divList = document.querySelectorAll(".item  div");
        // 1.给每个li绑定事件
        for (var i = 0; i < liList.length; i++) {
            liList[i].setAttribute("index", i);
            // 循环给每个li绑定事件
            liList[i].onclick = function() {
                // 排他思想：干掉其他人  留下自己
                for (var i = 0; i < liList.length; i++) {
                    liList[i].className = "";
                }
                // this指代事件源，即当前点击的li
                this.className = "current";
                // 2.显示内容区域
                var index = this.getAttribute("index");
                console.log(index);
                for (var i = 0; i < divList.length; i++) {
                    divList[i].style.display = "none";
                }
                divList[index].style.display = "block";
            }
        }
    </script> -->
</body>

</html>

点击上面的导航，下面的内容区域会根据上面的导航的切换二随之切换。

二.购物车[简易版]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 350px;
            border: 1px solid orange;
        }
    </style>
</head>

<body>
    <div>
        <p>商品名称：<span class="title">男士洗面奶</span></p>
        <p>商品价格：
            <span class="price">￥99</span>
        </p>
        <button>加入购物车</button>
    </div>

</body>

</html>
<script>
    var arr = [{
        "title": "复习JS事件",
        "price": "￥12",
        "done": true,
        "id": 0
    }, {
        "title": "生日文案",
        "price": "￥32",
        "done": true,
        "id": 0
    }, {
        "title": "听/读书",
        "price": "￥72",
        "done": true,
        "id": 0
    }, {
        "title": "写blog",
        "price": "￥99",
        "done": false,
        "id": 0
    }]
    setData("todo", arr);
    var collection;
    window.onload = function() {
        collection = getData();
    }
    var btn = document.querySelector("button");
    btn.onclick = function() {
        var title = this.parentNode.children[0].children[0].innerHTML;
        var price = this.parentNode.children[1].children[0].innerHTML;
        // 去重
        if (collection.delRepeat() == collection) {
            collection.push({
                'title': title,
                'price': price
            })
        } else {
            collection.forEach(item => {
                item.id++
            });
        }
        setData("todo", collection);
        setTimeout(function() {
            location.href = "3-购物车列表.html";
        }, 1000)
    }

    function setData(key, data) {
        localStorage.setItem(key, JSON.stringify(data));
    }

    function getData() {
        var collection = localStorage.getItem("todo");
        // console.log(JSON.parse(collection));
        if (collection != null) {
            return JSON.parse(collection);
        } else {
            return [];
        }
    }
    //数组去重
    Array.prototype.delRepeat = function() {
        var newArr = [];
        var isrepeat;
        for (var i = 0; i < this.length; i++) {
            isrepeat = false;
            for (var j = 0; j < newArr.length; j++) {
                if (this[i] == newArr[j]) {
                    isrepeat = true;
                    break; //退出当前整个循环
                }
            }
            if (!isrepeat) {
                newArr.push(this[i]);
            }
        }
        return newArr;
    }
</script>

点击加入购物车时，将数据存入本地。当每点击一次，数量+1。

<script>
    var str = "";
    window.onload = function() {
        var collection = getData();
        console.log(collection);
        collection.forEach(item => {
            str += `
            <p><b>商品名称</b> ：<span class="title">${item.title}</span> &nbsp;&nbsp;<b>商品价格：</b><span class="price">${item.price}</span></p>`;
        });
        document.body.innerHTML = str;

    }

    function setData() {
        localStorage.setItem("todo", JSON.stringify(arr));
    }

    function getData() {
        var collection = localStorage.getItem("todo");
        if (collection != null) {
            return JSON.parse(collection);
        } else {
            return [];
        }
    }
</script>

三.全选与反选

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 500px;
            height: 150px;
            background-color: #ddd;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        全选:<input type="checkbox"><br>
        <div class="chose">
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox">
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        //jquery实现
        $(".wrap>input").on("click", function() {
            $(".chose input").prop("checked", $(this).prop("checked"));
        })
        $(".chose input").on("click", function() {
            //当选中的长度等于全选长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
            if ($(".chose input").length === $(".chose input:checked").length) {
                $(".wrap>input").prop("checked", true);
            } else {
                $(".wrap>input").prop("checked", false);
            }
        })
    </script>
    <!-- <script>
        // 原生js实现全选
        var ipt = document.querySelector(".wrap>input");
        console.log(ipt);
        var iptList = document.querySelectorAll(".chose input");
        console.log(iptList);
        // 1.实现全选和反选 
        ipt.onclick = function() {
                // this.checked 
                for (var i = 0; i < iptList.length; i++) {
                    iptList[i].checked = this.checked;
                }
            } // s实现下面的复选框控制上面的全选和反选 
        for (var i = 0; i < iptList.length; i++) {
            iptList[i].onclick = function() {
                for (var j = 0; j < iptList.length; j++) {
                    //假设全选按钮选中 
                    var flag = true;
                    // iptList[i].checked表示当前元素的选中状态（true）。假设第一个当前是选中，那么!iptList[i].checked这个是false。
                    if (!iptList[j].checked) {
                        flag = false;
                        break;
                    }
                }
                ipt.checked = flag;
            }
        }
    </script> -->
</body>

</html>

点击全选实现下面复选框全选。

点击下面的复选框实现上面的全选选中。

luckyPian

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[案列]Tab选项卡、购物车[简易版]、全选与反选

一.Tab选项卡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫