kindring
/
md


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