dom操作记录

js/dom操作/判断是否为dom.js

@@ -0,0 +1,18 @@
+/*
+ * @Description: 判断元素是否为dom元素
+ * @Autor: kindring
+ * @Date: 2021-10-28 15:07:58
+ * @LastEditors: kindring
+ * @LastEditTime: 2021-10-28 15:07:59
+ * @LastDescript: 
+ */
+function isDom(dom) {
+    if (typeof dom != 'object') {
+        return false;
+    }
+    if (typeof HTMLElement == 'object') {
+        return dom instanceof HTMLElement
+    } else {
+        return dom.nodeType === 1 && dom.nodeName === 'string'
+    }
+}

js/quickDom.js

@@ -1,48 +1,285 @@
 /*
- * @Description: 通过js快速构建原生dom元素
+ * @Description: 构建弹窗
  * @Autor: kindring
  * @Date: 2021-10-12 17:16:30
  * @LastEditors: kindring
- * @LastEditTime: 2021-10-12 18:02:44
+ * @LastEditTime: 2021-10-26 15:22:51
  * @LastDescript: 
  */
 
-let domTree = {
-    tag: 'div',
-    attr: [
-        { name: 15 }
-    ],
-    childred: [{
-        tag: 'img',
-        attr: {
-            src: '155'
-        }
-    }, ]
-}
-class Dom {
-    construction(domTree) {
-        this.domTree = domTree
-    }
-    render(obj) {
-        let tag = obj.tag || 'div'
-        let el = document.createElement(tag)
-        Object.keys[obj.attr].forEach(_key => {
-            let _keyString = obj.attr[_key]
-            if (_keyString == '') {
+class CustomPop {
+    constructor(option) {
 
+        let defaultOption = {
+                type: 'tip', //tip,custom,loading,text居中文本
+                mask: false,
+                centerDoms: null, //中间的所有dom元素,用于自定义提示,数组模式,字符串
+                text: null,
             }
-            el.setAttribute(_key, _keyString);
+            // 小窗口弹窗,则默认只允许设置为body
+        this.el = option.el || window.document.body;
+        this.maskEl = null;
+        this.parentEl = null;
+        this.type = option.type || defaultOption.type;
+        this.mask = option.mask;
+        this.tipNum = 0;
+        this.tipStep = 40;
+        this.centerDoms = option.centerDoms
+
+        if (this.type == 'tip') {
+            this.el == window.document.body;
+        } else if (this.type == 'custom') {
+            // if(window.document.body)
+            // this.maskEl = this.buildMask();
+            this.create();
+        }
+
+        if (option.autoClose) {
+            this.parentEl.addEventListener('click', (e) => {
+                this.hide()
+            })
+        }
+
+        this.option = option;
+        this.nowCustomKey = null;
+        this.bind();
+    }
+
+    // 绑定操作,将dom元素绑定到指定的dom元素中,指定dom元素自动添加 relative
+    bind() {
+            console.log(this.el.style.position);
+            if (!this.el.style.position) {
+                this.el.style.position = 'relative'
+            }
+        }
+        // 创建自定义的dom元素
+    create() {
+        let parentDom = document.createElement('div');
+        // 设置dom元素样式
+        this.setStyle(parentDom, {
+            display: 'none',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            'justify-center': 'center',
+            'alignItems': 'center'
+        });
+        if (this.mask) {
+            let maskEl = document.createElement('div');
+            this.setStyle(maskEl, {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(0,0,0)',
+                opacity: '0.3'
+            })
+            this.maskEl = maskEl;
+            parentDom.appendChild(maskEl);
+        }
+        if (this.centerDoms) {
+            this.centerDoms.forEach(item => {
+                item.el.parentElement.removeChild(item.el)
+            })
+        }
+        this.parentEl = parentDom;
+        // 添加元素至dom元素中
+        this.el.appendChild(parentDom);
+    }
+
+    // 显示界面,优先匹配中间内容
+    show(text, theme) {
+        // console.log(this.type);
+        if (this.type == 'tip') {
+            let _time = this.tipNum;
+            _time = Math.min(10, _time);
+            // 设置dom延时进行弹窗提示
+            setTimeout(() => {
+                console.log(this.type);
+                // 构建tip
+                let tipDom = this.buildTip(theme);
+                tipDom.innerHTML = text;
+                //自动添加到body中去
+                this.el.appendChild(tipDom);
+                // 自动显示dom元素并且隐藏
+                setTimeout(() => {
+                    this.setStyle(tipDom, {
+                        opacity: '1'
+                    })
+                    setTimeout(() => {
+
+                        this.setStyle(tipDom, {
+                            top: `${50+(_time * this.tipStep)}px`
+                        })
+                    }, 100);
+                    setTimeout(() => {
+                        this.setStyle(tipDom, {
+                            opacity: 0,
+                            top: `${200+(_time * this.tipStep)}px`
+                        })
+                        setTimeout(() => {
+                            this.setStyle(tipDom, {
+                                display: 'none',
+                            })
+                            this.tipNum--;
+
+                            this.el.removeChild(tipDom);
+                        }, 900);
+                    }, 2200);
+                }, 1);
+            }, this.tipNum * this.tipStep);
+            this.tipNum++;
+            return;
+        } else if (this.type == 'custom') {
+            let centerDom = null;
+            if (text) {
+                let doms;
+                if (this.centerDoms) {
+                    doms = this.centerDoms.find(item => {
+                        if (item.key == text) {
+                            return item;
+                        }
+                    })
+                }
+                if (!doms) {
+                    doms = {
+                        el: document.createElement('span'),
+                        key: 'null'
+                    }
+                    doms.el.innerHTML = text;
+                }
+                centerDom = doms;
+            } else if (this.option.centerDoms) {
+                //默认选择第一个dom元素
+                centerDom = this.option.centerDoms[0];
+            } else {
+                //如果没有字符串,并且也没有默认节点,则无视此窗口
+                console.error('错误');
+            }
+
+            if (centerDom) {
+                if (this.nowCustomKey == text) {
+                    // 直接显示dom元素
+                } else {
+                    // 修改dom元素
+                    this.parentEl.innerHTML = '';
+                    if (this.mask) {
+                        this.parentEl.appendChild(this.maskEl)
+                    }
+                    centerDom.el.addEventListener('click', function(e) {
+                        e = e || window.event;
+                        e.preventDefault();
+
+                    });
+
+                    // 重新构建
+                    this.parentEl.appendChild(centerDom.el)
+                }
+            }
+            this.nowCustomKey = text;
+            this.setStyle(this.parentEl, {
+                display: 'flex'
+            })
+        }
+    };
+
+
+    // hide隐藏界面
+    hide() {
+        if (this.type == 'custom') {
+            this.setStyle(this.parentEl, {
+                display: 'none'
+            });
+        } else {
+            console.error('其他类型的元素正在制作中');
+        }
+    }
+
+
+
+
+
+    buildMask() {
+
+        return maskEl
+    }
+
+    /**
+     * 构建提示元素
+     * @param {'info'|'success'|'warn'|'error'} _theme 样式主题,
+     */
+    buildTip(_theme) {
+        let el = document.createElement('div');
+        _theme = _theme || 'default';
+        this.setStyle(el, {
+            'transition': 'all 0.5s',
+            position: 'absolute',
+            top: '555px',
+            left: '50%',
+            transform: 'translate(-50%,0)',
+            display: 'block',
+            padding: '5px 25px',
+            'border-radius': '5px',
+            opacity: 0,
         })
-        obj.childred.forEach(child => {
+        if (_theme == 'error' || _theme == 'err') {
+            this.setStyle(el, {
+                color: '#D8000C',
+                backgroundColor: '#FFBABA',
+                border: '1px solid rgb(219 176 176)'
+            })
+        } else if (_theme == 'success' || _theme == 'ok') {
+            this.setStyle(el, {
+                color: '#4F8A10',
+                backgroundColor: '#DFF2BF',
+                border: '1px solid rgb(227 253 182)'
+            })
+        } else if (_theme == 'warn' || _theme == 'warning' || _theme == 'waring') {
+            this.setStyle(el, {
+                color: '#9F6000',
+                backgroundColor: '#FEEFB3',
+                border: '1px solid rgb(241 229 180)'
+            })
+        } else {
+            this.setStyle(el, {
+                color: '#31708f',
+                backgroundColor: '#d9edf7',
+                border: '1px solid #bce8f1'
+            })
+        }
+        return el;
+    }
 
-            el.appendChild(this.render(child))
+    // 辅助函数,设置dom元素的样式
+    setStyle(el, params) {
+        Object.keys(params).forEach(key => {
+            let strArr = key.split('-');
+            let strKey = key;
+            if (strArr.length >= 2) {
+                strKey = strArr.reduce((acc, current, index) => {
+                    console.log();
+                    // 第一位
+                    return index == 0 ? current : acc + (current.replace(current[0], current[0].toUpperCase()))
+                }, '')
+            } else {
+                strKey = strArr[0]
+            }
+            el.style[strKey] = params[key];
         })
-        return el
+        return el;
     }
-    create() {
-        return this.render(this.domTree)
+
+
+    // 确认的函数
+    onOk() {
+
     }
-}
-let d = new Dom(domTree)
 
-console.log(d.create);
+    // 取消弹窗的函数
+    onCancel() {
+
+    }
+}

js/sim2.txt

@@ -0,0 +1,49 @@
+898602B9101700221228
+898602B9101700221229
+898607B8101770011651
+898607B8101770011657
+898607B8101770011658
+898607B8101770011660
+898607B8101770011664
+898607B8101770011666
+898607B8101770011667
+898607B8101770011669
+898607B8101770011671
+898607B8101770011675
+898607B8101770011676
+898607B8101770011683
+898607B8101770011684
+898607B8101770011685
+898607B8101770011686
+898607B8101770011687
+898607B8101770011688
+898607B8101770011689
+898607B8101770011690
+898607B8101770011691
+898607B8101770011692
+898607B8101770011693
+898607B8101770011694
+898607B8101770011695
+898607B8101770011697
+898607B8101770011698
+898607B8101770011699
+898607B8101770011700
+898607B8101770011701
+898607B8101770011702
+898607B8101770011703
+898607B8101770011704
+898607B8101770011705
+898607B8101770011706
+898607B8101770011707
+898607B8101770011708
+898607B8101770011709
+898607B8101770011710
+898607B8101770011711
+898607B8101770011712
+898607B8101770011713
+898607B8101770011714
+898607B8101770011715
+898607B8101770011716
+898607B8101770011717
+898607B8101770011718
+898607B8101770011719

js/sort.js

@@ -0,0 +1,51 @@
+/*
+ * @Description: 文本排序
+ * @Autor: kindring
+ * @Date: 2021-10-21 10:52:25
+ * @LastEditors: kindring
+ * @LastEditTime: 2021-10-21 15:39:32
+ * @LastDescript: 
+ */
+const fs = require('fs')
+const path = require('path')
+
+// 获取文本的imei号
+function loadLines(url) {
+    return new Promise((resolve, reject) => {
+        fs.readFile(url, 'utf-8', (err, data) => {
+            if (err) {
+                reject(err)
+                return
+            }
+            let lines = data.split(/\r?\n/)
+            resolve(lines)
+        })
+    })
+}
+
+
+async function main() {
+    let url = path.join(__dirname, './sim2.txt')
+    let lines = await loadLines(url)
+    console.log(lines);
+    lines = lines.map(val => {
+        return {
+            sort: val.substr(-4),
+            pre: val.substr(0, val.length - 4)
+        }
+    })
+    console.log(lines);
+
+    let sortLine = lines.sort((sim1, sim2) => {
+        // console.log(sim1 + ' : ' + sim2);
+        // console.log(parseInt(sim1) + ' : ' + parseInt(sim2));
+        return parseInt(sim1.sort) - parseInt(sim2.sort)
+    })
+    sortLine = sortLine.map((val, i) => {
+        return val.pre + val.sort;
+    })
+    sortLine.forEach(element => {
+        console.log(element);
+    });
+}
+main()

js/t.html

@@ -0,0 +1,93 @@
+<!--
+ * @Description: 测试弹窗功能
+ * @Autor: kindring
+ * @Date: 2021-10-26 11:27:22
+ * @LastEditors: kindring
+ * @LastEditTime: 2021-10-26 15:17:33
+ * @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>
+    <script>
+        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>
+</body>
+
+</html>

js/task.js

@@ -3,7 +3,7 @@
  * @Autor: kindring
  * @Date: 2021-09-02 14:24:58
  * @LastEditors: kindring
- * @LastEditTime: 2021-09-02 16:23:43
+ * @LastEditTime: 2021-10-26 19:44:52
  * @LastDescript: 
  */
 // 定义任务队列
@@ -129,4 +129,25 @@ class Task {
     }
 }
 
-export default Task;
+// 循环
+function forEach(arr, n = 0, fn) {
+    if (arr[n] === undefined) {
+        return;
+    }
+    fn(arr[n], n);
+    forEach(arr, n + 1, fn);
+    setTimeout(() => {
+
+    }, 0)
+}
+let arr = [1, 2, 3, 4, 5, 6, 1]
+forEach(arr, 0, function(val1, index1) {
+    forEach(arr, 0, function(val2, index2) {
+        if (val2 == val1 && index1 != index2) {
+            console.log('有一样的值')
+        }
+    })
+})
+
+
+// export default Task;