类似app常见效果,弹出一个提示语句(黑色背景+白色文字),2s后消失(来自改编alert,在h5里比较实用的),下面附上效果图

1.首先是js文件,我将其命名为alertMsg.js,使用的时候直接alertMsg("哈喽"),就可以啦,js文件内容如下:

window.alertMsg = function(txt) {
var alertFram = document.createElement("DIV");
alertFram.id = "alertFram";
alertFram.style.position = "fixed";
alertFram.style.width = "100%";
alertFram.style.textAlign = "center";
alertFram.style.top = "40%";
alertFram.style.zIndex = "10001";
strHtml = " <span style=\"font-family: 微软雅黑;display:inline-block;background:#333;color:#fff;padding:0 20px;line-height:36px;border-radius:6px; \">" + txt + "</span>";
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
setTimeout((function(){
alertFram.style.display="none";
}),2000);
};

类似app常见效果,弹出一个提示语句(黑色背景+白色文字),2s后消失(来自改编alert,在h5里比较实用的),下面附上效果图类似app常见效果,弹出一个提示语句(黑色背景+白色文字),2s后消失(来自改编alert,在h5里比较实用的),下面附上效果图2.在html中使用时,先加载js文件<script src="js/alertMsg.js"></script>,然后写js语句这么写(html):

<script>
$(function(){
$("#loginBtn").click(function(){
if($("#loginPhone").val()==""){
alertMsg("请输入手机号");
return false;
}
if($("#loginPhone").val()!=="" && !/^1[3|4|5|8]\d{9}$/.test($("#loginPhone").val())){
alertMsg("手机号格式不正确");
return false;
}
if($("#loginPsw").val()==""){
alertMsg("请输入密码");
return false;
}
if($("#loginPsw").val()!=="" && $("#loginPsw").val()!=="888888"){
alertMsg("账号或密码不正确");
return false;
}
})
})
</script>

类似app常见效果,弹出一个提示语句(黑色背景+白色文字),2s后消失(来自改编alert,在h5里比较实用的),下面附上效果图