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