案列

使用jQuery实现功能

一键换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤</title>
    <style>
        .container {
            width: 100px;
            display: flex;
            box-sizing: border-box;
        }
        .container>img {
            width: 100%;
            margin: 0 3px 0 0;
            border: 3px solid white;
            opacity: 0.6;
        }
        .container>img:hover {
            opacity: 1;
            cursor: pointer;
            width: 110%;
        }
        html,
        body {
            height: 100%;
        }
        body {
            background-image: url("imgs/03.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="imgs/03.jpg" alt="">
        <img src="imgs/06.jpg" alt="">
        <img src="imgs/07.jpg" alt="">
    </div>
</body>
<script src="../lib/jquery-3.5.1.js"></script>
<script>
    $("div").click(function (ev) {
        $("body").css("background-image", "url(" + ev.target.src + ")");
    })
</script>
</html>

全选和自动计算金额

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动计算价格</title>
    <style>
        table {
            border: 1px solid;
            border-collapse: collapse;
            margin: 20px auto;
            width: 500px;
            text-align: center;
        }
        tr td {
            border: 1px solid;
        }
        caption {
            margin-bottom: 10px;
        }
        div {
            width: 500px;
            margin: auto;
        }
        thead {
            background-color: aquamarine;
        }
        button {
            float: right;
            width: 80px;
        }
        .tain {
            box-sizing: border-box;
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>购物车</caption>
        <thead>
            <tr>
                <td><input type="checkbox" name="itemAll" id="itemAll" checked>全选</td>
                <td>ID</td>
                <td>品名</td>
                <td>单位</td>
                <td>单价/元</td>
                <td>数量</td>
                <td>金额/元</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="itemID" id="itemID" value="SN-1010" checked></td>
                <td>SN-1010</td>
                <td>MacBook Pro电脑</td>
                <td>台</td>
                <td>18999</td>
                <td>
                    <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
                </td>
                <td></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="itemID" id="itemID" value="SN-1020" checked></td>
                <td>SN-1020</td>
                <td>iPhone手机</td>
                <td>部</td>
                <td>4999</td>
                <td>
                    <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
                </td>
                <td></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="itemID" id="itemID" value="SN-1030" checked></td>
                <td>SN-1030</td>
                <td>智能Ai音箱</td>
                <td>只</td>
                <td>399</td>
                <td>
                    <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
                </td>
                <td></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="itemID" id="itemID" value="SN-1040" checked></td>
                <td>SN-1040</td>
                <td>SSD移动硬盘</td>
                <td>个</td>
                <td>888</td>
                <td>
                    <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
                </td>
                <td></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="itemID" id="itemID" value="SN-1050" checked></td>
                <td>SN-1050</td>
                <td>黄山毛峰</td>
                <td>斤</td>
                <td>999</td>
                <td>
                    <input type="number" class="tain" name="counter" value="1" min="0" step="1" id="">
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan="5">总计</td>
                <td id="totalNum"></td>
                <td id="totalPrice"></td>
            </tr>
        </tbody>
    </table>
    <div>
        <button>结算</button>
    </div>
    <script src="../lib/jquery-3.5.1.js"></script>
    <script>
        $("#itemAll").on("change", chend);
        function chend(ev) {
            $("input[name='itemID']").prop("checked", ev.target.checked);
            if ((ev.target.checked)) {
                $("input[type='number']").prop("value", 1);
            } else {
                $("input[type='number']").prop("value", 0);
            }
             // 获取商品数量
            Counts = getCounts(numbers);
            // 获取商品单价
            Prices = getPrices(Price);
            // 获取商品金额
            Amouts = getAmouts(Counts, Prices);
            // 获取商品总数量
            totalNum = num(Counts);
            // 获取商品总金额
            totalPrice = toPrice(Amouts);
            // 渲染商品金额到页面中
            $("tbody>tr>td:last-of-type").each(function (key, value) {
                $(value).html(Amouts[key]);
            });
            // 渲染商品总数量到页面中
            $("#totalNum").html(totalNum);
            // 渲染商品总金额到页面中
            $("#totalPrice").html(totalPrice);
        }
        $("input[name='itemID']").change(function (ev) {
            var count = 0;
            // 循环按钮选中状态的个数
            $("input[name='itemID']").each(function (key, value) {
                if (value.checked) count++;
            });
            if (ev.target.checked) {
                $(ev.target).parent().siblings().eq(4).children().prop("value", 1);
            } else {
                $(ev.target).parent().siblings().eq(4).children().prop("value", 0);
            }
            // 根据个数判断全选按钮是否要选ziyu
            $("#itemAll").prop("checked", (count === $("input[name='itemID']").length));
            // 获取商品数量
            Counts = getCounts(numbers);
            // 获取商品单价
            Prices = getPrices(Price);
            // 获取商品金额
            Amouts = getAmouts(Counts, Prices);
            // 获取商品总数量
            totalNum = num(Counts);
            // 获取商品总金额
            totalPrice = toPrice(Amouts);
            // 渲染商品金额到页面中
            $("tbody>tr>td:last-of-type").each(function (key, value) {
                $(value).html(Amouts[key]);
            });
            // 渲染商品总数量到页面中
            $("#totalNum").html(totalNum);
            // 渲染商品总金额到页面中
            $("#totalPrice").html(totalPrice);
        });
        // 商品数量
        var Counts = [];
        var numbers = $("input[type='number']");
        Counts = getCounts(numbers);
        function getCounts(numbers) {
            return numbers.map(function (key, item) {
                return parseInt(numbers.get(key).value);
            }).get();
        };
        console.log(Counts);
        // 商品单价
        var Prices = [];
        var Price = $("tbody>tr>td:nth-of-type(5)");
        Prices = getPrices(Price);
        function getPrices(Price) {
            return Price.map(function (key, value) {
                return parseInt($(value).html());
            }).get();
        };
        console.log(Prices);
        // 计算商品金额
        var Amouts = [];
        Amouts = getAmouts(Counts, Prices);
        function getAmouts(Counts, Prices) {
            var amount = [];
            for (var i = 0; i < Counts.length; i++) {
                am = Counts[i] * Prices[i];
                amount.push(am);
            };
            return amount;
        }
        console.log(Amouts);
        // 把数据渲染到页面中
        $("tbody>tr>td:last-of-type").each(function (key, value) {
            $(value).html(Amouts[key]);
        });
        // 获取总数量
        var totalNum = 0;
        totalNum = num(Counts);
        function num(Counts) {
            return Counts.reduce(function (prev, next) {
                return prev += next;
            });
        };
        console.log(totalNum);
        // 渲染到页面中
        $("#totalNum").html(totalNum);
        // 获取总金额
        var totalPrice = 0;
        totalPrice = toPrice(Amouts);
        function toPrice(Amouts) {
            return Amouts.reduce(function (prev, next) {
                return prev += next;
            });
        };
        console.log(totalPrice);
        // 渲染到页面中
        $("#totalPrice").html(totalPrice);
        // 绑定事件
        numbers.on("change", autoCalculate);
        function autoCalculate(ev) {
         // 获取商品数量
            Counts = getCounts(numbers);
            // 获取商品单价
            Prices = getPrices(Price);
            // 获取商品金额
            Amouts = getAmouts(Counts, Prices);
            // 获取商品总数量
            totalNum = num(Counts);
            // 获取商品总金额
            totalPrice = toPrice(Amouts);
            // 渲染商品金额到页面中
            $("tbody>tr>td:last-of-type").each(function (key, value) {
                $(value).html(Amouts[key]);
            });
            // 渲染商品总数量到页面中
            $("#totalNum").html(totalNum);
            // 渲染商品总金额到页面中
            $("#totalPrice").html(totalPrice);
        }
    </script>
</body>
</html>

总结

1.对于换肤图片案列，明白了一件事一开始一直以为body的高度就是页面的高度，一直想着为什么图片的自适应实现不了，查看控制器才发现body的高度没设置的话是靠其子元素的高度撑开的，不是页面的高度。
2.自动计算案列在获取数量或者单价数组时，用jQuery的map()方法得到的值用parseInt()方法后得到的是jQuery的对象而不是数组，用了get()方法后才是数组，我的想法是parseInt()转为数值，那么应该直接成数组不是吗，这里有点不明白

批改老师：