第一次月测总结

2024-04-03 21:12:16

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 
            所有图片横向布局            10'
            图片之间的间隔为16px         10'
            第一张图片的左边距为0     10'
            最后一张图片的右边距为0     10'
            */
            body {
                background-color: cornsilk;
                width: 1200px;
                margin: 0 auto;
            }

            body>img {
                width: 100%;
            }

            .content {
                border: 1px solid red;
                height: 174px;
            }

            
            /* 在这里填写css代码 */
            /* flex布局 align-items: center;水平对齐 */
            ul{
                list-style: none;
                padding: 0;
                display: flex;
                justify-content: space-between;
                   align-items: center;
            }
            ul li{
                margin-right: 16px;
            }
            ul li:first-child{
                margin-left: 0;
            }
            ul li:last-child{
                margin-right:0;
            }
        </style>
    </head>
    <body>
        <img src="img/res.png">
        <div class="content">
            <!-- 在这里填写html代码 -->
            <ul>
                <li><img src="img/toplist_a01.jpg" alt=""></li>
                <li><img src="img/toplist_a02.jpg" alt=""></li>
                <li><img src="img/toplist_a03.jpg" alt=""></li>
                <li><img src="img/toplist_a04.jpg" alt=""></li>
                <li><img src="img/toplist_a05.jpg" alt=""></li>
                <li><img src="img/toplist_a06.jpg" alt=""></li>
                <li><img src="img/toplist_a07.jpg" alt=""></li>
                <li><img src="img/toplist_a08.jpg" alt=""></li>
            </ul>
        </div>
    </body>
</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        body {
            position: relative;
            text-align: center;
        }

        body>.small {
            display: inline-block;
        }

        body>.big {
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            display: none;
        }
    </style>
    <script>
        /*
            当鼠标移入页面小图时，在鼠标右侧展示对应大图，
            鼠标移入、移出、移动、事件将对应图片加载到正确位置展示各10分
        */
        /* 在这里填写jquery代码，禁止修改html代码 */
        window.onload = function() {
                var imgs = document.querySelectorAll("img");//所有小图片
                var big = document.querySelector(".big");//大图片
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].onmousemove = function(e) { //鼠标移动事件
                        big.style.top = e.y + 10 + "px";
                        big.style.left = e.x + 10 + "px";
                        big.src = this.src; //当前图片的路径赋给大图片的路径
                    }
                    // 鼠标移出隐藏
                    imgs[i].onmouseout = function() {
                        big.style.display = "none";
                    }
                    //// 鼠标移入显示
                    imgs[i].onmouseenter = function() {                        
                        big.style.display = "block";
                    }
                }
            }

        
    </script>
</head>

<body>
    <img class="small" src="./img/toplist_a01.jpg" alt="">
    <img class="small" src="./img/toplist_a02.jpg" alt="">
    <img class="small" src="./img/toplist_a03.jpg" alt="">
    <img class="big" src="./img/toplist_a01.jpg" alt="">
</body>

</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background-color: cornsilk;
            }

            table {
                text-align: center;
                border: 1px solid #ccc;
                width: 800px;
                margin: 10% auto;
            }

            table caption {
                font-size: 24px;
                padding: 10px;
            }

            table thead th {
                background-color: #CCCCCC;
            }

            label.count,
            label.money {
                padding: 0 5px;
                color: red;
                font-weight: bolder;
            }
        </style>
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*
            全选/全不选                 15'
            删除当前行（要有提示）       15'
            数据行复选框                10'
            */
            
            /* 在这里填写jquery代码，禁止修改html代码 */
            $(function(){
            //全选/全不选
            $("#chkAll").change(function(){
                   var chk1=$(this).prop("checked"); 
                $(":checkbox").prop("checked",chk1);
           })

           //删除
            $("button").click(function() {
               var bh=$(this).attr("data-del");
               confirm("您确定要删除编号为"+bh+"的商品?");
               $("table tr:eq(1)").remove();
            })
            //复选框
            $(":checkbox").click(function(){
                   var chk=$(this).prop("checked");
                   var num= parseInt($(".count").text())+1;
                   var num2=parseInt($(".count").text())-1;
                   if(chk){
                      $(".count").text(num);
                   }else{
                    $(".count").text(num2);
                   }
           })
        })
        </script>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0">
            <caption>购物车商品管理</caption>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="chkAll" />
                        <label for="chkAll">全选</label>
                    </th>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>产品单价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1001</td>
                    <td>Redmi 笔记本 15寸</td>
                    <td>5999</td>
                    <td><button type="button" data-del="1001">删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1003</td>
                    <td>华为平板2</td>
                    <td>2999</td>
                    <td><button type="button" data-del="1003">删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1004</td>
                    <td>华为笔记本电脑</td>
                    <td>6888</td>
                    <td><button type="button" data-del="1004">删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1005</td>
                    <td>小米10青春版</td>
                    <td>1299</td>
                    <td><button type="button" data-del="1005">删除</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" style="text-align: right;">您已选购<label class="count">0</label>件，合计<label
                            class="money">0</label>元</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

prop(name|properties|key,value|fn)：

获取在匹配的元素集中的第一个元素的属性值。

选中复选框为true，没选中为false

jQuery 代码:

$("input[type='checkbox']").prop("checked");

码农公寓

prop(name|properties|key,value|fn)：

jQuery 代码:

相关文章