有时候我们在发送验证码的时候,总会有倒计时功能,下面小编就为大家带来一篇单击按钮发送验证码,出现倒计时的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
实例如下:
<!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>
大家学会了吗?赶紧动手尝试一下吧。
相关推荐:
js通过date对象实现倒计时动画效果实例分享
手机注册发送验证码倒计时简单实现方法
jquery实现发送短信倒计时功能
以上就是单击按钮发送验证码并出现倒计时实现方法的详细内容。