简化版
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<form id="myform" action="" method="POST">
Username:
<input type="text" name="uname" />
<input type="text" name="tel" />
<input type="text" name="email" /><textarea name="content" rows="10" cols="30"></textarea>
<p style="margin-top:999px;"><input type="submit" value="提交" /></p>
<input type="button" value="提交">
</form>
<!--
name值
昵称 uname
姓名 rname
标题 title
手机 tel
邮箱 email
内容 content
联系人 ucontacts
地址 address
联系方式 contacts
-->
<script>
;(function ($) {
$.fn.tishicengjsqiu = function() {
var mycars = new Array();
//name值 对应提示
mycars['uname'] = "请填写昵称";
mycars['rname'] = "请填写姓名";
mycars['title'] = "请填写标题";
mycars['email'] = "请填写邮箱";
mycars['tel'] = "请填写11位手机号";
mycars['content'] = "请填写内容";
mycars['ucontacts'] = "请填写联系人";
mycars['address'] = "请填写地址";
mycars['contacts'] = "请填写联系方式";
$(this).submit(function(){
var sv=true;
$(this).children().each(function (){
var fname=$(this).attr('name');
if(fname && (!$(this).val() || fname=='tel' || fname=='email')){
var thisval=$(this).val();
if(fname=='tel'){
if(thisval.length ==11 && !isNaN(thisval)){
//sv=true;
return true;
}
}else if(fname=='email'){
//对电子邮件的验证
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(myreg.test(thisval)){
//alert('提示\n\n请输入有效的E_mail!');
//myreg.focus();
//sv=true;
return true;
}
}
$(this).val(mycars[fname]);
$(this).css({'color':'red','background':'yellow'});
//$(this).attr('id','fotishiidddxzq');
$("html,body").animate({scrollTop:$(this).offset().top},100);
var sthis=this;
var test = setTimeout(function(){
//alert($(sthis).attr('name'));
$(sthis).removeAttr('style');
$(sthis).val('');
$(sthis).focus();
},1200);
//清理方法
//clearTimeout(test);
sv=false;
return false;
}
});
return sv;
});
}
})(jQuery);
//使用
$('#myform').tishicengjsqiu();
</script>更新: 【最新版本】在线演示 | FORM输入框表格验证版
Animate.css css3动画库 动画效果选择
1、加入
2、优化部分代码
3、去掉外部样式表<style>改用内联样式
HTML:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<body style="height:1000px;">
<a onclick="tishicengjsqiuonclick();">点击弹出提示层</a>
<!--提示层代码开始-->
<link rel="stylesheet" href="animate.min.css">
<script type="text/javascript" src="tishicengjsqiu.js"></script>
<script>
function tishicengjsqiuonclick(){
$('body').tishicengjsqiu({
textwz: '提示层文字内容', //提示层文字 支持html
tishicbj: 'red', //提示层背景 #ddd
colors: '#fff', //文字颜色
iddtt:3, //自动关闭时间秒
admmint:'bounceInLeft', //显示动画
//动画属性说明
admmout:'hinge' //隐藏动画
});
}
</script>
<!--提示层代码结束-->
</body>tishicengjsqiu.js 新版本 添加重复点击清除定时器 防止重复弹出叠加提示层
;(function ($) {
var pcid;
$.fn.tishicengjsqiu = function(options) {
//定义插件的名称,这里为tishicengjsqiu
// lizhenqiu.com
var timestamp = Date.parse(new Date());
var dft = {
//以下为该插件的属性及其默认值
textwz: '提示层插件文字',
tishicbj: '#ddd', //提示层背景
colors: 'yellow', //文字颜色
idd:'tishicengxiaolizhenqiujqcj'+timestamp,//提示层id
iddtt:3,
admmint:'rollIn', //显示动画
admmout:'hinge' //隐藏动画
};
var ops = $.extend(dft,options);
if($('#'+pcid)) $('#'+pcid).remove();//清除前一层提示
var htmlss='<div class="animated ' + ops.admmint + '" id="' + ops.idd + '" style="background: ' + ops.tishicbj + ';border-radius: 3px;color: ' + ops.colors + ';display: inline-block;padding: 6px 12px;position: fixed;top: 50%;left: 50%;visibility: hidden;z-index: 2147483646;">' + ops.textwz + '</div>';
$(this).append(htmlss);
var twidth=($('#'+ops.idd).width()+24)/2;
var theight=($('#'+ops.idd).height()+12)/2;
$('#'+ops.idd).css({'visibility':'visible','margin-top':+(0-theight),'margin-left':+(0-twidth)});
//清除定时器
if(pcid) clearTimeout( tt );//终止触发的setTimeout防止重复执行
var tt=setTimeout(function(){
$('#'+ops.idd).removeClass(ops.admmint);
$('#'+ops.idd).addClass(ops.admmout);
//$('#'+ops.idd).remove();
},ops.iddtt*1000); //延时3秒
//保存上一个提示层id
pcid=ops.idd;
}
})(jQuery);Animate.css 一款强大的预设css3动画库
Aniauto旧版本 tishicengjsqiu.js
(function ($) {
$.fn.tishicengjsqiu = function(options) {
//定义插件的名称,这里为tishicengjsqiu
// lizhenqiu.com
var dft = {
//以下为该插件的属性及其默认值
textwz: '提示层插件文字',
tishicbj: '#ddd', //提示层背景
colors: 'yellow', //文字颜色
idd:'tishicengxiaolizhenqiujqcj',//提示层id
iddtt:3,
admmint:'rollIn', //显示动画
admmout:'hinge' //隐藏动画
};
var ops = $.extend(dft,options);
$('#'+ops.idd).remove();
var htmlss='<div class="animated ' + ops.admmint + '" id="' + ops.idd + '" style="background: ' + ops.tishicbj + ';border-radius: 3px;color: ' + ops.colors + ';display: inline-block;padding: 6px 12px;position: fixed;top: 50%;left: 50%;visibility: hidden;">' + ops.textwz + '</div>';
$(this).append(htmlss);
var twidth=($('#'+ops.idd).width()+24)/2;
var theight=($('#'+ops.idd).height()+12)/2;
$('#'+ops.idd).css({'visibility':'visible','margin-top':+(0-theight),'margin-left':+(0-twidth)});
setTimeout(function(){
$('#'+ops.idd).removeClass(ops.admmint);
$('#'+ops.idd).addClass(ops.admmout);
//$('#'+ops.idd).remove();
},ops.iddtt*1000); //延时3秒
}
})(jQuery);【旧版本】附近下载:http://pan.lizhenqiu.com/?id=8ebee5bc6a190c203c8f59f904fb3f5e1479114033000
http://pan.lizhenqiu.com/?k=提示层
动画库 http://www.oschina.net/translate/15-best-javascript-animation-libraries-for-developers
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。 jQueryAos下载
=============旧版本=============
HTML:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<body style="height:1000px;">
<!--提示层代码开始-->
<script type="text/javascript" src="tishicengjsqiu.js"></script>
<script>
$('body').tishicengjsqiu({
textwz: '提示层文字内容', //提示层文字 支持html
tishicbj: '#ddd', //提示层背景
colors: 'yellow', //文字颜色
iddtt:3 //自动关闭时间秒
});
</script>
<!--提示层代码结束-->
</body>tishicengjsqiu.js
(function ($) {
$.fn.tishicengjsqiu = function(options) {
//定义插件的名称,这里为tishicengjsqiu
var dft = {
//以下为该插件的属性及其默认值
textwz: '提示层插件文字',
tishicbj: '#ddd', //提示层背景
colors: 'yellow', //文字颜色
idd:'tishicengxiaolizhenqiujqcj',//提示层id
iddtt:3
};
var ops = $.extend(dft,options);
$('#'+ops.idd).remove();
var htmlss='<style>#' + ops.idd + '{background: ' + ops.tishicbj + ';border-radius: 3px;color: ' + ops.colors + ';display: inline-block;padding: 6px 12px;position: fixed;top: 50%;left: 50%;visibility: hidden;}</style><div id="' + ops.idd + '">' + ops.textwz + '</div>';
$(this).append(htmlss);
var twidth=($('#'+ops.idd).width()+24)/2;
var theight=($('#'+ops.idd).height()+12)/2;
$('#'+ops.idd).css({'visibility':'visible','margin-top':+(0-theight),'margin-left':+(0-twidth)});
setTimeout(function(){$('#'+ops.idd).remove()},ops.iddtt*1000); //延时3秒
}
})(jQuery);附件下载:http://pan.lizhenqiu.com/?id=5733d0b917b89d62d40e773429c0ecbd1479094785000
jquery随机获取0-40其中一个数
setTimeout,clearTimeout,setInterval,clearInteral详解
JS中多个setTimeOut函数为什么会同时运行?