乘法表
<!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>
