标签：padding map 二面 99 item && 10px div 乘法表
乘法表
<!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>
标签：padding,map,二面,99,item,&&,10px,div,乘法表 来源： https://www.cnblogs.com/hill-foryou/p/15154670.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。