手机app页面Toast提示框

/**渐进实现点点点等待效果  引用别人的css**/
.ani_dot {
    font-family: simsun;    
}
:root .ani_dot {
    display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
}
@-webkit-keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    -webkit-animation: dot 1s infinite step-start;
}


@keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    animation: dot 1s infinite step-start;

}

/**

 * @Memo 模仿android里面的Toast效果
 * @Date Feb 23,2017
 * 使用方式：
 * 1、在页面最后引入toast.js文件，
 * 2、在需要的位置创建对象并且调用方法。如：new Toast("加载中...",2000).show();
 */
var Height=document.body.clientHeight;//取得页面可视区域的高度
var Width=document.body.clientWidth;//取得页面可视区域的宽度
/**
 * @param message 消息体  提示的内容 尽量小于10个字
 * @param time 显示持续时间  默认2000毫秒
 * @return 
 */ 
var Toast = function(message,time){  
    this.message = message || "加载中...";//显示内容
    this.time = !time?2000:time;//持续时间  
  var reg = /^[0-9]+$/ ;//验证是否问正整数表达式
    if(!reg.test(this.time)){//如果是非数字
    this.time = 2000;
    }
    //点点点点等待效果制作
    this.message = removeDot(this.message) ;
    this.init();  
}  
var msgEntity;  
Toast.prototype = {  
    //初始化显示的位置内容等  
    init : function(){  
        $("#toastMessage").remove();  
        //设置消息体  
        var msgDIV = new Array();  
        msgDIV.push('<div id="toastMessage" style="border-radius:5px;-moz-opacity:0.6;opacity:0.6;">');  
        msgDIV.push('<span id="toastMessageSpan" >'+this.message+' <span class="ani_dot">...</span></span> ');  
        msgDIV.push(makeCloseDiv());  
        msgDIV.push('</div>');  
        msgEntity = $(msgDIV.join('')).appendTo(document.body);  
        //设置消息样式  
        var DivHeight = document.getElementById("toastMessage").offsetHeight;//获取div块的高度值
var DivWidth = document.getElementById("toastMessageSpan").offsetWidth;//获取div块中文字所在span的宽度值 
        var left = (Width - DivWidth) / 2  +  "px";//距容器左边的距离  
        var top = (Height - DivHeight) / 2  +  "px";//距容器上方的距离  
        msgEntity.css("bottom","");
msgEntity.css("top","");
        msgEntity.css({'position':'absolute','top':top,'z-index':'999','left':left,'padding':'10px','color': '#FFFFFF','background': 'rgba(0, 0, 0, 0.7)','font-size': '14px','text-align':'center'}); 
        /*var postion = "middle";//默认屏幕正中央显示
        if("bottom"==postion){
msgEntity.css("bottom",50);
msgEntity.css("top","");//这里一定要置空
}else if("top"==postion){
msgEntity.css("bottom","");
msgEntity.css("top",50);
}else if("middle"==postion){
msgEntity.css("bottom","");
msgEntity.css("top","");
var h = msgEntity.height(),hh = $(window).height();
msgEntity.css("bottom",(hh-h)/2-20);
}*/
        msgEntity.hide();
    },  
    //显示动画  一定时间之后自动关闭
    show :function(){  
        msgEntity.fadeIn(100);  
        setInterval("msgEntity.fadeOut()",this.time);
    },
    //打开动画 不限时间
    open :function(){
    msgEntity.fadeIn(100);
    },
    //关闭动画
    close :function(){
    msgEntity.fadeOut(100);    
    }
}
/**移除字符串最后的省略号**/
function removeDot(str){
if(!str) return "";
//获取最后一个元素
var ch = str.charAt(str.length-1);
if(ch == '.' || ch == ',' || ch == '!'){
str = str.substring(0,str.length-1);
return removeDot(str);
}
return str;
}
function makeCloseDiv(){
/**************开始（此处可自定义关闭图片路径）下面是目前正在做的应用实际用到的************************/
var homrUrl = getLocalStorageValue("homeUrl");//此处获取存储手机本地的主页面连接URL
var closePngUrl = homrUrl.substring(0,homrUrl.length-9) + "images/close.png"//截取主页面URL根路径，然后拼接close.png的路径
/**************结束************************/
var s = "<img src='"+closePngUrl+"' οnclick='javascript:new Toast().close();' style='position:absolute;top:-8px; right:-8px; z-index:999;width:25px;height:25px;border-radius:50%;'></img>";
return s;
}
/**用的的图片为close.png  在附件中已经上传**/