伍佰目录 短网址
  当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

验证码倒计时

来源:本站原创 浏览:214次 时间:2021-06-18

  实际开发中,验证码的验证,现在各大网站都是必须的,什么手机验证码验证,邮箱验证等。今天遇到一个例子,特地记录一下。

     模拟HTML结构,实际要复杂的多。

  HTML结构很简单,就是两个按钮,有不同的id,如下:

<button id="btn">手机验证码</button><button id="btn2">邮箱验证码</button>

  为了简化dom操作,我们引入jQuery,js 代码如下:

function settime(val,verify_type,setTimeNumber) {    if (setTimeNumber== 0) {        val.removeAttribute("disabled");        val.innerHTML = verify_type;        setTimeNumber= setTimeNumber
; } else { val.setAttribute("disabled", true);
val.innerHTML = "重新发送(" + setTimeNumber + ")";
setTimeNumber--;
setTimeout(function() {
settime(val,verify_type,setTimeNumber);
},1000);
} }
$("#btn").click(function(){ settime(this,"手机验证码",10);
})
$("#btn2").click(function(){ settime(this,"邮箱验证码",20); })

  这里对函数稍稍的封装了一下,因为我们想在实际的开发中,只要是验证码的业务,都用一套Js,所以,封装少不了,当然我这里是简单的,有更好的封装方法,可以评论留言,我们相互学习。我把验证的类型和验证的时间分开写,作为参数传入,目的就是在调用的时候,对不同的对象采用同一种方法,只要传入不同的参数就可以实现,这就是js中的封装和多态的思想。

  代码中,用了if的判断,只要 setTimeNumber 的值是0,那么就是倒计时结束,我们就让这个按钮可以点击了,移出“disabled”的属性。val.removeAttribute("disabled");

如果不是为0的值,(当然,在传入的时候,必须是正整数,不过我们也可以在函数里判断,如果传入的参数不是正整数,就return 等处理。),我们就让这个值减一,调用定时器来处理,让定时器,调用这个函数,知道setTimeNumber为0,同时在倒计时的时候,按钮是不可点击的,因此,给它要添加disabled的属性。

每日一句:Today is a long time away from the chaotic 1970s, but Wolverine seems no less re̽��,����levant in the age of President Trump. As Alex Godfrey of Empire magazine wrote: “Wolverine was created in a dark, uncertain time of political upheaval. We don’t want him going anywhere.

翻译:今天离混乱的上世纪70年代已经很远了,但金刚狼似乎仍和特朗普的总统时代息息相关。正如《帝国》杂志的亚历克斯·戈弗雷所写的那样:“金刚狼创造于一个黑暗、动荡的政治巨变年代。我们不想让他远离。”

 

  推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • 就要爱网站目录就要爱网站目录

    就要爱网站目录,按主题和类别列出网站。所有提交的网站都经过人工审查,确保质量和无垃圾邮件的结果。

    www.912219.com
  • 伍佰目录伍佰目录

    伍佰网站目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向伍佰目录推荐、提交优秀网站。

    www.wbwb.net