百度二面 99 乘法表

乘法表
<!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 {
                padding: 20px;
            }
            #content {
                width: 1100px;
            }
            .item {
                margin-bottom: 10px;
            }
            .item div {
                width: 60px;
                padding: 10px;
                float: left;
                border: 1px solid #f00;
                margin-right: 10px;
            }
            .item:after {
                content: "";
                display: block;
                clear: both;
            }
            .item:nth-child(2n) div {
                background-color: aqua;
            }
            .item:nth-child(2n + 1) div {
                background-color: #ff0;
            }
        </style>
    </head>
    <body>
        <div id="content"></div>
        <script>
            let fragment = document.createDocumentFragment();
            for (var i = 1; i <= 9; i++) {
                var h = document.createElement("div");
                h.classList.add("item");
                var arr = [];
                for (var k = 1; k <= i; k++) {
                    var item = createEle(i, k);
                    h.appendChild(item);
                }
                fragment.append(h);
            }
            function createEle(a, b) {
                let div = document.createElement("div");
                div.innerHTML = a + "*" + b + "=" + a * b;
                return div;
            }

            let content = document.getElementById("content");
            content.appendChild(fragment);
            

            setTimeout(function () {
                // let isdown = false;
                var _map = {};
                content.addEventListener("mousedown", function (e) {
                    // isdown = true
                    // _map = {};
                    var sx = e.clientX;
                    var sy = e.clientY;
                    _map.sx = sx;
                    _map.sy = sy;
                    console.log(_map, "mousedown");
                    // _map[e.innerHTML] = e
                });
                content.addEventListener("mouseup", function (e) {
                    var ex = e.clientX;
                    var ey = e.clientY;
                    _map.ex = ex;
                    _map.ey = ey;
                    // var sx = _map.sx
                    // var sy = _map.sy
                    // _map.tl = {
                    //     x: sx,
                    //     y: sy
                    // }
                    // _map.tr = {
                    //     x: ex,
                    //     y: sy
                    // }
                    // _map.bl = {
                    //     x: sx,
                    //     y: ey
                    // }
                    // _map.br = {
                    //     x: ex,
                    //     y: ey
                    // }
                    console.log(_map, "mouseup");
                    var res = getInner(_map);
                    console.log(res, "res");
                });

                // let map = {}
                content.addEventListener("mousemove", function (e) {
                    // let text = e.target.innerHTML
                    // map[text] = e.target;
                    // console.log(e.target,'e.target')
                });
            });
            // window.onload = function(){

            function getInner(_map) {
                let items = document.querySelectorAll(".item div");

                var map = [];
                for (let i = 0; i < items.length; i++) {
                    var pos = item.getBoundingClientRect();
                    let l = pos.left;
                    let t = pos.top;
                    let w = pos.width;
                    let h = pos.height;
                    var pos = {
                        tl: {
                            x: l,
                            y: t
                        },
                        tr: {
                            x: l + w,
                            y: t + h
                        },
                        bl: {
                            x: l,
                            y: t + h
                        },
                        br: {
                            x: l + w,
                            y: t + h
                        }
                    };
                    // for (var k in pos) {
                    //     var p = pos[k];
                    //     var x = p.x;
                    //     var y = p.y;
                    //     var { ex, ey, sx, sy } = _map;
                    //     console.log(x,y, ex, ey, sx, sy, '000')
                    //     let isIn1 = x > sx && x < ex && y > sy && y < ey;
                    //     let isIn2 = x < sx && x > ex && y > sy && y < ey;
                    //     if (isIn1 || isIn2) {
                    //         map.push(item);
                    //     }
                    // }
                }

                console.log(map, "map");
                // }
            }
        </script>
    </body>
</html>
posted on 2021-08-17 22:48 超岭阅读(38) 评论(0) 编辑收藏举报
刷新页面返回顶部
博客园

super.hill

公告
