简单的移动端提示插件

Posted 2020-10-03 F_Ender

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()