<!-- * @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>