单击按钮发送验证码,出现倒计时的简单实例
更新时间:2017年03月17日 09:39:56 投稿:jingxian
下面小编就为大家带来一篇单击按钮发送验证码,出现倒计时的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
实例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var InterValObj; //timer变量,控制时间 var count = 30; //间隔函数,1秒执行 var curCount;//当前剩余秒数 function sendMessage() { curCount = count; //设置button效果,开始计时 $("#btnSendCode").attr("disabled", "true"); $("#btnSendCode").val(curCount + "秒后可重新发送"); InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次 //请求后台发送验证码 TODO } //timer处理函数 function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止计时器 $("#btnSendCode").removeAttr("disabled");//启用按钮 $("#btnSendCode").val("重新发送验证码"); } else { curCount--; $("#btnSendCode").val(curCount + "秒后可重新发送"); } } </script> </head> <body> <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p> </body> </html>
以上这篇单击按钮发送验证码,出现倒计时的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
html文件中jquery与velocity变量中的$冲突的解决方法
在使用velocity模版引擎的环境下,使用jquery时其中$与velocity变量中的$冲突,下面有个不错的解决方法,感兴趣的朋友可以参考下2013-11-11jQuery 借助插件Lavalamp实现导航条动态美化效果
导航条动态显示效果借助插件Lavalamp可以轻松实现,以前用animate来实现,效果不是很好2013-09-09jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
这篇文章主要介绍了jQuery实现的Tab滑动选项卡及图片切换效果小结,实例总结了几种常见的tab切换效果,包括鼠标点击切换、滑过切换、定时自动切换等,非常具有实用价值,需要的朋友可以参考下2015-09-09
最新评论