zoukankan      html  css  js  c++  java
  • hxq的库

    在页面中使用

    可以调取html模板

    /**
     * Created by DY040 on 2017/10/31.
     */
    
    
    
    
    var hxq = {
        init: function () {
            var self = this;
            // self.router.init();
            // self.rem(); rem适配
    
    
        },
        router: {
            init: function () {
                var self = this;
                self.getNode();
                // console.log(self.getNode)
    
            },
            getTemplate: function (url, node) {
                console.log(url)
                var xhr;
                if (window.XMLHttpRequest) {
                    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xhr = new XMLHttpRequest();
                }
                else {
                    // IE6, IE5 浏览器执行代码
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        node.outerHTML = xhr.responseText
                    }
                }
                xhr.open("POST", url, false);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send();
    
    
            },
            getNode: function () {
    
                var nodes = document.querySelectorAll('[h-src]');
                console.log(nodes)
                nodes.forEach(function (v, k, ele) {
                    var url = v.getAttribute('h-src')
    
    
                    this.getTemplate(url, v)
                }.bind(this))
            }
        },
        rem: function () {
            document.head.innerHTML = '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">' + document.head.innerHTML
    
                var width = document.documentElement.clientWidth / 10;
                document.documentElement.style.fontSize = width + 'px';
        },
        EventUtil: {
            /*
             * EventUtil.addHandler(document.querySelector('button'),'click',fn)
             * */
            /*添加事件*/
            addHandler: function (ele, type, handler) {
                if (ele.addEventListener) {
                    ele.addEventListener(type, handler, false);
                } else if (ele.attachEvent) {
                    ele.attachEvent('on' + type, handler);
                } else {
                    ele['on' + type] = handler;
                }
            },
            /*移除事件*/
            removeHandler: function (ele, type, handler = false) {
                if (ele.removeEventListener) {
                    ele.removeEventListener(type, handler, false);
                } else if (ele.detachEvent) {
                    ele.detachEvent('on' + type, handler);
                } else {
                    ele['on' + type] = null;
                }
            },
            getEvent: function () {
                /*获取事件对象*/
                return event ? event : window.event;
            },
            getTarget: function (event) {
                /*获取事件触发者*/
                return event.target || event.srcElement;
            },
            /*取消默认行为*/
            preventDefault: function (event) {
                if (event.preventDefault) {
                    event.preventDefault()
                } else {
                    event.returnValue = false;
                }
            },
            /*阻止冒泡*/
            stopPropagation: function (event) {
                /*阻止默认行为*/
                if (event.stopPropagation) {
                    event.stopPropagation()
                } else {
                    event.cancelBubble();
                }
            },
            /*获取页面距离左上距离*/
            getPageX: function (event) {
                if (event.pageX) {
                    return event.pageX;
                } else {
                    return event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
                }
            },
            getPageY: function (event) {
                if (event.pageY) {
                    return event.pageY;
                } else {
                    return event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
                }
            }
        },
    
        DOM: {
            //获取视口高度
            clientHeight: function () {
                if (typeof window.innerHeight !== 'undefined') {
                    return window.innerHeight;
                } else if (document.documentElement) {
                    return document.documentElement.clientHeight;
                } else {
                    return document.body.clientHeight;
                }
            },
            /*获取视口宽度*/
            clientWidth: function () {
                if (typeof window.innerWidth !== 'undefined') {
                    return window.innerWidth;
                } else if (document.documentElement) {
                    return document.documentElement.clientWidth;
                } else {
                    return document.body.clientWidth;
                }
    
            }
        }
    
    
    };
    
    hxq.init();
    nbnbnb
  • 相关阅读:
    Ant Design Charts更改tooltip样式的方法
    css更改滚动条样式
    css实现多行文本设置省略号
    css-背景图置于背景色的下方
    js使用reduce实现扁平化数组转换为树形数据
    js实现从0到指定数据的跳动
    原生js模拟vue的响应式
    柯里化函数
    vue中keepalived的使用
    常用网址
  • 原文地址:https://www.cnblogs.com/aqigogogo/p/7655076.html
Copyright © 2011-2022 走看看