【前端】仿消息推送到App提示

效果：

JS:

(function ($) {
　　$.fn.loopmsg = function (options, param) {
　　　  if (typeof options == 'string') {
       　　 　　return $.fn.loopmsg.methods[options](this, param);
    　　  }
    　　 options = $.extend({}, $.fn.loopmsg.defaults, options || {});

　　　var dom = $(document);

　　  if (options.tmplHtml) {
　　　　dom.find('body').append(options.tmplHtml);
　　}else{
　　　　alert('参数错误!');
　　}

　　$.fn.loopmsg.methods['doLoop'](this, options);
}

   $.fn.loopmsg.methods = {
randomSuff: function(jq, options){
if(options.suffData.length == 0){
options.suffData = options.resSuff, options.resSuff = [ ];
}
var arr = options.suffData, result = options.resSuff;
console.log(arr);console.log(result);

var ran = Math.floor(Math.random() * (arr.length));
var tmp = arr[ran];
options.resSuff.push(arr[ran]);
options.suffData[ran] = options.suffData[arr.length - 1];
options.suffData = options.suffData.slice(0, arr.length - 1);
console.log(tmp);
return tmp;
},
randomDoct: function(jq, options){
if(options.doctData.length == 0){
options.doctData = options.doctSuff, options.doctSuff = [ ];
}
var arr = options.doctData, result = options.doctSuff;
console.log(arr);console.log(result);

var ran = Math.floor(Math.random() * (arr.length));
var tmp = arr[ran];
options.doctSuff.push(arr[ran]);
options.doctData[ran] = options.doctData[arr.length - 1];
options.doctData = options.doctData.slice(0, arr.length - 1);
console.log(tmp);
return tmp;
},
    doLoop: function (jq, options) {
var _loopdiv = $(document).find('#p_yuyue');
       timer = setInterval(function(){
var _suffinfo = $.fn.loopmsg.methods['randomSuff'](jq, options);
var _doctinfo = $.fn.loopmsg.methods['randomDoct'](jq, options);
var _msg = _suffinfo+''+options.replace+''+options.placeholder+''+_doctinfo+'专家号';
_loopdiv.addClass('isshow').children('p').html(_msg).end().fadeTo(3000, 1).delay(1000).fadeTo(3000, 0, function(){
_loopdiv.removeClass('isshow').children('p').html('');
});
}, parseInt(options.intervalTime));
    }
};

   $.fn.loopmsg.defaults = {
　　tmplHtml: '<style>#p_yuyue {position: absolute; top:0; display:none;}#p_yuyue p{line-height:2.5rem; background-color:rgba(0,0,0,0.8); color:#fff; padding:0 1rem; border-radius:0.4rem;}.isshow {display:!none;}</style><div id="p_yuyue"><p></p></div>',
     replace: '**',
　　intervalTime: 10000,
     suffData: [], //患者
　　resSuff: [],
     doctData: [], //医生
　　doctSuff: [],
　　doctName: '王医生',
     placeholder: '已成功预约'
   };
})(jQuery);

 

HTML:

<script>
$(function(){
　　$(document).loopmsg({
　　　　suffData: ['章','王','邢','刘','李','石'],
　　　　doctData: ['王医生','张医生','邢医生','刘主任']
　　});
});
</script>