<!--
* @Description: 测试弹窗功能
* @Autor: kindring
* @Date: 2021-10-26 11:27:22
* @LastEditors: kindring
* @LastEditTime: 2021-11-16 15:40:05
* @LastDescript:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<script src="./quickDom.js"></script>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<button onclick="show()">弹窗tip</button>
<button onclick="show()">弹窗tip</button>
<button onclick="show()">弹窗tip</button>
<div id="parent" class="div1">
</div>
<div id="pop1">
这是弹窗1
</div>
<div id="pop2">
这是弹窗2
</div>
<div id="wallet">
显示在界面上代码值
</div>
<table border="1" id="table">
<tr>
<td>标头1</td>
<td colspan="2">标头2</td>
<td>标头1</td>
<td>标头1</td>
<td>标头1</td>
<td>标头1</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td colspan="2" rowspan="2">测试</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td rowspan="2">测试</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>测试</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</table>
<script>
let tabel = document.getElementById('table');
let lr = tabel.getElementsByTagName('td')
const wallet = document.getElementById('wallet');
let shadow = wallet.attachShadow({
mode: 'closed'
});
const t = document.createElement('span');
t.innerText = '真正的代码值';
shadow.appendChild(t)
shadow = null;
Array.apply(null, lr).forEach((element, i) => {
element.onclick = function(e) {
e.target.style.backgroundColor = "orangered"
e.target.style.color = "white"
console.log({
元素单元格行位置: 获取元素在多少行(e.target),
元素单元格列位置: 获取元素在多少列(e.target)
});
}
})
function 获取元素在多少列(el) {
let tr元素 = el.parentNode;
let 本行td元素 = tr元素.getElementsByTagName('td');
本行td元素 = Array.apply(null, 本行td元素);
let 元素位置 = 本行td元素.findIndex(dom => dom == el);
本行td元素.length = 元素位置;
let 元素在第几列 = Array.apply(null, 本行td元素)
.reduce((当前列数, 当前dom) => {
return 当前列数 += 当前dom.getAttribute('colspan') ? parseInt(当前dom.getAttribute('colspan')) : 1
}, 1)
return 元素在第几列;
}
function 获取元素在多少行(el) {
return '没思路,太麻烦'
}
let tip = new CustomPop({
type: 'tip'
})
let n = 0;
function show() {
tip.show('show:' + n);
n++
}
console.log(tip);
tip.show('测试error', 'error')
tip.show('测试ok', 'ok')
tip.show('测试waring', 'warn')
tip.show('测试info')
let c = new CustomPop({
type: 'custom',
// mask: true,
autoClose: true,
el: document.getElementById('parent'),
centerDoms: [{
key: 'pop1',
el: document.getElementById('pop1')
}, {
key: 'pop2',
el: document.getElementById('pop2')
}]
})
// console.log(c);
// c.show('pop1')
// setTimeout(() => {
// c.hide('pop1')
// }, 2000);
// setTimeout(() => {
// c.show('pop2')
// }, 4000);
// setTimeout(() => {
// c.show('pop1')
// }, 6000);
// setTimeout(() => {
// c.show('测试功能呢')
// }, 6000);
// setTimeout(() => {
// c.show('pop1')
// }, 7000);
// setTimeout(() => {
// c.show('pop1')
// }, 7500);
</script>
<script>
// setTimeout(() => console.log(1));
// Promise.resolve(2).then(console.log);
// requestAnimationFrame(() => console.log(3));
// console.log(4);
// window.onclick = () => console.log(5);
// window.dispatchEvent(new Event('click'));
/*
4
2
1
5
3?
4
5
2
3
1
*/
</script>
</body>
</html>