js封装的Toast消息提示框，可作为消息提示、警示框、报错提示、确认框等，很方便好用！(2)

最新推荐文章于 2024-07-12 16:27:40 发布

2401_84092423

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量589

点赞数 17

分类专栏：程序员文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_84092423/article/details/138778866

版权

程序员专栏收录该内容

284 篇文章 0 订阅

订阅专栏

var n=0,cache={},display,primary_cur;//cache用来缓存，省的每次都去dom获取

obj.timer = setInterval(function(){

n++;//执行次数每次递增

for(var p in prop){

if(“display”===p) {

display = prop[“display”];

if(display!==‘none’){

obj.style[‘display’] = display;

}

delete prop[“display”];

continue;

}

//判断是否是可以递增的属性，如果不是则直接让它生效，并从prop中删除，删除后就不用每次任务都执行它

var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性

if(!reg.test(prop[p])){

obj.style[p] = prop[p];

delete prop[p];

continue;

}

var value,opacityFlag=(p == “opacity”)?true:false;

var cur = 0;

if(cache[p+“_cur”]){//从缓存中取

cur = cache[p+“_cur”];

value = cache[p+“_value”];

}else{

value = prop[p];

if(opacityFlag) {

//如果本来是隐藏的则cur默认就是0

if(getStyle(obj, ‘display’)!==‘none’){

cur = Math.round(parseFloat(getStyle(obj, p)) * 100);

}

} else {

cur = parseInt(getStyle(obj, p));

//处理100px的格式

(typeof value===‘string’) && (value=value.replace(/px$/,“”));

}

primary_cur=cur;

cache[p+“_value”] = value;

}

var incre ;

if(cache[p+‘_increment’]){//如果缓存中有则从中取

incre = cache[p+‘_increment’];

}else{

if(opacityFlag){

incre = (value*100-cur)/limit;//计算每次变化值

}else{

incre = (value-cur)/limit;//计算每次变化值

}

cache[p+‘_increment’]= incre;

}

//缓存起来，这样就不用每次都去dom中获取了。

cache[p+“_cur”] = cur + incre;

if (opacityFlag) {

obj.style.filter = “alpha(opacity:”+(cur + incre)+" )";

obj.style.opacity = (cur + incre)/100 ;

}else {

obj.style[p] = cur + incre + “px”;

}

//如果达到了最大执行次数，要清除定时器，并执行回调函数

if(n==limit){

if(display===‘none’){

obj.style[‘display’] = ‘none’;

}

//清除定时器

clearInterval(obj.timer);

obj.timer=undefined;

func && func();

}

},time)

}

var _ = {

isFunction : function(o){

return o!== null &&typeof o ===‘function’;

}

function textToast(msg,option){

var animate = animation();

var option = option||{},duration=3000,color=‘#6a6a6a’,msgColor=‘white’,type,msgType=‘normal’,openCallback,closeCallback,showFlag

,bgFlag,width=‘300’,left,title,faded=true;

if(option){

option.duration && (function(){

duration = option.duration;

if(duration===‘slow’){

duration = ‘3000’;

}else if(duration===‘fast’){

duration = ‘1000’;

}else if(duration===‘normal’){

duration = ‘2000’;

}

}());

option.openCallback && (openCallback = option.openCallback );

option.closeCallback && (closeCallback = option.closeCallback );

option.color && (color = option.color );

option.msgColor && (msgColor = option.msgColor );

option.type && (type = option.type);

option.msgType && (msgType = option.msgType);

option.title && (title = option.title);

if(typeof option.isbg===‘boolean’){

bgFlag = option.isbg;

}

if(typeof option.faded===‘boolean’){

faded = option.faded;

}

(type===‘show’)?(showFlag=true):(showFlag=false);//是否一直显示

if(type===‘show’){//如果是一直展示的，必须要有关闭按钮和标题

//判断有没有标题信息，没有就默认

if(!title){

title=‘消息’;

}

if(option.width){

var t_width = option.width;

if(/(\d+)px/.test(t_width) || /(\d+)/.test(t_width)){

width = RegExp.$1;

}

left = (window.screen.availWidth-30-width)/2+‘px’;

width+=‘px’;

}

var toastDiv = document.getElementById(“toast_content_div”);

if(toastDiv){

if(showFlag=toastDiv.alwaysShowFlag && bgFlag=toastDiv.bgFlag){//toastDiv div已经创建，并且显示状态没有改变，则不需要重新生成DIV

if(bgFlag){//如果是有遮罩的，相互切换需要另外处理

/*var toast_content_bg = document.getElementById(“toast_content_bg”);

toast_content_bg.style.height = getToastHeight()+“px”;

var toast_content_child_div = document.getElementById(“toast_content_child_div”);

toast_content_child_div.style.width=width;

toast_content_bg.childNodes[0].style.top = (window.scrollY||window.document.documentElement.scrollTop) + window.screen.availHeight * 0.25 +‘px’;

toastDiv.parentElement.removeChild(toastDiv);

clearTimeout(toastDiv.timmer);

toastDiv=null;

}else{

var toast_span_msg_id = document.getElementById(“toast_span_msg_id”);

toast_span_msg_id.innerText=msg;

toast_span_msg_id.style.color=msgColor;

toastDiv.style.backgroundColor=color;

toastDiv.style.top = (window.scrollY||window.document.documentElement.scrollTop) + window.screen.availHeight * 0.25 +‘px’;

//用渐入来显示

showHide(‘show’);

clearTimeout(toastDiv.timmer);

//执行显示函数

openCallback && _.isFunction(openCallback) && openCallback();

if(!showFlag){

toastDiv.timmer = setTimeout(function(){

showHide(‘hide’,closeCallback);

},duration);

}

return ;

}

}else{

toastDiv.parentElement.removeChild(toastDiv);

clearTimeout(toastDiv.timmer);

toastDiv=null;

}

var html=‘’;

toastDiv = document.createElement(“div”);

toastDiv.alwaysShowFlag=showFlag;

toastDiv.bgFlag=bgFlag;

toastDiv.id=“toast_content_div”;

toastDiv.style.position = “absolute”;

if(bgFlag){

toastDiv.style.top=“0px”;

toastDiv.style.margin =“0”;

toastDiv.style.padding =“0”;

html = ‘

’;

html +=‘

’;

}else{

toastDiv.style.cssText=“background:”+color+“;width:”+width+“;z-index:5;left:”+left+“;top:35%;position:absolute;border-radius:8px;FILTER: alpha(opacity=70);opacity: 0.7;display:none;min-height:80px;”;

}

if(title){

html +=‘

’;

html +=‘

’ + title + ‘’;

html +=‘x’;

}

html +=‘

’;

if(msgType===‘suc’||msgType===‘success’){

html +=‘☺’;

}else if(msgType===‘fail’){

html +=‘☹’;

}else if(msgType===‘warn’){

html +=‘⚠’;

}else{//没有图片

}

html += “”+msg+“”;

html +=‘’;

function closeEvent(){

return closeDiv.bind(this);

}

if(showFlag){

html +=“

”

+“”

}

if(bgFlag){

html +=“”;

}

toastDiv.innerHTML = html ;

window.document.body.appendChild(toastDiv);

if(bgFlag){

var toast_content_bg = document.getElementById(“toast_content_bg”);

toast_content_bg.style.width =document.body.clientWidth-10+“px”;

toast_content_bg.style.height=getToastHeight()+‘px’;

toast_content_bg.childNodes[0].style.top = (window.scrollY||window.document.documentElement.scrollTop) + window.screen.availHeight * 0.25 +‘px’;

}else{

toastDiv.style.top = (window.scrollY||window.document.documentElement.scrollTop) + window.screen.availHeight * 0.25 +‘px’;

}

//执行显示

showHide(‘show’,openCallback);

if(showFlag){

var confirmEventDiv = document.getElementById(“confirmEventDiv”);

var closeEventDiv = document.getElementById(“closeEventDiv”);

var msg_ico = document.getElementById(“msg_ico”);

if(document.addEventListener){

confirmEventDiv && confirmEventDiv.addEventListener(‘click’,confirmDiv);

closeEventDiv && closeEventDiv.addEventListener(‘click’,closeDiv);

msg_ico && msg_ico.addEventListener(‘click’,closeDiv);

}else{

confirmEventDiv && confirmEventDiv.attachEvent(‘onclick’,confirmDiv);

closeEventDiv && closeEventDiv.attachEvent(‘onclick’,closeDiv);

msg_ico && msg_ico.attachEvent(‘onclick’,closeDiv);

}

if(!showFlag){

toastDiv.timmer = setTimeout(function(){

showHide(‘hide’,closeCallback);

},duration);

}

function getToastHeight(){

return window.screen.availHeight > document.body.clientHeight ? window.screen.availHeight : document.body.clientHeight;

}

function confirmDiv(){//关闭是不执行回调函数的

clearTimeout(toastDiv.timmer);

showHide(‘hide’,closeCallback);

}

function closeDiv(){//关闭是不执行回调函数的

clearTimeout(toastDiv.timmer);

showHide(‘hide’);

}

function showHide(type,callback){

if(bgFlag){

var toast_content_bg_div = document.getElementById(“toast_content_div”);

var toast_content_child_div = document.getElementById(“toast_content_child_div”);

if(faded){//需要执行渐入渐出动画

if(type===‘hide’){

toast_content_bg_div && (animate.fadeOut(toast_content_bg_div,‘slow’));

toast_content_child_div && (animate.fadeOut(toast_content_child_div,‘slow’));

}else{

toast_content_bg_div && (animate.fadeIn(toast_content_bg_div,‘slow’));

toast_content_child_div && (animate.fadeIn(toast_content_child_div,‘slow’));

}

}else{

do_showHide(toast_content_bg_div,type,true);

do_showHide(toast_content_child_div,type,true);

}

}else{

if(faded){//需要执行渐入渐出动画

if(type===‘hide’){

toastDiv && (animate.fadeOut(toastDiv,‘slow’));

}else{

toastDiv && (animate.fadeIn(toastDiv,‘slow’));

}

}else{

do_showHide(toastDiv,type);

}

setTimeout(function(){

callback && _.isFunction(callback) && callback();

},0)

function do_showHide(el,type,opac){

if(type===‘hide’){

el && (el.style.display=‘none’);

}else{

if(el){

if(opac){

el.style.filter=‘alpha(opacity:100)’;

el.style.opacity=1;

}

el.style.display=‘block’;

}

/*语法

textToast(msg,option);

参数说明：

msg:需要展示的消息内容

option可选对象，包含以下属性：

title --展示的标题

type --show表示一直显示，其他为短暂显示后隐藏

isbg --是否有遮罩 true表示有，默认没有

msgType – 消息类型 suc表示成功会显示一个笑脸，fail显示一个哭脸 warn显示一个警告图片，默认不显示

msgColor --消息内容的字体颜色，缺省默认白色

color --消息内容展示区域的背景颜色，默认黑色

duration --消息窗口持续时间，缺省默认3000毫秒，可以设置毫秒数、fast、normal、slow等，如果type='show’的话此字段不生效

width --消息窗口宽度可以填400或者400px，缺省300px

openCallback --消息窗口打开的回调函数

closeCallback --消息窗口关闭的回调函数

faded – 渐入渐出 true/false 缺省为true

function toast(){

textToast(‘有标题、有遮罩、有笑脸、一直展示、宽度设置400、默认渐入渐出，需要点击关闭’,{title:‘消息’,type:‘show’,isbg:true,msgType:‘suc’,width:400} );

}

function toast1(){

var option={

duration:‘slow’,color:‘green’,msgType:‘fail’,width:‘sdf’

}

textToast(‘自动关闭、背景颜色设置green、无遮罩、设置哭脸、默认渐入渐出、宽度设置错类型则默认300px等’,option);

}

function toast2(){

var option={

duration:‘slow’,isbg:true,msgType:‘warn’

}

textToast(‘自动关闭、有遮罩、显示警告，默认渐入渐出’,option);

}

function toast3(){

textToast(‘有消息内容，默认自动关闭、不执行渐入渐出’,{faded:false,isbg:true,type:‘show’});

}

function toast4(){

textToast(‘有消息内容，默认自动关闭、默认渐入渐出’);

}

function toast5(){

textToast(‘有消息内容，默认自动关闭、默认渐入渐出，并且有打开、关闭回调函数’,{

openCallback:function(){

alert(‘openCallback’)

closeCallback:function(){

alert(‘closeCallback’)

}

});

}

function toast6(){

textToast(‘有消息内容，默认自动关闭、不执行渐入渐出，并且有打开、关闭回调函数’,{faded:false,isbg:true,type:‘show’,

openCallback:function(){

alert(‘openCallback’)

closeCallback:function(){

alert(‘closeCallback’)

}});

}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
bg:true,type:‘show’,

openCallback:function(){

alert(‘openCallback’)

closeCallback:function(){

alert(‘closeCallback’)

}});

}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-UQiFekFB-1715545471249)]

[外链图片转存中…(img-Y1z93RBL-1715545471250)]

[外链图片转存中…(img-ciMOihqL-1715545471250)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84092423

关注

17
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
js封装的Toast消息提示框，可作为消息提示、警示框、报错提示、确认框等，很方便好用！(2)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫