zoukankan      html  css  js  c++  java
  • 百度 二面 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>

  • 相关阅读:
    利用兼容DC和兼容位图实现图形重绘
    MFC实现文件打开和保存功能实现
    CFile文件操作示例
    利用互斥对象实现线程同步的实例说明
    bootstrap3 input 验证样式【转】
    js event 冒泡和捕获事件详细介绍【转】
    Html+Ajax+Springmvc+Mybatis,不用JSP【转】
    hp电脑重装win7 64位 后 所有软件都装不上问题【转】
    bootstrap 模态 modal 小例子【转】
    servlet 获取 post body 体用流读取为空的问题【转】
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/15154670.html
Copyright © 2011-2022 走看看