JS实现加载层
昨天有个项目要用到加载层，寻思了一下，框架的加载层也就那样，频繁自己写也不是事。
所以花了些时间封装了一个JS类，内置9种图标样式，全局主要样式可自定义。
转载请附上本文链接！
配置项
{ "msg": "文字，默认: “loading...” ", "show": "是否显示，默认true", "resize": "是否跟随窗口变化，默认true", "log": "是否打印控制台教程，默认true", "id": "DOM元素ID，默认随机id", "width": "遮罩层宽度(任意css样式写法)", "height": "遮罩层高度(任意css样式写法)", "zIndex": "遮罩层层级(int)", "spacing": "图标与文字的间距(int)，单位px", "icon": { "type": "图标类别(int)(1-9)，默认1", "width": "图标宽度(int)，单位px", "height": "图标高度(int)，单位px" }, "color": { "bg": "背景颜色", "icon": "图标颜色", "word": "文字颜色" } }
使用示例
// 实例化调用 var lj = new LoadingJs({ msg: "加载中...", // 加载文字 spacing: 20, // 图标文字间距 log: false, // 关闭控制台教程 icon: { // 图标配置 type: 3, // 图标样式3 width: 64, // 图标宽度 height: 64 // 图标宽度 }, color: { // 颜色配置 bg: "#000131", // 背景色 word: "#ffffff", // 加载文字颜色 icon: "#eeeeee" // 图标颜色 } }); // 实例化对象后的函数和基本属性 begin // 下列三个函数会改变配置对象的show属性 lj.show(); // 显示 loading 元素 lj.hide(); // 隐藏 loading 元素 lj.remove(); // 移除 loading 元素 lj.config; // 配置信息(JSON) // 实例化对象后的函数和基本属性 end
源码 - 压缩版
/** * 作者: 散人 * 版本: V1.5 * 博客: https://www.cnblogs.com/sanrenblog */ var LoadingJs=(function(){function _LoadingJs(property){function css_limit(r,d){if(r){Object.keys(d).forEach(function(key){if(r.hasOwnProperty(key)&&r[key]){r[key]=r[key].toString().replace(/[^0-9a-zA-Z\s\(\)\{\}\+\-\.\*\!_,'"%#]/ig,'')}else{r[key]=d[key]}});return r}else{return d}}function css_wh_set(p,w,h){p.width=p.width?parseInt(p.width):w;p.height=p.height?parseInt(p.height):h;return p}if(this instanceof _LoadingJs){const version='1.5';const css_wh_not_auto=[4,8];property=property?property:{};property.id=property.id?property.id:'loadingjs-div-'+new Date().getTime()+'-'+Math.random().toString().replace(/[0-9]?\./,''),property.msg=property.msg||property.msg===''?property.msg:'loading...';property.show=property.show===false?false:true;property.resize=property.resize===false?false:true;property.width=property.width?property.width.toString().replace(/[^0-9a-zA-Z\+\-\s\(\)\%\!]/g,''):'100%';property.height=property.height?property.height.toString().replace(/[^0-9a-zA-Z\+\-\s\(\)\%\!]/g,''):'100%';property.zIndex=property.zIndex?parseInt(property.zIndex):2147483647;property.spacing=property.spacing?parseInt(property.spacing):0;property.icon=property.icon?property.icon:{type:1};if(!css_wh_not_auto.includes(property.icon.type)){property.icon=css_wh_set(property.icon,64,64)}property.color=css_limit(property.color,{bg:'#ffffff',icon:'#333333',word:'#000000'});let div_str='',style_str='',style_sign='loadingjs-tag-style-icon-'+property.icon.type;switch(property.icon.type){case 1:div_str='';style_str='';break;case 2:div_str=''+property.msg+'
';style_str='';break;case 3:div_str=''+property.msg+'
';style_str='';break;case 4:property.icon=css_wh_set(property.icon,108,78);div_str=''+property.msg+'
';style_str='';break;case 5:div_str=''+property.msg+'
';style_str='';break;case 6:div_str=''+property.msg+'
';style_str='';break;case 7:div_str=''+property.msg+'
';style_str='';break;case 8:property.icon=css_wh_set(property.icon,18,18);div_str=''+property.msg+'
';style_str='';break;case 9:div_str=''+property.msg+'
';style_str='';break}if(property.log!==false){console.log('欢迎使用 loading-js\n\n作者: 散人\n版本: V'+version+'\n博客: https://www.cnblogs.com/sanrenblog\n\n[配置简述]\n=============== begin ===============\n{\n "msg": "文字，默认: “loading...” ",\n "show": "是否显示，默认true",\n "resize": "是否跟随窗口变化，默认true",\n "log": "是否打印控制台教程，默认true",\n\n "id": "DOM元素ID，默认随机id",\n "width": "遮罩层宽度(任意css样式写法)",\n "height": "遮罩层高度(任意css样式写法)",\n "zIndex": "遮罩层层级(int)",\n "spacing": "图标与文字的间距(int)，单位px",\n\n "icon": {\n "type": "图标类别(int)(1-9)，默认1",\n "width": "图标宽度(int)，单位px",\n "height": "图标高度(int)，单位px"\n },\n\n "color": {\n "bg": "背景颜色",\n "icon": "图标颜色",\n "word": "文字颜色"\n }\n}\n=============== end ===============\n\n[API简述]\n=============== begin ===============\n1. show(): 创建/显示 loading 元素\n2. hide(): 隐藏 loading 元素\n3. remove(): 移除 loading 元素\n\n4. config: 配置信息(JSON)\n=============== end ===============\n\n[实例化-示例]\n=============== begin ===============\nvar lj = new LoadingJs({\n msg: "加载中...", // 加载文字\n spacing: 20, // 图标文字间距\n icon: { // 图标配置\n type: 3,\n width: 64,\n height: 64\n },\n color: { // 颜色配置\n bg: "#000131",\n word: "#ffffff",\n icon: "#eeeeee"\n }\n});\n=============== end ===============\n\n祝您使用愉快 (?*?*?)')}function setWH(){let d=document.getElementById(property.id),ld=document.querySelector('#'+property.id+'>div'),ldp=document.querySelector('#'+property.id+'>p');let windowW=d.offsetWidth,windowH=d.offsetHeight,ldW=ld.offsetWidth,ldH=ld.offsetHeight,ldpW=ldp.offsetWidth;ldW=ldW?ldW:property.icon.width;ldH=ldH?ldH:property.icon.height;ldpW=ldpW?ldpW:ldW;ld.style['left']=((windowW-ldW)/2)+'px';ld.style['top']=(((windowH-ldH)/2)-(ldH/2))+'px';ldp.style['left']=((windowW-ldpW)/2)+'px';ldp.style['top']=(((windowH-ldH)/2)+ldH)+'px';ldp.style['margin-top']=property.spacing+'px'}this.show=function(){let d=document.getElementById(property.id);if(d){d.style.display='block'}else{document.querySelector('body').insertAdjacentHTML('beforeend',div_str);if(property.resize){window.addEventListener('resize',setWH)}}setWH();this.config.show=true};this.hide=function(){let d=document.getElementById(property.id);if(d){d.style.display='none'}this.config.show=false};this.remove=function(){let d=document.getElementById(property.id);if(d){try{d.parentNode.removeChild(d)}catch(e){d.remove()}}window.removeEventListener('resize',setWH);this.config.show=false};this.config=property;if(!document.querySelector('.'+style_sign)){document.querySelector('body').insertAdjacentHTML('beforeend',style_str)}if(property.show){this.show()}}else{}}return _LoadingJs})();'+property.msg+'
源码 - 开发版
var LoadingJs = (function() { /** * 构造函数 * @param {Object} property */ function _LoadingJs(property) { /** * css过滤 * @param {Object} r 源数据 * @param {Object} d 默认数据 */ function css_limit(r, d) { if (r) { Object.keys(d).forEach(function(key) { // 遍历完整key if (r.hasOwnProperty(key) && r[key]) { // 传入节点是否存在 r[key] = r[key].toString().replace(/[^0-9a-zA-Z\s\(\)\{\}\+\-\.\*\!_,'"%#]/ig, '') } else { r[key] = d[key]; } }); return r; } else { return d; } } /** * 宽高属性设置 * @param {Object} p * @param {Object} w * @param {Object} h */ function css_wh_set(p, w, h) { p.width = p.width ? parseInt(p.width) : w; // 宽度 p.height = p.height ? parseInt(p.height) : h; // 高度 return p } if (this instanceof _LoadingJs) { const version = '1.5'; // js版本 const css_wh_not_auto = [4, 8]; // 元素宽高不使用统一配置 property = property ? property : {}; property.id = property.id ? property.id : 'loadingjs-div-' + new Date().getTime() + '-' + Math.random().toString().replace(/[0-9]?\./, ''), // 盒子id property.msg = property.msg || property.msg === '' ? property.msg : 'loading...'; // 显示文字 property.show = property.show === false ? false : true; // 默认显示 property.resize = property.resize === false ? false : true; // 跟随窗口变化 property.width = property.width ? property.width.toString().replace(/[^0-9a-zA-Z\+\-\s\(\)\%\!]/g, '') : '100%'; // 遮罩层宽度 property.height = property.height ? property.height.toString().replace(/[^0-9a-zA-Z\+\-\s\(\)\%\!]/g, '') : '100%'; // 遮罩层高度 property.zIndex = property.zIndex ? parseInt(property.zIndex) : 2147483647; // 遮罩层层级 property.spacing = property.spacing ? parseInt(property.spacing) : 0; // 图标与文字的间距 property.icon = property.icon ? property.icon : {type: 1}; // 图标配置 // 遮罩层宽高设置 if (!css_wh_not_auto.includes(property.icon.type)) { property.icon = css_wh_set(property.icon, 64, 64); } // css样式过滤 property.color = css_limit(property.color, { bg: '#ffffff', icon: '#333333', word: '#000000' }); let div_str = '', style_str = '', style_sign = 'loadingjs-tag-style-icon-' + property.icon.type; switch (property.icon.type) { case 1: div_str = ''; style_str = ''; break; case 2: div_str = '' + property.msg + '
'; style_str = ''; break; case 3: div_str = '' + property.msg + '
'; style_str = ''; break; case 4: property.icon = css_wh_set(property.icon, 108, 78); div_str = '' + property.msg + '
'; style_str = ''; break; case 5: div_str = '' + property.msg + '
'; style_str = ''; break; case 6: div_str = '' + property.msg + '
'; style_str = ''; break; case 7: div_str = '' + property.msg + '
'; style_str = ''; break; case 8: property.icon = css_wh_set(property.icon, 18, 18); div_str = '' + property.msg + '
'; style_str = ''; break; case 9: div_str = '' + property.msg + '
'; style_str = ''; break; } if (property.log !== false) { console.log('欢迎使用 loading-js\n\n' + '作者: 散人\n' + '版本: V' + version + '\n' + '博客: https://www.cnblogs.com/sanrenblog\n\n' + '[配置简述]\n' + '=============== begin ===============\n' + '{\n' + ' "msg": "文字，默认: “loading...” ",\n' + ' "show": "是否显示，默认true",\n' + ' "resize": "是否跟随窗口变化，默认true",\n' + ' "log": "是否打印控制台教程，默认true",\n\n' + ' "id": "DOM元素ID，默认随机id",\n' + ' "width": "遮罩层宽度(任意css样式写法)",\n' + ' "height": "遮罩层高度(任意css样式写法)",\n' + ' "zIndex": "遮罩层层级(int)",\n' + ' "spacing": "图标与文字的间距(int)，单位px",\n\n' + ' "icon": {\n' + ' "type": "图标类别(int)(1-9)，默认1",\n' + ' "width": "图标宽度(int)，单位px",\n' + ' "height": "图标高度(int)，单位px"\n' + ' },\n\n' + ' "color": {\n' + ' "bg": "背景颜色",\n' + ' "icon": "图标颜色",\n' + ' "word": "文字颜色"\n' + ' }\n' + '}\n' + '=============== end ===============\n\n' + '[API简述]\n' + '=============== begin ===============\n' + '1. show(): 创建/显示 loading 元素\n' + '2. hide(): 隐藏 loading 元素\n' + '3. remove(): 移除 loading 元素\n\n' + '4. config: 配置信息(JSON)\n' + '=============== end ===============\n\n' + '[实例化-示例]\n' + '=============== begin ===============\n' + 'var lj = new LoadingJs({\n' + ' msg: "加载中...", // 加载文字\n' + ' spacing: 20, // 图标文字间距\n' + ' icon: { // 图标配置\n' + ' type: 3,\n' + ' width: 64,\n' + ' height: 64\n' + ' },\n' + ' color: { // 颜色配置\n' + ' bg: "#000131",\n' + ' word: "#ffffff",\n' + ' icon: "#eeeeee"\n' + ' }\n' + '});\n' + '=============== end ===============\n\n' + '祝您使用愉快 (?*?*?)'); } // 元素定位 function setWH() { let d = document.getElementById(property.id), ld = document.querySelector('#' + property.id + '>div'), ldp = document.querySelector('#' + property.id + '>p'); let windowW = d.offsetWidth, windowH = d.offsetHeight, ldW = ld.offsetWidth, ldH = ld.offsetHeight, ldpW = ldp.offsetWidth; ldW = ldW ? ldW : property.icon.width; ldH = ldH ? ldH : property.icon.height; ldpW = ldpW ? ldpW : ldW; ld.style['left'] = ((windowW - ldW) / 2) + 'px'; ld.style['top'] = (((windowH - ldH) / 2) - (ldH / 2)) +'px'; ldp.style['left'] = ((windowW - ldpW) / 2) + 'px'; ldp.style['top'] = (((windowH - ldH) / 2) + ldH) +'px'; ldp.style['margin-top'] = property.spacing + 'px'; } // 显示函数 this.show = function() { let d = document.getElementById(property.id); if (d) { d.style.display = 'block'; } else { document.querySelector('body').insertAdjacentHTML('beforeend', div_str); // 窗口监听 if (property.resize) { window.addEventListener('resize', setWH); } } setWH(); // 元素定位 this.config.show = true; }; // 隐藏函数 this.hide = function() { let d = document.getElementById(property.id); if (d) { d.style.display = 'none'; } this.config.show = false; }; // 移除函数 this.remove = function() { let d = document.getElementById(property.id); if (d) { try { d.parentNode.removeChild(d); } catch(e) { d.remove(); } } window.removeEventListener('resize', setWH); this.config.show = false; }; // 配置对象 this.config = property; // style盒子 if (!document.querySelector('.' + style_sign)) { document.querySelector('body').insertAdjacentHTML('beforeend', style_str); } // 显示 if (property.show) { this.show(); } } else { // 不需要 new 关键字(自动new) // return new _LoadingJs(property); } } return _LoadingJs; })();' + property.msg + '
转载请附上本文链接！