javascript
function FEerNotice(opt){ var opt = opt || {} this.opt = { text: opt.text || "加载中..", duration: opt.duration || 300, type: opt.type || ‘loading‘ }; //生成指定的dom this.createDom = function(){ var loadingDom = document.createElement(‘div‘); loadingDom.id = ‘FEerloading‘; loadingDom.className = ‘FEerloading hide‘; var backDrop = document.createElement(‘div‘); backDrop.className = ‘backDrop‘; switch (this.opt.type){ case ‘loading‘: var loadingIcon = document.createElement(‘i‘); loadingIcon.className = "FEer-loading-icon"; break; case ‘success‘: var loadingIcon = document.createElement(‘i‘); loadingIcon.className = "FEer-success-icon"; break; case ‘failed‘: var loadingIcon = document.createElement(‘i‘); loadingIcon.className = "FEer-failed-icon"; break; default: var loadingIcon = document.createElement(‘i‘); } var txt = document.createTextNode(this.opt.text); backDrop.appendChild(loadingIcon); backDrop.appendChild(txt); loadingDom.appendChild(backDrop); return loadingDom; } //显示 if(typeof this.show != ‘function‘){ FEerNotice.prototype.show = function(){ if(!document.getElementById(‘FEerloading‘)){ var dom = this.createDom(); document.getElementsByTagName(‘body‘)[0].appendChild(dom); document.getElementById("FEerloading").className = ‘FEerloading‘; }else{ document.getElementById("FEerloading").className = ‘FEerloading‘; } } } //隐藏 if(typeof this.hide != ‘function‘){ FEerNotice.prototype.hide = function(){ if(!!document.getElementById(‘FEerloading‘)){ document.getElementById("FEerloading").className = ‘FEerloading hide‘; } } } //定时显示隐藏 if(typeof this.autoHide != ‘function‘){ FEerNotice.prototype.autoHide = function(){ if(!document.getElementById(‘FEerloading‘)){ var dom = this.createDom(); document.getElementsByTagName(‘body‘)[0].appendChild(dom); document.getElementById("FEerloading").className = ‘FEerloading‘; }else{ document.getElementById("FEerloading").className = ‘FEerloading‘; } setTimeout(function(){ document.getElementById("FEerloading").className = ‘FEerloading hide‘; }.bind(this), this.opt.duration) } } }
css
#FEerloading{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); z-index: 9999; } #FEerloading .backDrop{ min-width: 100px; min-height: 100px; text-align: center; border-radius: 4px; color: rgba(255,255,255,.8); background: rgba(0,0,0,.8); } #FEerloading .backDrop i{ position: relative; display: block; margin: 10px auto 10px; height: 50px; width: 50px; overflow: hidden; } #FEerloading .backDrop i.FEer-loading-icon{ background: #d7ad6a; border-radius: 50%; } #FEerloading .backDrop i.FEer-loading-icon:before{ content: ""; position: absolute; top: -98px; left: 50%; margin-left: -60px; width: 120px; height: 120px; background: rgba(0,0,0,.5); border-radius: 50px; -webkit-animation: roll-before 7s linear infinite; } @-webkit-keyframes roll-before{ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } #FEerloading .backDrop i.FEer-loading-icon:after{ content: ""; position: absolute; top: -97px; left: 50%; margin-left: -60px; width: 120px; height: 120px; background: rgba(0,0,0,.5); border-radius: 45px; -webkit-animation: roll-after 5s linear infinite; } @-webkit-keyframes roll-after{ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } #FEerloading .backDrop i.FEer-success-icon:before{ content: ""; position: absolute; left: 16px; top: 10px; width: 20px; height: 35px; border: 3px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); } #FEerloading .backDrop i.FEer-failed-icon:before{ content: ""; position: absolute; left: 24px; top: 10px; width: 3px; height: 35px; transform: rotate(45deg); background: #fff; } #FEerloading .backDrop i.FEer-failed-icon:after{ content: ""; position: absolute; left: 24px; top: 10px; width: 3px; height: 35px; transform: rotate(-45deg); background: #fff; }
调用方式说明:
入参介绍:opt: { text: opt.text || "加载中..", duration: opt.duration || 300, type: opt.type || ‘loading‘ }opt对象的参数字段:text,你需要显示提示的文字;duration,自动显示/隐藏 提示的时间间隔;type,提示类型 ‘loading‘ | ‘success‘ | ‘failed‘ 每个类型对应一种提示的样式 原型方法: show() ,即显示提示;
show() ,隐藏提示; autoHide() ,自动显示隐藏提示; 调用举例: var fnotice = new FEerNotice({ text: "加载中..", duration: 2000, type: "loading"})fnotice.autoHide()
时间: 2024-08-01 22:46:04